Skip to content

Commit 656a1b5

Browse files
sakksham7sakksham7
committed
feat: added show more option and changed prop format
1 parent 13253ad commit 656a1b5

File tree

5 files changed

+120
-44
lines changed

5 files changed

+120
-44
lines changed

‎src/Components/SavedMethods.res‎

Lines changed: 52 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,12 @@ let make = (
3737
loggerState.setLogError(~value=message, ~eventName=INVALID_FORMAT)
3838
}
3939
let (isSaveCardsChecked, setIsSaveCardsChecked) = React.useState(_ => false)
40-
let {
41-
displaySavedPaymentMethodsCheckbox,
42-
readOnly,
43-
enableUnifiedView,
44-
} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
40+
let (showMore, setShowMore) = React.useState(_ => true)
41+
let {displaySavedPaymentMethodsCheckbox, readOnly, layout} = Recoil.useRecoilValueFromAtom(
42+
RecoilAtoms.optionAtom,
43+
)
44+
let layoutClass = CardUtils.getLayoutClass(layout)
45+
let isMergedSavedMethodsList = layoutClass.mergeSavedMethods.isMergedSavedMethodsList
4546
let isGuestCustomer = useIsGuestCustomer()
4647

4748
let {iframeId, clientSecret} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
@@ -68,24 +69,43 @@ let make = (
6869
let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
6970
let {paymentToken: paymentTokenVal, customerId} = paymentToken
7071

72+
let (cardOptionDetails, dropDownOptionsDetails) = React.useMemo(() => {
73+
(
74+
savedMethods->Array.slice(~start=0, ~end=layoutClass.mergeSavedMethods.maxSavedItems),
75+
savedMethods->Array.sliceToEnd(~start=layoutClass.mergeSavedMethods.maxSavedItems),
76+
)
77+
}, [savedMethods])
78+
79+
let renderSavedCards = (cardsArr: array<PaymentType.customerMethods>) => {
80+
cardsArr
81+
->Array.mapWithIndex((obj, i) =>
82+
<SavedCardItem
83+
key={i->Int.toString}
84+
setPaymentToken
85+
isActive={paymentTokenVal == obj.paymentToken}
86+
paymentItem=obj
87+
brandIcon={obj->getPaymentMethodBrand}
88+
index=i
89+
savedCardlength
90+
cvcProps
91+
setRequiredFieldsBody
92+
/>
93+
)
94+
->React.array
95+
}
96+
97+
let mergedViewBottomElement = {
98+
<div
99+
className="PickerItemContainer" tabIndex={0} role="region" ariaLabel="Saved payment methods">
100+
{renderSavedCards(cardOptionDetails)}
101+
<RenderIf condition={!showMore}> {renderSavedCards(dropDownOptionsDetails)} </RenderIf>
102+
</div>
103+
}
104+
71105
let bottomElement = {
72106
<div
73107
className="PickerItemContainer" tabIndex={0} role="region" ariaLabel="Saved payment methods">
74-
{savedMethods
75-
->Array.mapWithIndex((obj, i) =>
76-
<SavedCardItem
77-
key={i->Int.toString}
78-
setPaymentToken
79-
isActive={paymentTokenVal == obj.paymentToken}
80-
paymentItem=obj
81-
brandIcon={obj->getPaymentMethodBrand}
82-
index=i
83-
savedCardlength
84-
cvcProps
85-
setRequiredFieldsBody
86-
/>
87-
)
88-
->React.array}
108+
<RenderIf condition={!isMergedSavedMethodsList}> {renderSavedCards(savedMethods)} </RenderIf>
89109
<RenderIf condition={clickToPayConfig.isReady == Some(true)}>
90110
<ClickToPayAuthenticate
91111
loggerState
@@ -339,15 +359,21 @@ let make = (
339359
savedCardlength === 0 &&
340360
!showPaymentMethodsScreen &&
341361
(loadSavedCards === PaymentType.LoadingSavedCards || clickToPayConfig.isReady->Option.isNone) &&
342-
!enableUnifiedView
343-
}, (savedCardlength, loadSavedCards, showPaymentMethodsScreen, clickToPayConfig.isReady))
362+
!isMergedSavedMethodsList
363+
}, (
364+
savedCardlength,
365+
loadSavedCards,
366+
showPaymentMethodsScreen,
367+
clickToPayConfig.isReady,
368+
isMergedSavedMethodsList,
369+
))
344370

345371
<div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">
346372
{if enableSavedPaymentShimmer {
347373
<PaymentElementShimmer.SavedPaymentCardShimmer />
348374
} else {
349-
<RenderIf condition={!showPaymentMethodsScreen || enableUnifiedView}>
350-
{bottomElement}
375+
<RenderIf condition={!showPaymentMethodsScreen}>
376+
{isMergedSavedMethodsList ? mergedViewBottomElement : bottomElement}
351377
</RenderIf>
352378
}}
353379
<RenderIf condition={conditionsForShowingSaveCardCheckbox}>
@@ -365,7 +391,7 @@ let make = (
365391
}
366392
/>
367393
</RenderIf>
368-
<RenderIf condition={!enableSavedPaymentShimmer && !enableUnifiedView}>
394+
<RenderIf condition={!enableSavedPaymentShimmer && !isMergedSavedMethodsList}>
369395
<div
370396
className="Label flex flex-row gap-3 items-end cursor-pointer mt-4"
371397
style={
@@ -391,5 +417,6 @@ let make = (
391417
{React.string(localeString.morePaymentMethods)}
392418
</div>
393419
</RenderIf>
420+
<ShowToggle isMergedSavedMethodsList dropDownOptionsDetails showMore setShowMore />
394421
</div>
395422
}

‎src/Components/ShowToggle.res‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@react.component
2+
let make = (~isMergedSavedMethodsList, ~dropDownOptionsDetails, ~showMore, ~setShowMore) => {
3+
let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
4+
5+
<RenderIf condition={isMergedSavedMethodsList && dropDownOptionsDetails->Array.length > 0}>
6+
<div
7+
className="Label flex flex-row gap-1 items-end cursor-pointer mt-3"
8+
style={
9+
fontSize: "14px",
10+
float: "left",
11+
fontWeight: "500",
12+
width: "fit-content",
13+
color: themeObj.colorPrimary,
14+
}
15+
onClick={_ => {
16+
setShowMore(_ => !showMore)
17+
}}>
18+
{showMore ? React.string("Show more") : React.string("Show Less")}
19+
<div className="m-1">
20+
{showMore ? <Icon name="arrow-down" size=10 /> : <Icon name="arrow-up" size=10 />}
21+
</div>
22+
</div>
23+
</RenderIf>
24+
}

‎src/PaymentElement.res‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
1414

1515
let {
1616
paymentMethodOrder,
17-
enableUnifiedView,
1817
layout,
1918
customerPaymentMethods,
2019
displaySavedPaymentMethods,
@@ -61,6 +60,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
6160
}, (clickToPayConfig, isClickToPayAuthenticateError))
6261

6362
let layoutClass = CardUtils.getLayoutClass(layout)
63+
let isMergedSavedMethodsList = layoutClass.mergeSavedMethods.isMergedSavedMethodsList
6464

6565
let (getVisaCards, closeComponentIfSavedMethodsAreEmpty) = ClickToPayHook.useClickToPay(
6666
~areClickToPayUIScriptsLoaded,
@@ -279,9 +279,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
279279
}, [selectedOption])
280280
useSubmitPaymentData(submitCallback)
281281
React.useEffect(() => {
282-
if enableUnifiedView && selectedOption == "saved_methods" {
282+
if isMergedSavedMethodsList && selectedOption == "saved_methods" {
283283
setShowPaymentMethodsScreen(_ => false)
284-
} else if enableUnifiedView {
284+
} else if isMergedSavedMethodsList {
285285
setShowPaymentMethodsScreen(_ => true)
286286
}
287287
setSelectedOption(prev =>
@@ -478,7 +478,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
478478
<RenderIf
479479
condition={!showPaymentMethodsScreen &&
480480
(displaySavedPaymentMethods || isShowPaymentMethodsDependingOnClickToPay) &&
481-
!optionAtomValue.enableUnifiedView}>
481+
!isMergedSavedMethodsList}>
482482
<SavedMethods
483483
paymentToken
484484
setPaymentToken
@@ -495,7 +495,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
495495
}}
496496
<RenderIf
497497
condition={(paymentOptions->Array.length > 0 || walletOptions->Array.length > 0) &&
498-
(showPaymentMethodsScreen || optionAtomValue.enableUnifiedView) &&
498+
(showPaymentMethodsScreen || isMergedSavedMethodsList) &&
499499
clickToPayConfig.isReady->Option.isSome}>
500500
<div
501501
className="flex flex-col place-items-center"
@@ -532,7 +532,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
532532
condition={((displaySavedPaymentMethods && savedMethods->Array.length > 0) ||
533533
isShowPaymentMethodsDependingOnClickToPay) &&
534534
showPaymentMethodsScreen &&
535-
!optionAtomValue.enableUnifiedView}>
535+
!isMergedSavedMethodsList}>
536536
<div
537537
className="Label flex flex-row gap-3 items-end cursor-pointer mt-4"
538538
style={
@@ -565,7 +565,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
565565
| _ =>
566566
<RenderIf
567567
condition={(!displaySavedPaymentMethods ||
568-
(optionAtomValue.enableUnifiedView && savedMethods->Array.length == 0)) &&
568+
(isMergedSavedMethodsList && savedMethods->Array.length == 0)) &&
569569
paymentOptions->Array.length == 0 &&
570570
walletOptions->Array.length == 0}>
571571
<PaymentElementShimmer />

‎src/Types/PaymentType.res‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -103,11 +103,16 @@ type wallets = {
103103
style: style,
104104
}
105105
type business = {name: string}
106+
type mergeSavedMethods = {
107+
maxSavedItems: int,
108+
isMergedSavedMethodsList: bool,
109+
}
106110
type layoutConfig = {
107111
defaultCollapsed: bool,
108112
radios: bool,
109113
spacedAccordionItems: bool,
110114
maxAccordionItems: int,
115+
mergeSavedMethods: mergeSavedMethods,
111116
\"type": layout,
112117
}
113118

@@ -202,7 +207,6 @@ type options = {
202207
displayBillingDetails: bool,
203208
customMessageForCardTerms: string,
204209
showShortSurchargeMessage: bool,
205-
enableUnifiedView: bool,
206210
}
207211

208212
type payerDetails = {
@@ -250,11 +254,16 @@ let defaultCustomerMethods = {
250254
recurringEnabled: false,
251255
billing: defaultDisplayBillingDetails,
252256
}
257+
let defaultMergeSavedMethods = {
258+
maxSavedItems: 2,
259+
isMergedSavedMethodsList: false,
260+
}
253261
let defaultLayout = {
254262
defaultCollapsed: false,
255263
radios: false,
256264
spacedAccordionItems: false,
257265
maxAccordionItems: 4,
266+
mergeSavedMethods: defaultMergeSavedMethods,
258267
\"type": Tabs,
259268
}
260269
let defaultAddress: address = {
@@ -374,7 +383,6 @@ let defaultOptions = {
374383
displayBillingDetails: false,
375384
customMessageForCardTerms: "",
376385
showShortSurchargeMessage: false,
377-
enableUnifiedView: false,
378386
}
379387

380388
let getLayout = str => {
@@ -661,14 +669,33 @@ let getFields: (Dict.t<JSON.t>, string, 'a) => fields = (dict, str, logger) => {
661669
})
662670
->Option.getOr(defaultFields)
663671
}
672+
let getMergedViewValues = (json, logger) => {
673+
let dict = json->Utils.getDictFromDict("mergeSavedMethods")
674+
unknownKeysWarning(
675+
["maxSavedItems", "isMergedSavedMethodsList"],
676+
dict,
677+
"options.layout.mergedSavedMethods",
678+
)
679+
{
680+
maxSavedItems: getNumberWithWarning(dict, "maxSavedItems", 2, ~logger),
681+
isMergedSavedMethodsList: getBoolWithWarning(dict, "isMergedSavedMethodsList", false, ~logger),
682+
}
683+
}
664684
let getLayoutValues = (val, logger) => {
665685
switch val->JSON.Classify.classify {
666686
| String(str) => StringLayout(str->getLayout)
667687
| Object(json) =>
668688
ObjectLayout({
669689
let layoutType = getWarningString(json, "type", "tabs", ~logger)
670690
unknownKeysWarning(
671-
["defaultCollapsed", "radios", "spacedAccordionItems", "type", "maxAccordionItems"],
691+
[
692+
"defaultCollapsed",
693+
"radios",
694+
"spacedAccordionItems",
695+
"type",
696+
"maxAccordionItems",
697+
"mergeSavedMethods",
698+
],
672699
json,
673700
"options.layout",
674701
)
@@ -677,6 +704,7 @@ let getLayoutValues = (val, logger) => {
677704
radios: getBoolWithWarning(json, "radios", false, ~logger),
678705
spacedAccordionItems: getBoolWithWarning(json, "spacedAccordionItems", false, ~logger),
679706
maxAccordionItems: getNumberWithWarning(json, "maxAccordionItems", 4, ~logger),
707+
mergeSavedMethods: getMergedViewValues(json, logger),
680708
\"type": layoutType->getLayout,
681709
}
682710
})
@@ -1066,7 +1094,6 @@ let itemToObjMapper = (dict, logger) => {
10661094
"displayBillingDetails",
10671095
"customMessageForCardTerms",
10681096
"showShortSurchargeMessage",
1069-
"enableUnifiedView",
10701097
],
10711098
dict,
10721099
"options",
@@ -1112,7 +1139,6 @@ let itemToObjMapper = (dict, logger) => {
11121139
displayBillingDetails: getBool(dict, "displayBillingDetails", false),
11131140
customMessageForCardTerms: getString(dict, "customMessageForCardTerms", ""),
11141141
showShortSurchargeMessage: getBool(dict, "showShortSurchargeMessage", false),
1115-
enableUnifiedView: getBool(dict, "enableUnifiedView", false),
11161142
}
11171143
}
11181144

‎src/Utilities/PaymentUtils.res‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,9 @@ let useGetPaymentMethodList = (~paymentOptions, ~paymentType, ~sessions) => {
396396
~paymentMethodListValue,
397397
)
398398

399+
let layoutClass = CardUtils.getLayoutClass(optionAtomValue.layout)
400+
let isMergedSavedMethodsList = layoutClass.mergeSavedMethods.isMergedSavedMethodsList
401+
399402
let processPaymentsList = (
400403
~paymentList,
401404
~savedPaymentMethods: option<array<PaymentType.customerMethods>>,
@@ -433,7 +436,7 @@ let useGetPaymentMethodList = (~paymentOptions, ~paymentType, ~sessions) => {
433436
}
434437

435438
let showSavedPaymentMethodsTab =
436-
optionAtomValue.enableUnifiedView &&
439+
isMergedSavedMethodsList &&
437440
filteredSaved->Array.length != 0 &&
438441
optionAtomValue.displaySavedPaymentMethods
439442

@@ -481,11 +484,7 @@ let useGetPaymentMethodList = (~paymentOptions, ~paymentType, ~sessions) => {
481484
}
482485

483486
React.useMemo(() => {
484-
switch (
485-
methodslist,
486-
optionAtomValue.customerPaymentMethods,
487-
optionAtomValue.enableUnifiedView,
488-
) {
487+
switch (methodslist, optionAtomValue.customerPaymentMethods, isMergedSavedMethodsList) {
489488
| (Loaded(paymentlist), _, false)
490489
| (Loaded(paymentlist), NoResult(_), _) =>
491490
processPaymentsList(~paymentList=paymentlist, ~savedPaymentMethods=None)
@@ -508,7 +507,7 @@ let useGetPaymentMethodList = (~paymentOptions, ~paymentType, ~sessions) => {
508507
isGooglePayReady,
509508
optionAtomValue.customerPaymentMethods,
510509
optionAtomValue.displaySavedPaymentMethods,
511-
optionAtomValue.enableUnifiedView,
510+
isMergedSavedMethodsList,
512511
))
513512
}
514513

0 commit comments

Comments
 (0)