Skip to content

Commit 87401ca

Browse files
Shivam25092001Shivam25092001
committed
Merge branch 'main' of https://github.com/juspay/hyperswitch-web into fix-phone-fields
2 parents a8676b7 + 3939ef6 commit 87401ca

49 files changed

Lines changed: 792 additions & 104 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎shared-code‎

‎src/CardCVCElement.res‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ open Utils
44
@react.component
55
let make = (~cvcProps: CardUtils.cvcProps, ~paymentType: CardThemeType.mode) => {
66
let {config, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
7+
let emitter = SubscriptionEventHooks.useSubscriptionEventEmitter()
78
let {innerLayout} = config.appearance
89
let keys = Recoil.useRecoilValueFromAtom(keys)
910
let customPodUri = Recoil.useRecoilValueFromAtom(customPodUri)
@@ -21,6 +22,7 @@ let make = (~cvcProps: CardUtils.cvcProps, ~paymentType: CardThemeType.mode) =>
2122
setCvcError,
2223
} = cvcProps
2324
let isCvcEmpty = cvcNumber === ""
25+
let isCvcComplete = cvcNumber->String.length >= 3
2426
let compressedLayoutStyleForCvcError =
2527
innerLayout === Compressed && cvcError->String.length > 0 ? "!border-l-0" : ""
2628

@@ -133,20 +135,25 @@ let make = (~cvcProps: CardUtils.cvcProps, ~paymentType: CardThemeType.mode) =>
133135
)
134136
}, (cvcNumber, keys, paymentType, loggerState, customPodUri, redirectionFlags, localeString))
135137

136-
React.useEffect0(() => {
137-
messageParentWindow([
138-
("ready", true->JSON.Encode.bool),
139-
("elementType", CardThemeType.getPaymentModeToString(paymentType)->JSON.Encode.string),
140-
])
138+
React.useEffect(() => {
139+
SubscriptionEventHooks.emitReady(
140+
~iframeId=keys.iframeId,
141+
~elementType=CardThemeType.getPaymentModeToString(paymentType),
142+
)
141143
None
142-
})
144+
}, (keys.iframeId, paymentType))
143145

144146
React.useEffect(() => {
145147
let cvcInfoDict = [("isCvcEmpty", isCvcEmpty->JSON.Encode.bool)]->Dict.fromArray
146148
Utils.messageParentWindow([("cvcInfo", cvcInfoDict->JSON.Encode.object)])
147149
None
148150
}, [isCvcEmpty])
149151

152+
React.useEffect(() => {
153+
emitter.emitCvcStatus(~iframeId=keys.iframeId, ~isCvcEmpty, ~isCvcComplete)
154+
None
155+
}, (isCvcEmpty, isCvcComplete, keys.iframeId))
156+
150157
<PaymentInputField
151158
fieldName=localeString.cvcTextLabel
152159
isValid=isCVCValid

‎src/Components/AccordionContainer.res‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,13 @@ let make = (
8484
~expiryProps,
8585
~cvcProps,
8686
)
87+
SubscriptionEventHooks.useEmitPaymentMethodStatus(
88+
~paymentMethodName=selectedOption,
89+
~paymentMethods=paymentMethodListValue.payment_methods,
90+
~isSavedPaymentMethod=false,
91+
~isOneClickWallet=false,
92+
)
93+
SubscriptionEventHooks.useEmitBillingAddress()
8794

8895
let cardOptionDetails =
8996
paymentOptions

‎src/Components/DropdownField.res‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,13 @@ let make = (
3939
let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
4040
let dropdownRef = React.useRef(Nullable.null)
4141
let (inputFocused, setInputFocused) = React.useState(_ => false)
42-
let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
42+
let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(keys)
4343
let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
44+
let elementType = PaymentTypeContext.usePaymentType()->CardThemeType.getPaymentModeToString
4445

4546
let handleFocus = _ => {
4647
setInputFocused(_ => true)
47-
Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
48+
Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
4849
}
4950

5051
let handleChange = ev => {

‎src/Components/Input.res‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ let make = (
2222
let options = Recoil.useRecoilValueFromAtom(elementOptions)
2323
let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
2424
let (_inputFocused, setInputFocused) = React.useState(_ => false)
25-
let {parentURL} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
25+
let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
26+
let elementType = PaymentTypeContext.usePaymentType()->CardThemeType.getPaymentModeToString
2627

2728
let setFocus = (val: bool) => {
2829
switch onFocus {
@@ -41,7 +42,7 @@ let make = (
4142
setFocus(true)
4243
setValid(None)
4344
setInputFocused(_ => true)
44-
Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
45+
Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
4546
}
4647

4748
let handleBlur = ev => {

‎src/Components/InputField.res‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ let make = (
3232
let options = Recoil.useRecoilValueFromAtom(elementOptions)
3333
let contextPaymentType = usePaymentType()
3434
let paymentType = paymentType->Option.getOr(contextPaymentType)
35+
let elementType = contextPaymentType->CardThemeType.getPaymentModeToString
3536

3637
let setFocus = (val: bool) => {
3738
switch onFocus {
@@ -69,7 +70,7 @@ let make = (
6970
}
7071
setFocus(true)
7172
setIsValid(_ => None)
72-
Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
73+
Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
7374
}
7475

7576
let handleBlur = ev => {
@@ -80,7 +81,7 @@ let make = (
8081
}
8182
setFocus(false)
8283
onBlur(ev)
83-
Utils.handleOnBlurPostMessage(~targetOrigin=parentURL)
84+
Utils.handleOnBlurPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
8485
}
8586
React.useEffect(() => {
8687
if value->String.length > 0 {

‎src/Components/LoaderPaymentShimmer.res‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ let make = () => {
44
let selectedOption = Recoil.useRecoilValueFromAtom(selectedOptionAtom)
55
let {redirectionInfo} = Recoil.useRecoilValueFromAtom(optionAtom)
66
UtilityHooks.useHandlePostMessages(~complete=false, ~empty=false, ~paymentType=selectedOption)
7+
SubscriptionEventHooks.useEmitFormStatus(~empty=false, ~complete=false)
78
<RenderIf condition={redirectionInfo === PaymentType.ShowRedirectionInfo}>
89
<PaymentShimmer />
910
</RenderIf>

‎src/Components/PaymentDropDownField.res‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ let make = (
1414
let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
1515
let dropdownRef = React.useRef(Nullable.null)
1616
let (inputFocused, setInputFocused) = React.useState(_ => false)
17-
let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
17+
let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(keys)
1818
let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
19+
let elementType = PaymentTypeContext.usePaymentType()->CardThemeType.getPaymentModeToString
1920

2021
let getClassName = initialLabel => {
2122
if value.value->String.length == 0 {
@@ -40,7 +41,7 @@ let make = (
4041
}, [options])
4142
let handleFocus = _ => {
4243
setInputFocused(_ => true)
43-
Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
44+
Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
4445
}
4546
let focusClass = if inputFocused || value.value->String.length > 0 {
4647
`mb-7 pb-1 pt-2 ${themeObj.fontSizeXs} transition-all ease-in duration-75`

‎src/Components/PaymentField.res‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@ let make = (
2828
let {config} = Recoil.useRecoilValueFromAtom(configAtom)
2929
let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
3030
let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
31-
let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
31+
let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(keys)
3232
let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
3333
let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
3434
let contextPaymentType = usePaymentType()
3535
let paymentType = paymentType->Option.getOr(contextPaymentType)
36+
let elementType = contextPaymentType->CardThemeType.getPaymentModeToString
3637

3738
let (inputFocused, setInputFocused) = React.useState(_ => false)
3839

@@ -47,7 +48,7 @@ let make = (
4748
})
4849
| None => ()
4950
}
50-
Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
51+
Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
5152
}
5253

5354
let handleBlur = ev => {
@@ -57,7 +58,7 @@ let make = (
5758
| Some(fn) => fn(ev)
5859
| None => ()
5960
}
60-
Utils.handleOnBlurPostMessage(~targetOrigin=parentURL)
61+
Utils.handleOnBlurPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
6162
}
6263

6364
let backgroundClass = switch paymentType {

‎src/Components/PaymentInputField.res‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@ let make = (
2929
let {themeObj, config} = Recoil.useRecoilValueFromAtom(configAtom)
3030
let {innerLayout} = config.appearance
3131
let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
32-
let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
32+
let {parentURL, iframeId} = Recoil.useRecoilValueFromAtom(keys)
3333
let contextPaymentType = usePaymentType()
3434
let paymentType = paymentType->Option.getOr(contextPaymentType)
35+
let elementType = contextPaymentType->CardThemeType.getPaymentModeToString
3536

3637
let (inputFocused, setInputFocused) = React.useState(_ => false)
3738

@@ -45,7 +46,8 @@ let make = (
4546
| Some(fn) => fn(ev)
4647
| None => ()
4748
}
48-
Utils.handleOnFocusPostMessage(~targetOrigin=parentURL)
49+
50+
Utils.handleOnFocusPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
4951
}
5052

5153
let handleBlur = ev => {
@@ -55,7 +57,7 @@ let make = (
5557
| Some(fn) => fn(ev)
5658
| None => ()
5759
}
58-
Utils.handleOnBlurPostMessage(~targetOrigin=parentURL)
60+
Utils.handleOnBlurPostMessage(~iframeId, ~elementType, ~targetOrigin=parentURL)
5961
}
6062

6163
let backgroundClass = switch paymentType {

0 commit comments

Comments
 (0)