From 9b50b1e03b2421638800c09d55bb833e91903bc2 Mon Sep 17 00:00:00 2001 From: vsrivatsa-juspay Date: Mon, 1 Jul 2024 18:11:27 +0530 Subject: [PATCH 1/4] fix: payment data filled event logs for few payment methods --- src/Payments/KlarnaSDK.res | 5 +++++ src/Payments/PayPal.res | 1 + src/Payments/PaypalSDKHelpers.res | 1 + 3 files changed, 7 insertions(+) diff --git a/src/Payments/KlarnaSDK.res b/src/Payments/KlarnaSDK.res index 0dbbb1494..5e9e86942 100644 --- a/src/Payments/KlarnaSDK.res +++ b/src/Payments/KlarnaSDK.res @@ -62,6 +62,11 @@ let make = (~sessionObj: SessionsType.token) => { result => { let result = result->JSON.Decode.bool->Option.getOr(false) if result { + UtilityHooks.useHandlePostMessages( + ~complete=true, + ~empty=false, + ~paymentType="klarna", + ) Utils.handlePostMessage([ ("fullscreen", true->JSON.Encode.bool), ("param", "paymentloader"->JSON.Encode.string), diff --git a/src/Payments/PayPal.res b/src/Payments/PayPal.res index b1384a6c0..a3ca1fcca 100644 --- a/src/Payments/PayPal.res +++ b/src/Payments/PayPal.res @@ -48,6 +48,7 @@ let make = () => { ->then(result => { let result = result->JSON.Decode.bool->Option.getOr(false) if result { + UtilityHooks.useHandlePostMessages(~complete=true, ~empty=true, ~paymentType="paypal") let (connectors, _) = paymentMethodListValue->PaymentUtils.getConnectors(Wallets(Paypal(Redirect))) let body = PaymentBody.paypalRedirectionBody(~connectors) diff --git a/src/Payments/PaypalSDKHelpers.res b/src/Payments/PaypalSDKHelpers.res index 3c6db1b01..661ed5358 100644 --- a/src/Payments/PaypalSDKHelpers.res +++ b/src/Payments/PaypalSDKHelpers.res @@ -30,6 +30,7 @@ let loadPaypalSDK = ( ->then(result => { let result = result->JSON.Decode.bool->Option.getOr(false) if result { + UtilityHooks.useHandlePostMessages(~complete=true, ~empty=true, ~paymentType="paypal") let paypalWrapper = GooglePayType.getElementById(Utils.document, "paypal-button") paypalWrapper.innerHTML = "" paypal["Buttons"]({ From a7b52a9fbd2c60de86d3a91bd4b206a5b348aa89 Mon Sep 17 00:00:00 2001 From: Vrishab Srivatsa <136090360+vsrivatsa-juspay@users.noreply.github.com> Date: Tue, 2 Jul 2024 12:05:32 +0530 Subject: [PATCH 2/4] Apply suggestions from code review --- src/Payments/PayPal.res | 2 +- src/Payments/PaypalSDKHelpers.res | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Payments/PayPal.res b/src/Payments/PayPal.res index a3ca1fcca..3e4c0f541 100644 --- a/src/Payments/PayPal.res +++ b/src/Payments/PayPal.res @@ -48,7 +48,7 @@ let make = () => { ->then(result => { let result = result->JSON.Decode.bool->Option.getOr(false) if result { - UtilityHooks.useHandlePostMessages(~complete=true, ~empty=true, ~paymentType="paypal") + UtilityHooks.useHandlePostMessages(~complete=true, ~empty=false, ~paymentType="paypal") let (connectors, _) = paymentMethodListValue->PaymentUtils.getConnectors(Wallets(Paypal(Redirect))) let body = PaymentBody.paypalRedirectionBody(~connectors) diff --git a/src/Payments/PaypalSDKHelpers.res b/src/Payments/PaypalSDKHelpers.res index 661ed5358..b35f140c1 100644 --- a/src/Payments/PaypalSDKHelpers.res +++ b/src/Payments/PaypalSDKHelpers.res @@ -30,7 +30,7 @@ let loadPaypalSDK = ( ->then(result => { let result = result->JSON.Decode.bool->Option.getOr(false) if result { - UtilityHooks.useHandlePostMessages(~complete=true, ~empty=true, ~paymentType="paypal") + UtilityHooks.useHandlePostMessages(~complete=true, ~empty=false, ~paymentType="paypal") let paypalWrapper = GooglePayType.getElementById(Utils.document, "paypal-button") paypalWrapper.innerHTML = "" paypal["Buttons"]({ From 6aaae7b06c91ee0c2eaa2f88233d27eff1abeb23 Mon Sep 17 00:00:00 2001 From: vsrivatsa-juspay Date: Tue, 2 Jul 2024 12:15:49 +0530 Subject: [PATCH 3/4] fix: hooks conventions --- src/Payments/KlarnaSDK.res | 9 ++++----- src/Payments/PayPal.res | 6 +++++- src/Payments/PaypalSDK.res | 3 +++ src/Payments/PaypalSDKHelpers.res | 3 ++- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/Payments/KlarnaSDK.res b/src/Payments/KlarnaSDK.res index 5e9e86942..94a10ba35 100644 --- a/src/Payments/KlarnaSDK.res +++ b/src/Payments/KlarnaSDK.res @@ -18,6 +18,7 @@ let make = (~sessionObj: SessionsType.token) => { let {iframeId} = Recoil.useRecoilValueFromAtom(keys) let status = CommonHooks.useScript("https://x.klarnacdn.net/kp/lib/v1/api.js") // Klarna SDK script let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue) + let (complete, setComplete) = React.useState(_ => false) let setAreOneClickWalletsRendered = Recoil.useSetRecoilState(areOneClickWalletsRendered) let (stateJson, setStatesJson) = React.useState(_ => JSON.Encode.null) @@ -40,6 +41,8 @@ let make = (~sessionObj: SessionsType.token) => { PaymentUtils.useStatesJson(setStatesJson) + UtilityHooks.useHandlePostMessages(~complete, ~empty=!complete, ~paymentType="klarna") + React.useEffect(() => { if ( status === "ready" && @@ -62,16 +65,12 @@ let make = (~sessionObj: SessionsType.token) => { result => { let result = result->JSON.Decode.bool->Option.getOr(false) if result { - UtilityHooks.useHandlePostMessages( - ~complete=true, - ~empty=false, - ~paymentType="klarna", - ) Utils.handlePostMessage([ ("fullscreen", true->JSON.Encode.bool), ("param", "paymentloader"->JSON.Encode.string), ("iframeId", iframeId->JSON.Encode.string), ]) + setComplete(_ => true) authorize( {collect_shipping_address: componentName->getIsExpressCheckoutComponent}, Dict.make()->JSON.Encode.object, diff --git a/src/Payments/PayPal.res b/src/Payments/PayPal.res index a3ca1fcca..57bb69ba9 100644 --- a/src/Payments/PayPal.res +++ b/src/Payments/PayPal.res @@ -35,6 +35,11 @@ let make = () => { let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(RecoilAtoms.isManualRetryEnabled) let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Paypal) + UtilityHooks.useHandlePostMessages( + ~complete=paypalClicked, + ~empty=!paypalClicked, + ~paymentType="paypal", + ) let onPaypalClick = _ev => { loggerState.setLogInfo( ~value="Paypal Button Clicked", @@ -48,7 +53,6 @@ let make = () => { ->then(result => { let result = result->JSON.Decode.bool->Option.getOr(false) if result { - UtilityHooks.useHandlePostMessages(~complete=true, ~empty=true, ~paymentType="paypal") let (connectors, _) = paymentMethodListValue->PaymentUtils.getConnectors(Wallets(Paypal(Redirect))) let body = PaymentBody.paypalRedirectionBody(~connectors) diff --git a/src/Payments/PaypalSDK.res b/src/Payments/PaypalSDK.res index a3c05e954..e1bacd799 100644 --- a/src/Payments/PaypalSDK.res +++ b/src/Payments/PaypalSDK.res @@ -8,6 +8,7 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = let (loggerState, _setLoggerState) = Recoil.useRecoilState(RecoilAtoms.loggerAtom) let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered) let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue) + let (complete, setComplete) = React.useState(_ => false) let token = sessionObj.token let orderDetails = sessionObj.orderDetails->getOrderDetails(paymentType) @@ -51,6 +52,7 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = ) PaymentUtils.useStatesJson(setStatesJson) + UtilityHooks.useHandlePostMessages(~complete, ~empty=!complete, ~paymentType="paypal") let mountPaypalSDK = () => { let clientId = sessionObj.token @@ -84,6 +86,7 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = ~completeAuthorize, ~handleCloseLoader, ~areOneClickWalletsRendered, + ~setComplete, ) }) Window.body->Window.appendChild(paypalScript) diff --git a/src/Payments/PaypalSDKHelpers.res b/src/Payments/PaypalSDKHelpers.res index 661ed5358..4104e7aae 100644 --- a/src/Payments/PaypalSDKHelpers.res +++ b/src/Payments/PaypalSDKHelpers.res @@ -19,6 +19,7 @@ let loadPaypalSDK = ( ~areOneClickWalletsRendered: ( RecoilAtoms.areOneClickWalletsRendered => RecoilAtoms.areOneClickWalletsRendered ) => unit, + ~setComplete, ) => { loggerState.setLogInfo( ~value="Paypal SDK Button Clicked", @@ -30,9 +31,9 @@ let loadPaypalSDK = ( ->then(result => { let result = result->JSON.Decode.bool->Option.getOr(false) if result { - UtilityHooks.useHandlePostMessages(~complete=true, ~empty=true, ~paymentType="paypal") let paypalWrapper = GooglePayType.getElementById(Utils.document, "paypal-button") paypalWrapper.innerHTML = "" + setComplete(_ => true) paypal["Buttons"]({ style: buttonStyle, fundingSource: paypal["FUNDING"]["PAYPAL"], From 1834c469cbd8e1b0bb46b3d848d535d2fb2e7ce0 Mon Sep 17 00:00:00 2001 From: vsrivatsa-juspay Date: Thu, 4 Jul 2024 12:24:36 +0530 Subject: [PATCH 4/4] refactor: resolved review comments --- src/Payments/KlarnaSDK.res | 10 +++++++--- src/Payments/PaypalSDK.res | 10 +++++++--- src/Payments/PaypalSDKHelpers.res | 4 ++-- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/Payments/KlarnaSDK.res b/src/Payments/KlarnaSDK.res index 94a10ba35..9b0ed400d 100644 --- a/src/Payments/KlarnaSDK.res +++ b/src/Payments/KlarnaSDK.res @@ -18,7 +18,7 @@ let make = (~sessionObj: SessionsType.token) => { let {iframeId} = Recoil.useRecoilValueFromAtom(keys) let status = CommonHooks.useScript("https://x.klarnacdn.net/kp/lib/v1/api.js") // Klarna SDK script let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue) - let (complete, setComplete) = React.useState(_ => false) + let (isCompleted, setIsCompleted) = React.useState(_ => false) let setAreOneClickWalletsRendered = Recoil.useSetRecoilState(areOneClickWalletsRendered) let (stateJson, setStatesJson) = React.useState(_ => JSON.Encode.null) @@ -41,7 +41,11 @@ let make = (~sessionObj: SessionsType.token) => { PaymentUtils.useStatesJson(setStatesJson) - UtilityHooks.useHandlePostMessages(~complete, ~empty=!complete, ~paymentType="klarna") + UtilityHooks.useHandlePostMessages( + ~complete=isCompleted, + ~empty=!isCompleted, + ~paymentType="klarna", + ) React.useEffect(() => { if ( @@ -70,7 +74,7 @@ let make = (~sessionObj: SessionsType.token) => { ("param", "paymentloader"->JSON.Encode.string), ("iframeId", iframeId->JSON.Encode.string), ]) - setComplete(_ => true) + setIsCompleted(_ => true) authorize( {collect_shipping_address: componentName->getIsExpressCheckoutComponent}, Dict.make()->JSON.Encode.object, diff --git a/src/Payments/PaypalSDK.res b/src/Payments/PaypalSDK.res index e1bacd799..0855aef17 100644 --- a/src/Payments/PaypalSDK.res +++ b/src/Payments/PaypalSDK.res @@ -8,7 +8,7 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = let (loggerState, _setLoggerState) = Recoil.useRecoilState(RecoilAtoms.loggerAtom) let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered) let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue) - let (complete, setComplete) = React.useState(_ => false) + let (isCompleted, setIsCompleted) = React.useState(_ => false) let token = sessionObj.token let orderDetails = sessionObj.orderDetails->getOrderDetails(paymentType) @@ -52,7 +52,11 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = ) PaymentUtils.useStatesJson(setStatesJson) - UtilityHooks.useHandlePostMessages(~complete, ~empty=!complete, ~paymentType="paypal") + UtilityHooks.useHandlePostMessages( + ~complete=isCompleted, + ~empty=!isCompleted, + ~paymentType="paypal", + ) let mountPaypalSDK = () => { let clientId = sessionObj.token @@ -86,7 +90,7 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = ~completeAuthorize, ~handleCloseLoader, ~areOneClickWalletsRendered, - ~setComplete, + ~setIsCompleted, ) }) Window.body->Window.appendChild(paypalScript) diff --git a/src/Payments/PaypalSDKHelpers.res b/src/Payments/PaypalSDKHelpers.res index 4104e7aae..e09785c17 100644 --- a/src/Payments/PaypalSDKHelpers.res +++ b/src/Payments/PaypalSDKHelpers.res @@ -19,7 +19,7 @@ let loadPaypalSDK = ( ~areOneClickWalletsRendered: ( RecoilAtoms.areOneClickWalletsRendered => RecoilAtoms.areOneClickWalletsRendered ) => unit, - ~setComplete, + ~setIsCompleted, ) => { loggerState.setLogInfo( ~value="Paypal SDK Button Clicked", @@ -33,7 +33,7 @@ let loadPaypalSDK = ( if result { let paypalWrapper = GooglePayType.getElementById(Utils.document, "paypal-button") paypalWrapper.innerHTML = "" - setComplete(_ => true) + setIsCompleted(_ => true) paypal["Buttons"]({ style: buttonStyle, fundingSource: paypal["FUNDING"]["PAYPAL"],