Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: refactor data usage into hooks, estimate monthly added fees #7048

Merged
merged 11 commits into from May 17, 2024

Conversation

daveleek
Copy link
Contributor

@daveleek daveleek commented May 13, 2024

About the changes

  • Refactors data processing and overage calculations to separate hooks
  • Adds support for estimating traffic costs based on monthly usage up to current point
  • Adds accrued traffic charges to the billing page

image

image

Copy link

vercel bot commented May 13, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
unleash-monorepo-frontend ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 17, 2024 0:41am
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
unleash-docs ⬜️ Ignored (Inspect) Visit Preview May 17, 2024 0:41am

}));

const StyledCardTitleRow = styled(Box)(() => ({}));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀

}: INetworkTrafficUsagePlanSummary) => {
const overages = usageTotal - includedTraffic;
const estimateFlagEnabled = useUiFlag('estimateTrafficDataCost');
console.log(estimateFlagEnabled);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀

requests
</Badge>
}
/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not something like:

<Badge color={usageTotal <= includedTraffic ? 'success' : 'error'}>
    {usageTotal.toLocaleString()}{' '}
    requests
</Badge>

}
elseShow={
<Badge color='error'>
<Badge color='neutral'>
{usageTotal.toLocaleString()}{' '}
requests
</Badge>
}
/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add 'neutral' to the ternary as well and you can get rid of this other conditional render with the repeated badge 😄

</StyledGrid>
}
/>
</StyledContainerGrid>
Copy link
Member

@nunogois nunogois May 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might just be me, but from a design perspective it's a bit weird to me that some of these are badges but not others. At least I don't follow the reasoning. I recommend double checking with @FredrikOseberg just in case.

image

import type { ChartDataset } from 'chart.js';

const trafficDataUnitCost = 5;
const trafficDataUnitSize = 1_000_000;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we're super strict with this, but we generally identify constants like these with UPPER_SNAKE_CASE.

Copy link
Member

@nunogois nunogois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking approval 👍

@daveleek daveleek merged commit dfc0c3c into main May 17, 2024
11 checks passed
@daveleek daveleek deleted the feat/traffic-data-usage-estimation branch May 17, 2024 13:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

None yet

2 participants