From 7a8e8c1f3ecbc76405590354d8a8d31391b3de3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=B1dvan=20Akca?= Date: Tue, 12 Mar 2024 17:21:44 +0300 Subject: [PATCH] refactor: rewrite usePaddleInfo with RQ --- .../src/graphql/queries/get-paddle-info.ee.js | 10 ------- .../backend/src/graphql/query-resolvers.js | 2 -- packages/backend/src/graphql/schema.graphql | 6 ----- packages/web/src/contexts/Paddle.ee.jsx | 26 +++++++++++++++---- .../src/graphql/queries/get-paddle-info.ee.js | 9 ------- packages/web/src/hooks/usePaddleInfo.ee.js | 23 ++++++++++------ 6 files changed, 36 insertions(+), 40 deletions(-) delete mode 100644 packages/backend/src/graphql/queries/get-paddle-info.ee.js delete mode 100644 packages/web/src/graphql/queries/get-paddle-info.ee.js diff --git a/packages/backend/src/graphql/queries/get-paddle-info.ee.js b/packages/backend/src/graphql/queries/get-paddle-info.ee.js deleted file mode 100644 index a07df777..00000000 --- a/packages/backend/src/graphql/queries/get-paddle-info.ee.js +++ /dev/null @@ -1,10 +0,0 @@ -import appConfig from '../../config/app.js'; -import Billing from '../../helpers/billing/index.ee.js'; - -const getPaddleInfo = async () => { - if (!appConfig.isCloud) return; - - return Billing.paddleInfo; -}; - -export default getPaddleInfo; diff --git a/packages/backend/src/graphql/query-resolvers.js b/packages/backend/src/graphql/query-resolvers.js index 58b63077..dffdec56 100644 --- a/packages/backend/src/graphql/query-resolvers.js +++ b/packages/backend/src/graphql/query-resolvers.js @@ -12,7 +12,6 @@ import getFlow from './queries/get-flow.js'; import getFlows from './queries/get-flows.js'; import getInvoices from './queries/get-invoices.ee.js'; import getNotifications from './queries/get-notifications.js'; -import getPaddleInfo from './queries/get-paddle-info.ee.js'; import getPaymentPlans from './queries/get-payment-plans.ee.js'; import getPermissionCatalog from './queries/get-permission-catalog.ee.js'; import getRole from './queries/get-role.ee.js'; @@ -43,7 +42,6 @@ const queryResolvers = { getFlows, getInvoices, getNotifications, - getPaddleInfo, getPaymentPlans, getPermissionCatalog, getRole, diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql index 2ee3c650..ddc4739d 100644 --- a/packages/backend/src/graphql/schema.graphql +++ b/packages/backend/src/graphql/schema.graphql @@ -32,7 +32,6 @@ type Query { getCurrentUser: User getConfig(keys: [String]): JSONObject getInvoices: [Invoice] - getPaddleInfo: GetPaddleInfo getPaymentPlans: [PaymentPlan] getPermissionCatalog: PermissionCatalog getRole(id: String!): Role @@ -683,11 +682,6 @@ type Usage { task: Int } -type GetPaddleInfo { - sandbox: Boolean - vendorId: Int -} - type Invoice { id: Int amount: Float diff --git a/packages/web/src/contexts/Paddle.ee.jsx b/packages/web/src/contexts/Paddle.ee.jsx index 68e4a954..4d31caea 100644 --- a/packages/web/src/contexts/Paddle.ee.jsx +++ b/packages/web/src/contexts/Paddle.ee.jsx @@ -1,21 +1,27 @@ import * as React from 'react'; 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'; + export const PaddleContext = React.createContext({ loaded: false, }); + export const PaddleProvider = (props) => { const { children } = props; const isCloud = useCloud(); const navigate = useNavigate(); - const { sandbox, vendorId } = usePaddleInfo(); + const { data } = usePaddleInfo(); + const [loaded, setLoaded] = React.useState(false); + const paddleEventHandler = React.useCallback( async (payload) => { const { event, eventData } = payload; + if (event === 'Checkout.Close') { const completed = eventData.checkout?.completed; if (completed) { @@ -24,6 +30,7 @@ export const PaddleProvider = (props) => { await apolloClient.refetchQueries({ include: ['GetTrialStatus', 'GetBillingAndUsage'], }); + navigate(URLS.SETTINGS_BILLING_AND_USAGE, { state: { checkoutCompleted: true }, }); @@ -32,15 +39,18 @@ export const PaddleProvider = (props) => { }, [navigate], ); + const value = React.useMemo(() => { return { loaded, }; }, [loaded]); + React.useEffect( function loadPaddleScript() { if (!isCloud) return; const isInjected = document.getElementById('paddle-js'); + if (isInjected) { setLoaded(true); return; @@ -51,28 +61,34 @@ export const PaddleProvider = (props) => { g.defer = true; g.async = true; g.id = 'paddle-js'; + if (s.parentNode) { s.parentNode.insertBefore(g, s); } + g.onload = function () { setLoaded(true); }; }, [isCloud], ); + React.useEffect( function initPaddleScript() { - if (!loaded || !vendorId) return; - if (sandbox) { + if (!loaded || !data?.data?.vendorId) return; + + if (data?.data?.sandbox) { window.Paddle.Environment.set('sandbox'); } + window.Paddle.Setup({ - vendor: vendorId, + vendor: data?.data?.vendorId, eventCallback: paddleEventHandler, }); }, - [loaded, sandbox, vendorId, paddleEventHandler], + [loaded, data?.data?.sandbox, data?.data?.vendorId, paddleEventHandler], ); + return ( {children} ); diff --git a/packages/web/src/graphql/queries/get-paddle-info.ee.js b/packages/web/src/graphql/queries/get-paddle-info.ee.js deleted file mode 100644 index f307f4ea..00000000 --- a/packages/web/src/graphql/queries/get-paddle-info.ee.js +++ /dev/null @@ -1,9 +0,0 @@ -import { gql } from '@apollo/client'; -export const GET_PADDLE_INFO = gql` - query GetPaddleInfo { - getPaddleInfo { - sandbox - vendorId - } - } -`; diff --git a/packages/web/src/hooks/usePaddleInfo.ee.js b/packages/web/src/hooks/usePaddleInfo.ee.js index b0ff9a7c..b50b1366 100644 --- a/packages/web/src/hooks/usePaddleInfo.ee.js +++ b/packages/web/src/hooks/usePaddleInfo.ee.js @@ -1,10 +1,17 @@ -import { useQuery } from '@apollo/client'; -import { GET_PADDLE_INFO } from 'graphql/queries/get-paddle-info.ee'; +import { useQuery } from '@tanstack/react-query'; +import api from 'helpers/api'; + export default function usePaddleInfo() { - const { data, loading } = useQuery(GET_PADDLE_INFO); - return { - sandbox: data?.getPaddleInfo?.sandbox, - vendorId: data?.getPaddleInfo?.vendorId, - loading, - }; + const query = useQuery({ + queryKey: ['paddleInfo'], + queryFn: async ({ signal }) => { + const { data } = await api.get('/v1/payment/paddle-info', { + signal, + }); + + return data; + }, + }); + + return query; }