-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: payment method management added
- Loading branch information
1 parent
45a71e3
commit 716b8c6
Showing
27 changed files
with
1,040 additions
and
83 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| @react.component | ||
| let make = (~brandIcon, ~paymentItem: PaymentType.customerMethods, ~handleDelete) => { | ||
| let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) | ||
| let {hideExpiredPaymentMethods} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom) | ||
| let isCard = paymentItem.paymentMethod === "card" | ||
| let expiryMonth = paymentItem.card.expiryMonth | ||
| let expiryYear = paymentItem.card.expiryYear | ||
| let expiryDate = Date.fromString(`${expiryYear}-${expiryMonth}`) | ||
| let currentDate = Date.make() | ||
| let pickerItemClass = "PickerItem--selected" | ||
| let isCardExpired = isCard && expiryDate < currentDate | ||
| let paymentMethodType = paymentItem.paymentMethodType->Option.getOr("debit") | ||
|
|
||
| <RenderIf condition={!hideExpiredPaymentMethods || !isCardExpired}> | ||
| <div | ||
| className={`PickerItem ${pickerItemClass} flex flex-row items-stretch`} | ||
| style={ | ||
| minWidth: "150px", | ||
| width: "100%", | ||
| padding: "1rem 0 1rem 0", | ||
| borderBottom: `1px solid ${themeObj.borderColor}`, | ||
| borderTop: "none", | ||
| borderLeft: "none", | ||
| borderRight: "none", | ||
| borderRadius: "0px", | ||
| background: "transparent", | ||
| color: themeObj.colorTextSecondary, | ||
| boxShadow: "none", | ||
| opacity: {isCardExpired ? "0.7" : "1"}, | ||
| }> | ||
| <div className="w-full"> | ||
| <div> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <div className="flex grow justify-between"> | ||
| <div | ||
| className={`flex flex-row justify-center items-center`} | ||
| style={columnGap: themeObj.spacingUnit}> | ||
| <div className={`PickerItemIcon mx-3 flex items-center `}> brandIcon </div> | ||
| <div className="flex flex-col"> | ||
| <div className="flex items-center gap-4"> | ||
| {if 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> | ||
| } else { | ||
| <div> {React.string(paymentMethodType->Utils.snakeToTitleCase)} </div> | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <RenderIf condition={isCard}> | ||
| <div | ||
| className={`flex flex-row items-center justify-end gap-3 -mt-1`} | ||
| style={fontSize: "14px", opacity: "0.5"}> | ||
| <div className="flex"> | ||
| {React.string( | ||
| `${expiryMonth} / ${expiryYear->CardUtils.formatExpiryToTwoDigit}`, | ||
| )} | ||
| </div> | ||
| </div> | ||
| </RenderIf> | ||
| </div> | ||
| <Icon | ||
| size=18 | ||
| name="delete" | ||
| style={color: themeObj.colorDanger} | ||
| className="cursor-pointer ml-4 mb-[6px]" | ||
| onClick={_ => paymentItem->handleDelete} | ||
| /> | ||
| </div> | ||
| <div className="w-full"> | ||
| <div className="flex flex-col items-start mx-8"> | ||
| <RenderIf condition={isCardExpired}> | ||
| <div className="italic mt-3 ml-1" style={fontSize: "14px", opacity: "0.7"}> | ||
| {`*${localeString.cardExpiredText}`->React.string} | ||
| </div> | ||
| </RenderIf> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </RenderIf> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| @react.component | ||
| let make = (~savedMethods: array<PaymentType.customerMethods>, ~setSavedMethods) => { | ||
| open CardUtils | ||
| open Utils | ||
|
|
||
| let {iframeId} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys) | ||
| let {config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) | ||
| let switchToCustomPod = Recoil.useRecoilValueFromAtom(RecoilAtoms.switchToCustomPod) | ||
| let logger = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom) | ||
|
|
||
| let removeSavedMethod = paymentMethodId => { | ||
| savedMethods->Array.filter(savedMethod => { | ||
| savedMethod.paymentMethodId !== paymentMethodId | ||
| }) | ||
| } | ||
|
|
||
| let handleDelete = (paymentItem: PaymentType.customerMethods) => { | ||
| handlePostMessage([ | ||
| ("fullscreen", true->JSON.Encode.bool), | ||
| ("param", "paymentloader"->JSON.Encode.string), | ||
| ("iframeId", iframeId->JSON.Encode.string), | ||
| ]) | ||
| open Promise | ||
| PaymentHelpers.deletePaymentMethod( | ||
| ~ephemeralKey=config.ephemeralKey, | ||
| ~paymentMethodId=paymentItem.paymentMethodId, | ||
| ~logger, | ||
| ~switchToCustomPod, | ||
| ) | ||
| ->then(res => { | ||
| let dict = res->getDictFromJson | ||
| let paymentMethodId = dict->getString("payment_method_id", "") | ||
| let isDeleted = dict->getBool("deleted", false) | ||
|
|
||
| if isDeleted { | ||
| logger.setLogInfo( | ||
| ~value="Successfully Deleted Saved Payment Method", | ||
| ~eventName=DELETE_SAVED_PAYMENT_METHOD, | ||
| (), | ||
| ) | ||
| setSavedMethods(_ => paymentMethodId->removeSavedMethod) | ||
| } else { | ||
| logger.setLogError( | ||
| ~value=res->JSON.stringify, | ||
| ~eventName=DELETE_SAVED_PAYMENT_METHOD, | ||
| (), | ||
| ) | ||
| } | ||
| handlePostMessage([("fullscreen", false->JSON.Encode.bool)]) | ||
| resolve() | ||
| }) | ||
| ->catch(err => { | ||
| let exceptionMessage = err->formatException->JSON.stringify | ||
| logger.setLogError( | ||
| ~value=`Error Deleting Saved Payment Method: ${exceptionMessage}`, | ||
| ~eventName=DELETE_SAVED_PAYMENT_METHOD, | ||
| (), | ||
| ) | ||
| handlePostMessage([("fullscreen", false->JSON.Encode.bool)]) | ||
| resolve() | ||
| }) | ||
| ->ignore | ||
| } | ||
|
|
||
| savedMethods | ||
| ->Array.mapWithIndex((obj, i) => { | ||
| let brandIcon = obj->getPaymentMethodBrand | ||
| <SavedMethodItem key={i->Int.toString} paymentItem=obj brandIcon handleDelete /> | ||
| }) | ||
| ->React.array | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.