Skip to content

Commit

Permalink
feat: hideExpiredPaymentMethods prop added (#350)
Browse files Browse the repository at this point in the history
  • Loading branch information
Pritish Budhiraja authored May 6, 2024
1 parent 94efe36 commit f2a8c42
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 121 deletions.
245 changes: 124 additions & 121 deletions src/Components/SavedCardItem.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ let make = (
~setRequiredFieldsBody,
) => {
let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
let {hideExpiredPaymentMethods} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
let (cardBrand, setCardBrand) = Recoil.useRecoilState(RecoilAtoms.cardBrand)
let (
isCVCValid,
Expand Down Expand Up @@ -48,8 +49,10 @@ let make = (

let isCard = paymentItem.paymentMethod === "card"
let isRenderCvv = isCard && paymentItem.requiresCvv
let expiryMonth = paymentItem.card.expiryMonth
let expiryYear = paymentItem.card.expiryYear

let expiryDate = Date.fromString(`${paymentItem.card.expiryYear}-${paymentItem.card.expiryMonth}`)
let expiryDate = Date.fromString(`${expiryYear}-${expiryMonth}`)
expiryDate->Date.setMonth(expiryDate->Date.getMonth + 1)
let currentDate = Date.make()
let isCardExpired = isCard && expiryDate < currentDate
Expand All @@ -59,135 +62,135 @@ let make = (
| None => "debit"
}

<button
className={`PickerItem ${pickerItemClass} flex flex-row items-stretch`}
type_="button"
style={ReactDOMStyle.make(
~minWidth="150px",
~width="100%",
~padding="1rem 0 1rem 0",
~cursor="pointer",
~borderBottom=index == savedCardlength - 1 ? "0px" : `1px solid ${themeObj.borderColor}`,
~borderTop="none",
~borderLeft="none",
~borderRight="none",
~borderRadius="0px",
~background="transparent",
~color=themeObj.colorTextSecondary,
~boxShadow="none",
~opacity={isCardExpired ? "0.7" : "1"},
(),
)}
onClick={_ => setPaymentToken(_ => (paymentItem.paymentToken, paymentItem.customerId))}>
<div className="w-full">
<div>
<div className="flex flex-row justify-between items-center">
<div
className={`flex flex-row justify-center items-center`}
style={ReactDOMStyle.make(~columnGap=themeObj.spacingUnit, ())}>
<div style={ReactDOMStyle.make(~color=isActive ? themeObj.colorPrimary : "", ())}>
<Radio
checked=isActive
height="18px"
className="savedcard"
marginTop="-2px"
opacity="20%"
padding="46%"
border="1px solid currentColor"
/>
</div>
<div className={`PickerItemIcon mx-3 flex items-center `}> brandIcon </div>
<div className="flex flex-col">
<div className="flex items-center gap-4">
{isCard
? <div className="flex flex-col items-start">
<div> {React.string(paymentItem.card.nickname)} </div>
<div className={`PickerItemLabel flex flex-row gap-3 items-center`}>
<div className="tracking-widest"> {React.string(`****`)} </div>
<div> {React.string(paymentItem.card.last4Digits)} </div>
</div>
</div>
: <div> {React.string(paymentMethodType->Utils.snakeToTitleCase)} </div>}
<RenderIf condition={paymentItem.defaultPaymentMethodSet}>
<Icon
size=18
name="checkmark"
style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ())}
/>
</RenderIf>
</div>
</div>
</div>
<RenderIf condition={isCard}>
<RenderIf condition={!hideExpiredPaymentMethods || !isCardExpired}>
<button
className={`PickerItem ${pickerItemClass} flex flex-row items-stretch`}
type_="button"
style={ReactDOMStyle.make(
~minWidth="150px",
~width="100%",
~padding="1rem 0 1rem 0",
~cursor="pointer",
~borderBottom=index == savedCardlength - 1 ? "0px" : `1px solid ${themeObj.borderColor}`,
~borderTop="none",
~borderLeft="none",
~borderRight="none",
~borderRadius="0px",
~background="transparent",
~color=themeObj.colorTextSecondary,
~boxShadow="none",
~opacity={isCardExpired ? "0.7" : "1"},
(),
)}
onClick={_ => setPaymentToken(_ => (paymentItem.paymentToken, paymentItem.customerId))}>
<div className="w-full">
<div>
<div className="flex flex-row justify-between items-center">
<div
className={`flex flex-row items-center justify-end gap-3 -mt-1`}
style={ReactDOMStyle.make(~fontSize="14px", ~opacity="0.5", ())}>
<div className="flex">
{React.string(
`${paymentItem.card.expiryMonth} / ${paymentItem.card.expiryYear->CardUtils.formatExpiryToTwoDigit}`,
)}
className={`flex flex-row justify-center items-center`}
style={ReactDOMStyle.make(~columnGap=themeObj.spacingUnit, ())}>
<div style={ReactDOMStyle.make(~color=isActive ? themeObj.colorPrimary : "", ())}>
<Radio
checked=isActive
height="18px"
className="savedcard"
marginTop="-2px"
opacity="20%"
padding="46%"
border="1px solid currentColor"
/>
</div>
<div className={`PickerItemIcon mx-3 flex items-center `}> brandIcon </div>
<div className="flex flex-col">
<div className="flex items-center gap-4">
{isCard
? <div className="flex flex-col items-start">
<div> {React.string(paymentItem.card.nickname)} </div>
<div className={`PickerItemLabel flex flex-row gap-3 items-center`}>
<div className="tracking-widest"> {React.string(`****`)} </div>
<div> {React.string(paymentItem.card.last4Digits)} </div>
</div>
</div>
: <div> {React.string(paymentMethodType->Utils.snakeToTitleCase)} </div>}
<RenderIf condition={paymentItem.defaultPaymentMethodSet}>
<Icon
size=18
name="checkmark"
style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ())}
/>
</RenderIf>
</div>
</div>
</div>
</RenderIf>
</div>
<div className="w-full ">
<div className="flex flex-col items-start mx-8">
<RenderIf condition={isActive && isRenderCvv}>
<RenderIf condition={isCard}>
<div
className={`flex flex-row items-start justify-start gap-2`}
className={`flex flex-row items-center justify-end gap-3 -mt-1`}
style={ReactDOMStyle.make(~fontSize="14px", ~opacity="0.5", ())}>
<div className="w-12 mt-6"> {React.string("CVC: ")} </div>
<div
className={`flex h mx-4 justify-start w-16 ${isActive
? "opacity-1 mt-4"
: "opacity-0"}`}>
<PaymentInputField
isValid=isCVCValid
setIsValid=setIsCVCValid
value=cvcNumber
onChange=changeCVCNumber
onBlur=handleCVCBlur
errorString=cvcError
inputFieldClassName="flex justify-start"
paymentType
appearance=config.appearance
type_="tel"
className={`tracking-widest justify-start w-full`}
maxLength=4
inputRef=cvcRef
placeholder="123"
height="2.2rem"
/>
<div className="flex">
{React.string(`${expiryMonth} / ${expiryYear->CardUtils.formatExpiryToTwoDigit}`)}
</div>
</div>
</RenderIf>
<RenderIf condition={isCardExpired}>
<div
className="italic mt-3 ml-1"
style={ReactDOMStyle.make(~fontSize="14px", ~opacity="0.7", ())}>
{`*${localeString.cardExpiredText}`->React.string}
</div>
</RenderIf>
<RenderIf condition={isActive}>
<DynamicFields
paymentType
list
paymentMethod=paymentItem.paymentMethod
paymentMethodType
setRequiredFieldsBody
isSavedCardFlow=true
savedMethod=paymentItem
/>
<Surcharge
list
paymentMethod=paymentItem.paymentMethod
paymentMethodType
cardBrand={cardBrand->CardUtils.getCardType}
/>
</RenderIf>
</div>
<div className="w-full">
<div className="flex flex-col items-start mx-8">
<RenderIf condition={isActive && isRenderCvv}>
<div
className={`flex flex-row items-start justify-start gap-2`}
style={ReactDOMStyle.make(~fontSize="14px", ~opacity="0.5", ())}>
<div className="w-12 mt-6"> {React.string("CVC: ")} </div>
<div
className={`flex h mx-4 justify-start w-16 ${isActive
? "opacity-1 mt-4"
: "opacity-0"}`}>
<PaymentInputField
isValid=isCVCValid
setIsValid=setIsCVCValid
value=cvcNumber
onChange=changeCVCNumber
onBlur=handleCVCBlur
errorString=cvcError
inputFieldClassName="flex justify-start"
paymentType
appearance=config.appearance
type_="tel"
className={`tracking-widest justify-start w-full`}
maxLength=4
inputRef=cvcRef
placeholder="123"
height="2.2rem"
/>
</div>
</div>
</RenderIf>
<RenderIf condition={isCardExpired}>
<div
className="italic mt-3 ml-1"
style={ReactDOMStyle.make(~fontSize="14px", ~opacity="0.7", ())}>
{`*${localeString.cardExpiredText}`->React.string}
</div>
</RenderIf>
<RenderIf condition={isActive}>
<DynamicFields
paymentType
list
paymentMethod=paymentItem.paymentMethod
paymentMethodType
setRequiredFieldsBody
isSavedCardFlow=true
savedMethod=paymentItem
/>
<Surcharge
list
paymentMethod=paymentItem.paymentMethod
paymentMethodType
cardBrand={cardBrand->CardUtils.getCardType}
/>
</RenderIf>
</div>
</div>
</div>
</div>
</div>
</button>
</button>
</RenderIf>
}
4 changes: 4 additions & 0 deletions src/Types/PaymentType.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ type options = {
sdkHandleConfirmPayment: sdkHandleConfirmPayment,
paymentMethodsHeaderText?: string,
savedPaymentMethodsHeaderText?: string,
hideExpiredPaymentMethods: bool,
}
let defaultCardDetails = {
scheme: None,
Expand Down Expand Up @@ -289,6 +290,7 @@ let defaultOptions = {
showCardFormByDefault: true,
billingAddress: defaultBillingAddress,
sdkHandleConfirmPayment: defaultSdkHandleConfirmPayment,
hideExpiredPaymentMethods: false,
}
let getLayout = (str, logger) => {
switch str {
Expand Down Expand Up @@ -935,6 +937,7 @@ let itemToObjMapper = (dict, logger) => {
"sdkHandleConfirmPayment",
"paymentMethodsHeaderText",
"savedPaymentMethodsHeaderText",
"hideExpiredPaymentMethods",
],
dict,
"options",
Expand Down Expand Up @@ -975,6 +978,7 @@ let itemToObjMapper = (dict, logger) => {
->getSdkHandleConfirmPaymentProps,
paymentMethodsHeaderText: ?getOptionString(dict, "paymentMethodsHeaderText"),
savedPaymentMethodsHeaderText: ?getOptionString(dict, "savedPaymentMethodsHeaderText"),
hideExpiredPaymentMethods: getBool(dict, "hideExpiredPaymentMethods", false),
}
}

Expand Down

0 comments on commit f2a8c42

Please sign in to comment.