Skip to content

Commit

Permalink
fix: changed architecture for PMM and changed delete button
Browse files Browse the repository at this point in the history
  • Loading branch information
ArushKapoorJuspay committed Jun 26, 2024
1 parent 4f1357e commit d73fdbb
Show file tree
Hide file tree
Showing 20 changed files with 569 additions and 182 deletions.
5 changes: 5 additions & 0 deletions public/icons/orca.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 7 additions & 2 deletions src/App.res
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,14 @@ let make = () => {
let sessionId = CardUtils.getQueryParamsDictforKey(url.search, "sessionId")
let publishableKey = CardUtils.getQueryParamsDictforKey(url.search, "publishableKey")
let endpoint = CardUtils.getQueryParamsDictforKey(url.search, "endpoint")
let ephimeralKey = CardUtils.getQueryParamsDictforKey(url.search, "ephimeralKey")
let ephemeralKey = CardUtils.getQueryParamsDictforKey(url.search, "ephemeralKey")
let hyperComponentName =
CardUtils.getQueryParamsDictforKey(
url.search,
"hyperComponentName",
)->Types.getHyperComponentNameFromStr

<PreMountLoader publishableKey sessionId clientSecret endpoint ephimeralKey />
<PreMountLoader publishableKey sessionId clientSecret endpoint ephemeralKey hyperComponentName />
}
| "achBankTransfer"
| "bacsBankTransfer"
Expand Down
6 changes: 3 additions & 3 deletions src/CardTheme.res
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ let defaultConfig = {
locale: "auto",
fonts: [],
clientSecret: "",
ephimeralKey: "",
ephemeralKey: "",
loader: Auto,
}
type recoilConfig = {
Expand Down Expand Up @@ -383,7 +383,7 @@ let itemToObjMapper = (
logger,
) => {
unknownKeysWarning(
["appearance", "fonts", "locale", "clientSecret", "loader"],
["appearance", "fonts", "locale", "clientSecret", "loader", "ephemeralKey"],
dict,
"elements",
~logger,
Expand All @@ -393,7 +393,7 @@ let itemToObjMapper = (
locale: getWarningString(dict, "locale", "auto", ~logger),
fonts: getFonts("fonts", dict, logger),
clientSecret: getWarningString(dict, "clientSecret", "", ~logger),
ephimeralKey: getWarningString(dict, "ephimeralKey", "", ~logger),
ephemeralKey: getWarningString(dict, "ephemeralKey", "", ~logger),
loader: getWarningString(dict, "loader", "auto", ~logger)->getShowLoader(logger),
}
}
23 changes: 23 additions & 0 deletions src/CardUtils.res
Original file line number Diff line number Diff line change
Expand Up @@ -626,3 +626,26 @@ let useCardDetails = (~cvcNumber, ~isCvcValidValue, ~isCVCValid) => {
(isCardDetailsEmpty, isCardDetailsValid, isCardDetailsInvalid)
}, (cvcNumber, isCvcValidValue, isCVCValid))
}

let getWalletBrandIcon = (customerMethod: PaymentType.customerMethods) => {
switch customerMethod.paymentMethodType {
| Some("apple_pay") => <Icon size=Utils.brandIconSize name="apple_pay_saved" />
| Some("google_pay") => <Icon size=Utils.brandIconSize name="google_pay_saved" />
| Some("paypal") => <Icon size=Utils.brandIconSize name="paypal" />
| _ => <Icon size=Utils.brandIconSize name="default-card" />
}
}

let getPaymentMethodBrand = (customerMethod: PaymentType.customerMethods) => {
switch customerMethod.paymentMethod {
| "wallet" => getWalletBrandIcon(customerMethod)
| _ =>
getCardBrandIcon(
switch customerMethod.card.scheme {
| Some(ele) => ele
| None => ""
}->getCardType,
""->CardThemeType.getPaymentMode,
)
}
}
47 changes: 9 additions & 38 deletions src/Components/SavedMethodItem.res
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
@react.component
let make = (~brandIcon, ~paymentItem: PaymentType.customerMethods) => {
let {themeObj, localeString, config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
let switchToCustomPod = Recoil.useRecoilValueFromAtom(RecoilAtoms.switchToCustomPod)
let logger = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
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
Expand All @@ -16,26 +14,6 @@ let make = (~brandIcon, ~paymentItem: PaymentType.customerMethods) => {
| None => "debit"
}

let handleDelete = e => {
Console.log2("methodID", paymentItem.paymentMethodId)
open Promise
PaymentHelpers.deletePaymentMethod(
~ephimeralKey=config.ephimeralKey,
~paymentMethodId=paymentItem.paymentMethodId,
~logger,
~switchToCustomPod,
)
->then(res => {
Console.log2("deleted paymentId", res)
resolve()
})
->catch(err => {
Console.log2("deleting error ", err)
resolve()
})
->ignore
e->ReactEvent.Mouse.stopPropagation
}
<RenderIf condition={!hideExpiredPaymentMethods || !isCardExpired}>
<div
className={`PickerItem ${pickerItemClass} flex flex-row items-stretch`}
Expand Down Expand Up @@ -87,20 +65,13 @@ let make = (~brandIcon, ~paymentItem: PaymentType.customerMethods) => {
</div>
</RenderIf>
</div>
<div className={`flex justify-end`} style={width: `25%`}>
<button
style={
background: themeObj.colorPrimary,
color: "white",
padding: "3px 5px",
border: "none",
borderRadius: "5px",
cursor: "pointer",
}
onClick={handleDelete}>
{"Delete"->React.string}
</button>
</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">
Expand Down
21 changes: 1 addition & 20 deletions src/Components/SavedMethods.res
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,6 @@ let make = (

let {paymentToken: paymentTokenVal, customerId} = paymentToken

let getWalletBrandIcon = (obj: PaymentType.customerMethods) => {
switch obj.paymentMethodType {
| Some("apple_pay") => <Icon size=brandIconSize name="apple_pay_saved" />
| Some("google_pay") => <Icon size=brandIconSize name="google_pay_saved" />
| Some("paypal") => <Icon size=brandIconSize name="paypal" />
| _ => <Icon size=brandIconSize name="default-card" />
}
}

let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
~displaySavedPaymentMethodsCheckbox,
~isSaveCardsChecked,
Expand All @@ -47,17 +38,7 @@ let make = (
let bottomElement = {
savedMethods
->Array.mapWithIndex((obj, i) => {
let brandIcon = switch obj.paymentMethod {
| "wallet" => getWalletBrandIcon(obj)
| _ =>
getCardBrandIcon(
switch obj.card.scheme {
| Some(ele) => ele
| None => ""
}->getCardType,
""->CardThemeType.getPaymentMode,
)
}
let brandIcon = obj->getPaymentMethodBrand
let isActive = paymentTokenVal == obj.paymentToken
<SavedCardItem
key={i->Int.toString}
Expand Down
80 changes: 60 additions & 20 deletions src/Components/SavedPaymentManagement.res
Original file line number Diff line number Diff line change
@@ -1,31 +1,71 @@
@react.component
let make = (~savedMethods: array<PaymentType.customerMethods>) => {
let make = (~savedMethods: array<PaymentType.customerMethods>, ~setSavedMethods) => {
open CardUtils
open Utils

let getWalletBrandIcon = (obj: PaymentType.customerMethods) => {
switch obj.paymentMethodType {
| Some("apple_pay") => <Icon size=brandIconSize name="apple_pay_saved" />
| Some("google_pay") => <Icon size=brandIconSize name="google_pay_saved" />
| Some("paypal") => <Icon size=brandIconSize name="paypal" />
| _ => <Icon size=brandIconSize name="default-card" />
}
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.setLogInfo(
~value="Failed to delete Saved Payment Method",
~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 = switch obj.paymentMethod {
| "wallet" => getWalletBrandIcon(obj)
| _ =>
getCardBrandIcon(
switch obj.card.scheme {
| Some(ele) => ele
| None => ""
}->getCardType,
""->CardThemeType.getPaymentMode,
)
}
<SavedMethodItem key={i->Int.toString} paymentItem=obj brandIcon />
let brandIcon = obj->getPaymentMethodBrand
<SavedMethodItem key={i->Int.toString} paymentItem=obj brandIcon handleDelete />
})
->React.array
}
4 changes: 2 additions & 2 deletions src/Hooks/CommonHooks.res
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ type element = {
}
type keys = {
clientSecret: option<string>,
ephimeralKey: option<string>,
ephemeralKey: option<string>,
publishableKey: string,
iframeId: string,
parentURL: string,
Expand Down Expand Up @@ -95,7 +95,7 @@ let updateKeys = (dict, keyPair, setKeys) => {
}
let defaultkeys = {
clientSecret: None,
ephimeralKey: None,
ephemeralKey: None,
publishableKey: "",
iframeId: "",
parentURL: "*",
Expand Down
11 changes: 5 additions & 6 deletions src/LoaderController.res
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
locale: config.locale,
fonts: config.fonts,
clientSecret: config.clientSecret,
ephimeralKey: config.ephimeralKey,
ephemeralKey: config.ephemeralKey,
loader: config.loader,
},
themeObj: appearance.variables,
Expand Down Expand Up @@ -249,11 +249,11 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
let paymentOptions = dict->getDictFromObj("paymentOptions")

let clientSecret = getWarningString(paymentOptions, "clientSecret", "", ~logger)
let ephimeralKey = getWarningString(paymentOptions, "ephimeralKey", "", ~logger)
let ephemeralKey = getWarningString(paymentOptions, "ephemeralKey", "", ~logger)
setKeys(prev => {
...prev,
clientSecret: Some(clientSecret),
ephimeralKey: Some(ephimeralKey),
ephemeralKey: Some(ephemeralKey),
})
logger.setClientSecret(clientSecret)

Expand Down Expand Up @@ -298,11 +298,11 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
let paymentOptions = dict->getDictFromObj("paymentOptions")

let clientSecret = getWarningString(paymentOptions, "clientSecret", "", ~logger)
let ephimeralKey = getWarningString(paymentOptions, "ephimeralKey", "", ~logger)
let ephemeralKey = getWarningString(paymentOptions, "ephemeralKey", "", ~logger)
setKeys(prev => {
...prev,
clientSecret: Some(clientSecret),
ephimeralKey: Some(ephimeralKey),
ephemeralKey: Some(ephemeralKey),
})
logger.setClientSecret(clientSecret)

Expand Down Expand Up @@ -490,7 +490,6 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
}
if dict->getDictIsSome("savedPaymentMethods") {
let savedPaymentMethods = dict->PaymentType.createCustomerObjArr("savedPaymentMethods")
Console.log2("loader Controler", savedPaymentMethods)
setOptionsPayment(prev => {
...prev,
savedPaymentMethods,
Expand Down
2 changes: 1 addition & 1 deletion src/PaymentManagement.res
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ let make = () => {

<>
<RenderIf condition={!loading}>
<SavedPaymentManagement savedMethods />
<SavedPaymentManagement savedMethods setSavedMethods />
</RenderIf>
<RenderIf condition={loading}>
<div> {"Loading..."->React.string} </div>
Expand Down
Loading

0 comments on commit d73fdbb

Please sign in to comment.