groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove useBillingAndUsageData hook

Browse Source
This commit is contained in:
Rıdvan Akca
2024-03-28 16:13:46 +03:00
parent 88c50e014d
commit d2a7889fc9
9 changed files with 20 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/web/src/components/CheckoutCompletedAlert/index.ee.jsx
View File

@@ -1,14 +1,17 @@
import * as React from 'react';
import { useLocation } from 'react-router-dom';
import Alert from '@mui/material/Alert';
import Typography from '@mui/material/Typography';
import useFormatMessage from 'hooks/useFormatMessage';
import useSubscription from 'hooks/useSubscription.ee';
export default function CheckoutCompletedAlert() {
const formatMessage = useFormatMessage();
const subscription = useSubscription();
const location = useLocation();
const state = location.state;
const checkoutCompleted = state?.checkoutCompleted;
if (subscription?.data?.status !== 'active') return <React.Fragment />;
if (!checkoutCompleted) return <React.Fragment />;
return (
<Alert

2
packages/web/src/components/UsageDataInformation/index.ee.jsx
View File

@@ -102,7 +102,7 @@ export default function UsageDataInformation() {
billingInfo = {
monthlyQuota: {
title: formatMessage('usageDataInformation.freeTrial'),
action: '/settings/billing/upgrade',
action: URLS.SETTINGS_PLAN_UPGRADE,
text: 'Upgrade plan',
},
nextBillAmount: {

13
packages/web/src/contexts/Paddle.ee.jsx
View File

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
import * as URLS from 'config/urls';
import useCloud from 'hooks/useCloud';
import usePaddleInfo from 'hooks/usePaddleInfo.ee';
import apolloClient from 'graphql/client';
import { useQueryClient } from '@tanstack/react-query';
export const PaddleContext = React.createContext({
loaded: false,
@@ -17,6 +17,7 @@ export const PaddleProvider = (props) => {
const { data } = usePaddleInfo();
const sandbox = data?.data?.sandbox;
const vendorId = data?.data?.vendorId;
const queryClient = useQueryClient();
const [loaded, setLoaded] = React.useState(false);
@@ -29,8 +30,12 @@ export const PaddleProvider = (props) => {
if (completed) {
// Paddle has side effects in the background,
// so we need to refetch the relevant queries
await apolloClient.refetchQueries({
include: ['GetTrialStatus', 'GetBillingAndUsage'],
await queryClient.refetchQueries({
queryKey: ['userTrial'],
});
await queryClient.refetchQueries({
queryKey: ['subscription'],
});
navigate(URLS.SETTINGS_BILLING_AND_USAGE, {
@@ -39,7 +44,7 @@ export const PaddleProvider = (props) => {
}
}
},
[navigate],
[navigate, queryClient],
);
const value = React.useMemo(() => {

37
packages/web/src/graphql/queries/get-billing-and-usage.ee.js
View File

@@ -1,37 +0,0 @@
import { gql } from '@apollo/client';
export const GET_BILLING_AND_USAGE = gql`
query GetBillingAndUsage {
getBillingAndUsage {
subscription {
status
monthlyQuota {
title
action {
type
text
src
}
}
nextBillDate {
title
action {
type
text
src
}
}
nextBillAmount {
title
action {
type
text
src
}
}
}
usage {
task
}
}
}
`;

52
packages/web/src/hooks/useBillingAndUsageData.ee.js
View File

@@ -1,52 +0,0 @@
import * as React from 'react';
import { useQuery } from '@apollo/client';
import { useLocation } from 'react-router-dom';
import { DateTime } from 'luxon';
import { GET_BILLING_AND_USAGE } from 'graphql/queries/get-billing-and-usage.ee';
function transform(billingAndUsageData) {
const nextBillDate = billingAndUsageData.subscription.nextBillDate;
const nextBillDateTitle = nextBillDate.title;
const nextBillDateTitleDateObject = DateTime.fromMillis(
Number(nextBillDateTitle),
);
const formattedNextBillDateTitle = nextBillDateTitleDateObject.isValid
? nextBillDateTitleDateObject.toFormat('LLL dd, yyyy')
: nextBillDateTitle;
return {
...billingAndUsageData,
subscription: {
...billingAndUsageData.subscription,
nextBillDate: {
...billingAndUsageData.subscription.nextBillDate,
title: formattedNextBillDateTitle,
},
},
};
}
export default function useBillingAndUsageData() {
const location = useLocation();
const state = location.state;
const { data, loading, startPolling, stopPolling } = useQuery(
GET_BILLING_AND_USAGE,
);
const checkoutCompleted = state?.checkoutCompleted;
const hasSubscription = !!data?.getBillingAndUsage?.subscription?.status;
React.useEffect(
function pollDataUntilSubscriptionIsCreated() {
if (checkoutCompleted && !hasSubscription) {
startPolling(1000);
}
},
[checkoutCompleted, hasSubscription, startPolling],
);
React.useEffect(
function stopPollingWhenSubscriptionIsCreated() {
if (checkoutCompleted && hasSubscription) {
stopPolling();
}
},
[checkoutCompleted, hasSubscription, stopPolling],
);
if (loading) return null;
return transform(data.getBillingAndUsage);
}

23
packages/web/src/hooks/useSubscription.ee.js
View File

@@ -24,7 +24,7 @@ export default function useSubscription() {
const checkoutCompleted = state?.checkoutCompleted;
const [isPolling, setIsPolling] = React.useState(false);
const { data, isLoading: isSubscriptionLoading } = useQuery({
const { data } = useQuery({
queryKey: ['subscription'],
queryFn: async ({ signal }) => {
const { data } = await api.get(`/v1/users/me/subscription`, {
@@ -38,32 +38,17 @@ export default function useSubscription() {
const subscription = data?.data;
const hasSubscription = !!subscription?.status;
const hasSubscription = subscription?.status === 'active';
React.useEffect(
function pollDataUntilSubscriptionIsCreated() {
if (checkoutCompleted && !hasSubscription) {
setIsPolling(true);
if (checkoutCompleted) {
setIsPolling(!hasSubscription);
}
},
[checkoutCompleted, hasSubscription],
);
React.useEffect(
function stopPollingWhenSubscriptionIsCreated() {
if (checkoutCompleted && hasSubscription) {
setIsPolling(false);
}
},
[checkoutCompleted, hasSubscription],
);
const cancellationEffectiveDate = subscription?.cancellationEffectiveDate;
const hasCancelled = !!cancellationEffectiveDate;
if (isSubscriptionLoading || !hasCancelled) return null;
return {
data: transform(subscription),
};