110 lines
2.5 KiB
TypeScript
110 lines
2.5 KiB
TypeScript
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';
|
|
|
|
declare global {
|
|
interface Window {
|
|
Paddle: any;
|
|
}
|
|
}
|
|
|
|
export type PaddleContextParams = {
|
|
loaded: boolean;
|
|
};
|
|
|
|
export const PaddleContext =
|
|
React.createContext<PaddleContextParams>({
|
|
loaded: false,
|
|
});
|
|
|
|
type PaddleProviderProps = {
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export const PaddleProvider = (
|
|
props: PaddleProviderProps
|
|
): React.ReactElement => {
|
|
const { children } = props;
|
|
const isCloud = useCloud();
|
|
const navigate = useNavigate();
|
|
const { sandbox, vendorId } = 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) {
|
|
// Paddle has side effects in the background,
|
|
// so we need to refetch the relevant queries
|
|
await apolloClient.refetchQueries({
|
|
include: ['GetTrialStatus', 'GetBillingAndUsage'],
|
|
});
|
|
|
|
navigate(
|
|
URLS.SETTINGS_BILLING_AND_USAGE,
|
|
{
|
|
state: { checkoutCompleted: true }
|
|
}
|
|
);
|
|
}
|
|
}
|
|
}, [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;
|
|
}
|
|
|
|
const g = document.createElement('script')
|
|
const s = document.getElementsByTagName('script')[0];
|
|
g.src = 'https://cdn.paddle.com/paddle/paddle.js';
|
|
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) {
|
|
window.Paddle.Environment.set('sandbox');
|
|
}
|
|
|
|
window.Paddle.Setup({
|
|
vendor: vendorId,
|
|
eventCallback: paddleEventHandler,
|
|
});
|
|
}, [loaded, sandbox, vendorId, paddleEventHandler])
|
|
|
|
return (
|
|
<PaddleContext.Provider value={value}>
|
|
{children}
|
|
</PaddleContext.Provider>
|
|
);
|
|
};
|