feat: add subscription events

src/CardCVCElement.res

@@ -4,6 +4,8 @@ open Utils
 @react.component
 let make = (~cvcProps: CardUtils.cvcProps, ~paymentType: CardThemeType.mode) => {
   let {config, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {emitCvcInfo} = SubscriptionEventHooks.useLegacyEvents()
+  let emitter = SubscriptionEventHooks.useSubscriptionEventEmitter()
   let {innerLayout} = config.appearance
   let keys = Recoil.useRecoilValueFromAtom(keys)
   let customPodUri = Recoil.useRecoilValueFromAtom(customPodUri)
@@ -21,6 +23,7 @@ let make = (~cvcProps: CardUtils.cvcProps, ~paymentType: CardThemeType.mode) =>
     setCvcError,
   } = cvcProps
   let isCvcEmpty = cvcNumber === ""
+  let isCvcComplete = cvcNumber->String.length >= 3
   let compressedLayoutStyleForCvcError =
     innerLayout === Compressed && cvcError->String.length > 0 ? "!border-l-0" : ""
 
@@ -133,19 +136,19 @@ let make = (~cvcProps: CardUtils.cvcProps, ~paymentType: CardThemeType.mode) =>
     )
   }, (cvcNumber, keys, paymentType, loggerState, customPodUri, redirectionFlags, localeString))
 
-  React.useEffect0(() => {
-    messageParentWindow([
-      ("ready", true->JSON.Encode.bool),
-      ("elementType", CardThemeType.getPaymentModeToString(paymentType)->JSON.Encode.string),
-    ])
+  React.useEffect(() => {
+    SubscriptionEventHooks.emitReady(
+      ~iframeId=keys.iframeId,
+      ~elementType=CardThemeType.getPaymentModeToString(paymentType),
+    )
     None
-  })
+  }, (keys.iframeId, paymentType))
 
   React.useEffect(() => {
-    let cvcInfoDict = [("isCvcEmpty", isCvcEmpty->JSON.Encode.bool)]->Dict.fromArray
-    Utils.messageParentWindow([("cvcInfo", cvcInfoDict->JSON.Encode.object)])
+    emitCvcInfo(~isCvcEmpty)
+    emitter.emitCvcStatus(~iframeId=keys.iframeId, ~isCvcEmpty, ~isCvcComplete)
     None
-  }, [isCvcEmpty])
+  }, (isCvcEmpty, isCvcComplete, keys.iframeId))
 
   <PaymentInputField
     fieldName=localeString.cvcTextLabel

src/Components/AccordionContainer.res

@@ -71,6 +71,7 @@ let make = (
   let (showMore, setShowMore) = React.useState(_ => false)
   let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+  let {isLegacy} = SubscriptionEventHooks.useLegacyEvents()
   let {
     displayInSeparateScreen,
     groupByPaymentMethods,
@@ -83,7 +84,15 @@ let make = (
     ~cardProps,
     ~expiryProps,
     ~cvcProps,
+    ~isLegacy,
   )
+  SubscriptionEventHooks.usePaymentMethodStatus(
+    ~paymentMethodName=selectedOption,
+    ~paymentMethods=paymentMethodListValue.payment_methods,
+    ~isSavedPaymentMethod=false,
+    ~isOneClickWallet=false,
+  )
+  SubscriptionEventHooks.useBillingAddress()
 
   let cardOptionDetails =
     paymentOptions

src/Components/DropdownField.res

@@ -39,12 +39,13 @@ let make = (
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let dropdownRef = React.useRef(Nullable.null)
   let (inputFocused, setInputFocused) = React.useState(_ => false)
-  let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
+  let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
+  let elementType = PaymentTypeContext.usePaymentType()->CardThemeType.getPaymentModeToString
 
   let handleFocus = _ => {
     setInputFocused(_ => true)
-    Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
+    Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
 
   let handleChange = ev => {

src/Components/Input.res

@@ -22,7 +22,8 @@ let make = (
   let options = Recoil.useRecoilValueFromAtom(elementOptions)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let (_inputFocused, setInputFocused) = React.useState(_ => false)
-  let {parentURL} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
+  let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
+  let elementType = PaymentTypeContext.usePaymentType()->CardThemeType.getPaymentModeToString
 
   let setFocus = (val: bool) => {
     switch onFocus {
@@ -41,7 +42,7 @@ let make = (
     setFocus(true)
     setValid(None)
     setInputFocused(_ => true)
-    Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
+    Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
 
   let handleBlur = ev => {

src/Components/InputField.res

@@ -32,6 +32,7 @@ let make = (
   let options = Recoil.useRecoilValueFromAtom(elementOptions)
   let contextPaymentType = usePaymentType()
   let paymentType = paymentType->Option.getOr(contextPaymentType)
+  let elementType = contextPaymentType->CardThemeType.getPaymentModeToString
 
   let setFocus = (val: bool) => {
     switch onFocus {
@@ -69,7 +70,7 @@ let make = (
     }
     setFocus(true)
     setIsValid(_ => None)
-    Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
+    Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
 
   let handleBlur = ev => {
@@ -80,7 +81,7 @@ let make = (
     }
     setFocus(false)
     onBlur(ev)
-    Utils.handleOnBlurPostMessage(~targetOrigin=parentURL)
+    Utils.handleOnBlurPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
   React.useEffect(() => {
     if value->String.length > 0 {

src/Components/LoaderPaymentShimmer.res

@@ -4,6 +4,7 @@ let make = () => {
   let selectedOption = Recoil.useRecoilValueFromAtom(selectedOptionAtom)
   let {redirectionInfo} = Recoil.useRecoilValueFromAtom(optionAtom)
   UtilityHooks.useHandlePostMessages(~complete=false, ~empty=false, ~paymentType=selectedOption)
+  SubscriptionEventHooks.useFormStatus(~empty=false, ~complete=false)
   <RenderIf condition={redirectionInfo === PaymentType.ShowRedirectionInfo}>
     <PaymentShimmer />
   </RenderIf>

src/Components/PaymentDropDownField.res

@@ -14,8 +14,9 @@ let make = (
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let dropdownRef = React.useRef(Nullable.null)
   let (inputFocused, setInputFocused) = React.useState(_ => false)
-  let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
+  let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
+  let elementType = PaymentTypeContext.usePaymentType()->CardThemeType.getPaymentModeToString
 
   let getClassName = initialLabel => {
     if value.value->String.length == 0 {
@@ -40,7 +41,7 @@ let make = (
   }, [options])
   let handleFocus = _ => {
     setInputFocused(_ => true)
-    Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
+    Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
   let focusClass = if inputFocused || value.value->String.length > 0 {
     `mb-7 pb-1 pt-2 ${themeObj.fontSizeXs} transition-all ease-in duration-75`

src/Components/PaymentField.res

@@ -28,11 +28,12 @@ let make = (
   let {config} = Recoil.useRecoilValueFromAtom(configAtom)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
-  let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
+  let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
   let contextPaymentType = usePaymentType()
   let paymentType = paymentType->Option.getOr(contextPaymentType)
+  let elementType = contextPaymentType->CardThemeType.getPaymentModeToString
 
   let (inputFocused, setInputFocused) = React.useState(_ => false)
 
@@ -47,7 +48,7 @@ let make = (
       })
     | None => ()
     }
-    Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
+    Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
 
   let handleBlur = ev => {
@@ -57,7 +58,7 @@ let make = (
     | Some(fn) => fn(ev)
     | None => ()
     }
-    Utils.handleOnBlurPostMessage(~targetOrigin=parentURL)
+    Utils.handleOnBlurPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
 
   let backgroundClass = switch paymentType {

src/Components/PaymentInputField.res

@@ -29,9 +29,10 @@ let make = (
   let {themeObj, config} = Recoil.useRecoilValueFromAtom(configAtom)
   let {innerLayout} = config.appearance
   let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
-  let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
+  let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let contextPaymentType = usePaymentType()
   let paymentType = paymentType->Option.getOr(contextPaymentType)
+  let elementType = contextPaymentType->CardThemeType.getPaymentModeToString
 
   let (inputFocused, setInputFocused) = React.useState(_ => false)
 
@@ -45,7 +46,8 @@ let make = (
     | Some(fn) => fn(ev)
     | None => ()
     }
-    Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
+
+    Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
 
   let handleBlur = ev => {
@@ -55,7 +57,7 @@ let make = (
     | Some(fn) => fn(ev)
     | None => ()
     }
-    Utils.handleOnBlurPostMessage(~targetOrigin=parentURL)
+    Utils.handleOnBlurPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
   }
 
   let backgroundClass = switch paymentType {

src/Components/SavedCardItem.res

@@ -109,49 +109,69 @@ let make = (
   | None => "debit"
   }
   let {country, state, pinCode} = PaymentUtils.useNonPiiAddressData()
+  let emitter = SubscriptionEventHooks.useSubscriptionEventEmitter()
+  let {
+    emitIsFormReadyForSubmission,
+    emitExpiryDate,
+    isLegacy,
+    emitPaymentMethodInfo,
+  } = SubscriptionEventHooks.useLegacyEvents()
 
   React.useEffect(() => {
     setSelectedInstallmentPlan(_ => None)
     setShowInstallments(_ => false)
     None
   }, [paymentItem])
 
+  let isOneClickWallet = paymentItem.paymentMethod === "wallet"
+
   React.useEffect(() => {
     if isActive {
-      PaymentUtils.emitPaymentMethodInfo(
+      if isLegacy {
+        emitPaymentMethodInfo(
+          ~paymentMethod=paymentItem.paymentMethod,
+          ~paymentMethodType,
+          ~cardBrand=paymentItem.card.scheme->Option.getOr("")->CardUtils.getCardType,
+          ~country,
+          ~state,
+          ~pinCode,
+          ~cardExpiryMonth=expiryMonth,
+          ~cardExpiryYear=expiryYear,
+          ~cardLast4,
+          ~cardBin,
+          ~isSavedPaymentMethod=true,
+          ~isCvcEmpty,
+        )
+      }
+      emitter.emitPaymentMethodStatus(
         ~paymentMethod=paymentItem.paymentMethod,
         ~paymentMethodType,
-        ~cardBrand=paymentItem.card.scheme->Option.getOr("")->CardUtils.getCardType,
-        ~country,
-        ~state,
-        ~pinCode,
-        ~cardExpiryMonth=expiryMonth,
-        ~cardExpiryYear=expiryYear,
-        ~cardLast4,
-        ~cardBin,
         ~isSavedPaymentMethod=true,
-        ~isCvcEmpty,
+        ~isOneClickWallet,
       )
+      emitter.emitBillingAddress(~country, ~state, ~postalCode=pinCode)
     }
     None
   }, (isActive, paymentItem, country, state, pinCode, isCvcEmpty))
 
   React.useEffect(() => {
-    open CardUtils
     if isActive {
       // * Focus CVC
       focusCVC()
+
       // * Sending card expiry to handle cases where the card expires before the use date.
-      `${expiryMonth}${String.substring(~start=2, ~end=4, expiryYear)}`
-      ->CardValidations.formatCardExpiryNumber
-      ->emitExpiryDate
+      if isLegacy {
+        `${expiryMonth}${String.substring(~start=2, ~end=4, expiryYear)}`
+        ->CardValidations.formatCardExpiryNumber
+        ->emitExpiryDate
+      }
     }
     None
   }, (isActive, paymentItem, country, state, pinCode))
 
   React.useEffect(() => {
     // TODO - Handle Events for VGS/Vault case
-    CardUtils.emitIsFormReadyForSubmission(isCVCValid->Option.getOr(false))
+    emitIsFormReadyForSubmission(isCVCValid->Option.getOr(false))
     None
   }, [isCVCValid])
 

src/Components/SavedMethods.res

@@ -285,6 +285,25 @@ let make = (
     customerMethod.paymentMethodType->Option.getOr(customerMethod.paymentMethod)
 
   useHandlePostMessages(~complete, ~empty, ~paymentType=paymentMethodType, ~savedMethod=true)
+  SubscriptionEventHooks.useFormStatus(~empty, ~complete)
+  SubscriptionEventHooks.useSurcharge(~surchargeDetails=eligibilitySurchargeDetails)
+  let emitter = SubscriptionEventHooks.useSubscriptionEventEmitter()
+
+  React.useEffect(() => {
+    if isCardPaymentMethod {
+      let card = customerMethod.card
+      let cardInfo = PaymentEventData.buildCardInfoFromSavedCard(
+        ~bin=card.cardBin,
+        ~last4=card.last4Digits,
+        ~brand=card.scheme->Option.getOr(""),
+        ~expiryMonth=card.expiryMonth,
+        ~expiryYear=card.expiryYear,
+        ~isCvcComplete=complete,
+      )
+      emitter.emitCardInfo(~cardInfo)
+    }
+    None
+  }, (customerMethod, isCardPaymentMethod, complete))
 
   GooglePayHelpers.useHandleGooglePayResponse(
     ~connectors=[],

src/Components/SavedMethodsV2.res

@@ -15,6 +15,7 @@ let make = (~cvcProps: CardUtils.cvcProps) => {
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let updateCard = PaymentHelpersV2.useUpdateCard(Some(loggerState), Card)
   let {iframeId, sdkAuthorization} = keys
+  let elementType = PaymentTypeContext.usePaymentType()->CardThemeType.getPaymentModeToString
   let {isCVCValid, cvcNumber, setCvcError} = cvcProps
   let complete = isCVCValid->Option.getOr(false) && paymentTokenAtom.paymentToken !== ""
   let isEmpty = cvcNumber == ""
@@ -120,7 +121,7 @@ let make = (~cvcProps: CardUtils.cvcProps) => {
   }
 
   React.useEffect(() => {
-    messageParentWindow([("ready", true->JSON.Encode.bool)])
+    SubscriptionEventHooks.emitReady(~iframeId, ~elementType)
     None
   }, [])
 

src/Hooks/CommonCardProps.res

@@ -4,6 +4,7 @@ open RecoilAtoms
 
 let useCardForm = (~logger, ~paymentType) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {emitExpiryDate, isLegacy} = SubscriptionEventHooks.useLegacyEvents()
   let cardScheme = Recoil.useRecoilValueFromAtom(cardBrand)
   let showPaymentMethodsScreen = Recoil.useRecoilValueFromAtom(showPaymentMethodsScreen)
   let selectedOption = Recoil.useRecoilValueFromAtom(selectedOptionAtom)
@@ -209,7 +210,9 @@ let useCardForm = (~logger, ~paymentType) => {
     let formattedExpiry = val->CardValidations.formatCardExpiryNumber
     if isExipryValid(formattedExpiry) {
       handleInputFocus(~currentRef=expiryRef, ~destinationRef=cvcRef)
-      emitExpiryDate(formattedExpiry)
+      if isLegacy {
+        emitExpiryDate(formattedExpiry)
+      }
     }
     setExpiryValid(formattedExpiry, setIsExpiryValid)
     setCardExpiry(_ => formattedExpiry)