diff --git a/packages/fxa-payments-server/src/components/PayPalButton/index.stories.tsx b/packages/fxa-payments-server/src/components/PayPalButton/index.stories.tsx index b8a722bfb46..bb3e21aa06e 100644 --- a/packages/fxa-payments-server/src/components/PayPalButton/index.stories.tsx +++ b/packages/fxa-payments-server/src/components/PayPalButton/index.stories.tsx @@ -13,11 +13,10 @@ const defaultApiClientOverrides = { const Subject = ({ disabled = false, apiClientOverrides = defaultApiClientOverrides, - currencyCode = 'USD', customer = CUSTOMER, idempotencyKey = '', refreshSubmitNonce = () => {}, - priceId = PLAN.plan_id, + selectedPlan = PLAN, newPaypalAgreement = false, postSubscriptionAttemptPaypalCallback = linkTo('routes/Product', 'success'), setSubscriptionError = () => {}, @@ -26,11 +25,10 @@ const Subject = ({ }: PickPartial< PaypalButtonProps, | 'disabled' - | 'currencyCode' | 'customer' | 'idempotencyKey' | 'refreshSubmitNonce' - | 'priceId' + | 'selectedPlan' | 'newPaypalAgreement' | 'postSubscriptionAttemptPaypalCallback' | 'setSubscriptionError' @@ -41,11 +39,10 @@ const Subject = ({ {...{ disabled, apiClientOverrides, - currencyCode, customer, idempotencyKey, refreshSubmitNonce, - priceId, + selectedPlan, newPaypalAgreement, postSubscriptionAttemptPaypalCallback, setSubscriptionError, diff --git a/packages/fxa-payments-server/src/components/PayPalButton/index.test.tsx b/packages/fxa-payments-server/src/components/PayPalButton/index.test.tsx index de1861a2c37..c4c5b80837e 100644 --- a/packages/fxa-payments-server/src/components/PayPalButton/index.test.tsx +++ b/packages/fxa-payments-server/src/components/PayPalButton/index.test.tsx @@ -8,11 +8,10 @@ import { CUSTOMER, PLAN } from '../../lib/mock-data'; const Subject = ({ disabled = false, - currencyCode = 'USD', customer = CUSTOMER, idempotencyKey = '', refreshSubmitNonce = () => {}, - priceId = PLAN.plan_id, + selectedPlan = PLAN, newPaypalAgreement = false, postSubscriptionAttemptPaypalCallback = () => {}, setSubscriptionError = () => {}, @@ -21,11 +20,10 @@ const Subject = ({ }: PickPartial< PaypalButtonProps, | 'disabled' - | 'currencyCode' | 'customer' | 'idempotencyKey' | 'refreshSubmitNonce' - | 'priceId' + | 'selectedPlan' | 'newPaypalAgreement' | 'postSubscriptionAttemptPaypalCallback' | 'setSubscriptionError' @@ -35,11 +33,10 @@ const Subject = ({ void) | (() => Promise); beforeCreateOrder?: () => Promise; setSubscriptionError: Function; - priceId?: string; + selectedPlan: Plan; newPaypalAgreement?: boolean; apiClientOverrides?: Partial< SubscriptionCreateAuthServerAPIs | PaymentUpdateAuthServerAPIs @@ -56,7 +55,6 @@ export const PaypalButtonBase = : null; export const PaypalButton = ({ - currencyCode, customer, disabled, idempotencyKey, @@ -64,13 +62,19 @@ export const PaypalButton = ({ postSubscriptionAttemptPaypalCallback, beforeCreateOrder, setSubscriptionError, - priceId, + selectedPlan, newPaypalAgreement, apiClientOverrides, setTransactionInProgress, ButtonBase = PaypalButtonBase, promotionCode, }: PaypalButtonProps) => { + const { + currency: currencyCode, + plan_id: priceId, + product_id: productId, + } = selectedPlan; + const createOrder = useCallback(async () => { try { if (beforeCreateOrder) { @@ -125,6 +129,7 @@ export const PaypalButton = ({ idempotencyKey, // @ts-ignore Doesn't like that the existence check for priceId is stored in isNewSubscription priceId, + productId, token, promotionCode, }); @@ -152,9 +157,9 @@ export const PaypalButton = ({ customer, idempotencyKey, newPaypalAgreement, - priceId, refreshSubmitNonce, postSubscriptionAttemptPaypalCallback, + selectedPlan, setSubscriptionError, setTransactionInProgress, promotionCode, diff --git a/packages/fxa-payments-server/src/lib/apiClient.test.ts b/packages/fxa-payments-server/src/lib/apiClient.test.ts index 1ddbc54ff8f..4fd926354b7 100644 --- a/packages/fxa-payments-server/src/lib/apiClient.test.ts +++ b/packages/fxa-payments-server/src/lib/apiClient.test.ts @@ -662,10 +662,12 @@ describe('API requests', () => { const params = { idempotencyKey: 'idk-8675309', priceId: 'price_12345', + productId: 'product_2a', ...MOCK_CHECKOUT_TOKEN, }; const metricsOptions = { planId: params.priceId, + productId: params.productId, paymentProvider: 'paypal', }; diff --git a/packages/fxa-payments-server/src/lib/apiClient.ts b/packages/fxa-payments-server/src/lib/apiClient.ts index 3093538edfe..024f1cc254c 100644 --- a/packages/fxa-payments-server/src/lib/apiClient.ts +++ b/packages/fxa-payments-server/src/lib/apiClient.ts @@ -267,6 +267,7 @@ export async function apiGetPaypalCheckoutToken(params: { export async function apiCapturePaypalPayment(params: { idempotencyKey: string; priceId: string; + productId: string; token?: string; promotionCode?: string; }): Promise<{ @@ -275,6 +276,7 @@ export async function apiCapturePaypalPayment(params: { }> { const metricsOptions: Amplitude.EventProperties = { planId: params.priceId, + productId: params.productId, paymentProvider: 'paypal', promotionCode: params.promotionCode, }; diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.tsx b/packages/fxa-payments-server/src/routes/Checkout/index.tsx index 7bac812c1d4..5f43b12cae6 100644 --- a/packages/fxa-payments-server/src/routes/Checkout/index.tsx +++ b/packages/fxa-payments-server/src/routes/Checkout/index.tsx @@ -375,7 +375,6 @@ export const Checkout = ({
@@ -250,11 +247,10 @@ export const PaymentUpdateForm = ({