feat: adjust custom data

Author: capJavert

packages/shared/src/contexts/RecruiterPaymentContext/types.ts

@@ -22,7 +22,7 @@ export type ProcessingError = {
 
 export type RecruiterPaymentContextData = {
   paddle?: Paddle | undefined;
-  openCheckout?: OpenCheckoutFn;
+  openCheckout?: OpenCheckoutFn<{ opportunity_id: string }>;
   onCompletion?: () => void;
   selectedProduct?: RecruiterProductOption;
   setSelectedProduct: (product: RecruiterProductOption) => void;

packages/shared/src/contexts/payment/context.ts

@@ -2,15 +2,17 @@ import type { Dispatch, ReactNode, SetStateAction } from 'react';
 import { createContext, useContext } from 'react';
 import type { ProductPricingPreview, PurchaseType } from '../../graphql/paddle';
 
-export interface OpenCheckoutProps {
+export interface OpenCheckoutProps<TCustomData = Record<string, unknown>> {
   priceId: string;
   giftToUserId?: string;
-  customData?: Record<string, unknown>;
+  customData?: TCustomData;
   discountId?: string;
   quantity?: number;
 }
 
-export type OpenCheckoutFn = (props: OpenCheckoutProps) => void;
+export type OpenCheckoutFn<TCustomData = Record<string, unknown>> = (
+  props: OpenCheckoutProps<TCustomData>,
+) => void;
 
 export interface PaymentContextData {
   openCheckout?: OpenCheckoutFn;

packages/shared/src/hooks/usePaddlePayment.ts

@@ -201,12 +201,13 @@ export const usePaddlePayment = ({
   }, [router, disabledEvents, targetType, isOrganization, isPlusPlan]);
 
   const openCheckout = useCallback(
-    ({
+    <TCustomData>({
       priceId,
       giftToUserId,
       discountId,
       quantity = 1,
-    }: OpenCheckoutProps) => {
+      customData: customDataProp,
+    }: OpenCheckoutProps<TCustomData>) => {
       const items: CheckoutLineItem[] = [{ priceId, quantity }];
       const customer: CheckoutCustomer = {
         ...(user?.email
@@ -222,6 +223,7 @@ export const usePaddlePayment = ({
       };
 
       const customData = {
+        ...customDataProp,
         user_id: giftToUserId ?? user?.id,
         tracking_id: trackingId,
         ...(!!giftToUserId && { gifter_id: user?.id }),

packages/webapp/pages/recruiter/[opportunityId]/payment.tsx

@@ -16,21 +16,31 @@ import {
 } from '@dailydotdev/shared/src/components/typography/Typography';
 import { FlexCol } from '@dailydotdev/shared/src/components/utilities';
 import { useRecruiterPaymentContext } from '@dailydotdev/shared/src/contexts/RecruiterPaymentContext/types';
+import {
+  OpportunityPreviewProvider,
+  useOpportunityPreviewContext,
+} from '@dailydotdev/shared/src/features/opportunity/context/OpportunityPreviewContext';
 
 const RecruiterPaymentPage = (): ReactElement => {
   const router = useRouter();
   const checkoutRef = useRef<HTMLDivElement>(null);
   const { openCheckout, selectedProduct } = useRecruiterPaymentContext();
+  const { opportunity } = useOpportunityPreviewContext();
 
   useEffect(() => {
+    if (!opportunity) {
+      return;
+    }
+
     if (!selectedProduct) {
       return;
     }
 
     openCheckout({
       priceId: selectedProduct.id,
+      customData: { opportunity_id: opportunity.id },
     });
-  }, [selectedProduct, openCheckout]);
+  }, [selectedProduct, openCheckout, opportunity]);
 
   const handleBack = () => {
     router.back();
@@ -156,7 +166,11 @@ const RecruiterPaymentPage = (): ReactElement => {
 RecruiterPaymentPage.getLayout = function getLayout(
   page: ReactNode,
 ): ReactNode {
-  return <RecruiterPaymentContext>{page}</RecruiterPaymentContext>;
+  return (
+    <OpportunityPreviewProvider>
+      <RecruiterPaymentContext>{page}</RecruiterPaymentContext>
+    </OpportunityPreviewProvider>
+  );
 };
 
 export default RecruiterPaymentPage;