Skip to content

Commit a23fd2b

Browse files
Debarshi-GuptaDebarshi GuptaPritishBudhiraja
authored
fix: Fixed Responsive Behaviour for Saved Cards (#922)
Co-authored-by: Debarshi Gupta <[email protected]> Co-authored-by: Pritish Budhiraja <[email protected]>
1 parent a3c5c59 commit a23fd2b

File tree

1 file changed

+62
-79
lines changed

1 file changed

+62
-79
lines changed

‎src/Components/SavedCardItem.res

Lines changed: 62 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,16 @@
11
module RenderSavedPaymentMethodItem = {
22
@react.component
3-
let make = (
4-
~paymentItem: PaymentType.customerMethods,
5-
~paymentMethodType,
6-
~themeObj: CardThemeType.themeClass,
7-
~displayDefaultSavedPaymentIcon,
8-
~defaultPaymentMethodSet,
9-
~expiryText,
10-
~expiryMonth,
11-
~expiryYear,
12-
) => {
13-
let expiryYearToTwoDigits = expiryYear->CardUtils.formatExpiryToTwoDigit
14-
3+
let make = (~paymentItem: PaymentType.customerMethods, ~paymentMethodType) => {
154
switch paymentItem.paymentMethod {
165
| "card" =>
176
<div
187
className="flex flex-col items-start"
198
role="group"
209
ariaLabel={`Card ${paymentItem.card.nickname}, ending in ${paymentItem.card.last4Digits}`}>
21-
<div className="flex items-center text-[15px] font-medium">
22-
{React.string(paymentItem.card.nickname)}
23-
<RenderIf condition={displayDefaultSavedPaymentIcon && defaultPaymentMethodSet}>
24-
<Icon className="ml-2" size=16 name="checkmark" style={color: themeObj.colorPrimary} />
25-
</RenderIf>
26-
</div>
27-
<div className={`PickerItemLabel flex flex-row gap-2 items-center text-sm font-normal`}>
28-
<div ariaHidden=true> {React.string(`XXXX ${paymentItem.card.last4Digits}`)} </div>
29-
<span className="w-1 h-1 rounded-full bg-black/60" />
30-
<div> {React.string(`${expiryText} ${expiryMonth}/${expiryYearToTwoDigits}`)} </div>
10+
<div className="text-base tracking-wide"> {React.string(paymentItem.card.nickname)} </div>
11+
<div className={`PickerItemLabel flex flex-row gap-3 items-center text-sm`}>
12+
<div className="tracking-widest" ariaHidden=true> {React.string(`****`)} </div>
13+
<div className="tracking-wide" ariaHidden=true> {React.string(paymentItem.card.last4Digits)} </div>
3114
</div>
3215
</div>
3316

@@ -68,11 +51,9 @@ let make = (
6851
~setRequiredFieldsBody,
6952
) => {
7053
let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
71-
let {
72-
hideExpiredPaymentMethods,
73-
displayDefaultSavedPaymentIcon,
74-
displayBillingDetails,
75-
} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
54+
let {hideExpiredPaymentMethods, displayDefaultSavedPaymentIcon, displayBillingDetails} = Recoil.useRecoilValueFromAtom(
55+
RecoilAtoms.optionAtom,
56+
)
7657
let (cardBrand, setCardBrand) = Recoil.useRecoilState(RecoilAtoms.cardBrand)
7758
let (
7859
isCVCValid,
@@ -139,13 +120,6 @@ let make = (
139120
let currentDate = Date.make()
140121
let isCardExpired = isCard && expiryDate < currentDate
141122

142-
let paymentMethodType = switch paymentItem.paymentMethodType {
143-
| Some(paymentMethodType) => paymentMethodType
144-
| None => "debit"
145-
}
146-
147-
let defaultPaymentMethodSet = paymentItem.defaultPaymentMethodSet
148-
149123
let billingDetailsText = "Billing Details:"
150124

151125
let billingDetailsArray =
@@ -161,11 +135,9 @@ let make = (
161135
->Array.map(item => Option.getOr(item, ""))
162136
->Array.filter(item => String.trim(item) !== "")
163137

164-
let isCVCEmpty = cvcNumber->String.length == 0
165-
166-
let {innerLayout} = config.appearance
138+
let isCVCEmpty = cvcNumber->String.length == 0
167139

168-
let expiryText = localeString.expiry
140+
let {innerLayout} = config.appearance
169141

170142
<RenderIf condition={!hideExpiredPaymentMethods || !isCardExpired}>
171143
<button
@@ -210,69 +182,80 @@ let make = (
210182
border="1px solid currentColor"
211183
/>
212184
</div>
213-
<div className={`PickerItemIcon mx-1 flex items-center`}> brandIcon </div>
185+
<div className={`PickerItemIcon mx-3 flex items-center `}> brandIcon </div>
214186
<div className="flex flex-col">
215-
<div className="flex items-center gap-2">
216-
<RenderSavedPaymentMethodItem
217-
paymentItem={paymentItem}
218-
paymentMethodType
219-
themeObj
220-
displayDefaultSavedPaymentIcon
221-
defaultPaymentMethodSet
222-
expiryText
223-
expiryMonth
224-
expiryYear
225-
/>
187+
<div className="flex items-center gap-4">
188+
<RenderSavedPaymentMethodItem paymentItem={paymentItem} paymentMethodType />
189+
<RenderIf
190+
condition={displayDefaultSavedPaymentIcon &&
191+
paymentItem.defaultPaymentMethodSet}>
192+
<Icon size=16 name="checkmark" style={color: themeObj.colorPrimary} />
193+
</RenderIf>
226194
</div>
227195
</div>
228196
</div>
229-
<RenderIf condition={isCard && isActive && isRenderCvv}>
230-
<div className={`flex flex-row items-start gap-2 opacity-70 text-sm`}>
231-
<div className={`flex h mx-4 w-16 ${isActive ? "opacity-1" : "opacity-0"}`}>
232-
<PaymentInputField
233-
isValid=isCVCValid
234-
setIsValid=setIsCVCValid
235-
value=cvcNumber
236-
onChange=changeCVCNumber
237-
onBlur=handleCVCBlur
238-
errorString=""
239-
inputFieldClassName="flex justify-start"
240-
paymentType
241-
appearance=config.appearance
242-
type_="tel"
243-
className={`tracking-widest justify-start w-full`}
244-
maxLength=4
245-
inputRef=cvcRef
246-
height="2.2rem"
247-
name={TestUtils.cardCVVInputTestId}
248-
placeholder=localeString.cvcTextLabel
249-
/>
197+
<RenderIf condition={isCard}>
198+
<div
199+
className={`flex flex-row items-center justify-end gap-3 -mt-1`}
200+
style={fontSize: "14px", opacity: "0.5"}
201+
ariaLabel={`Expires ${expiryMonth} / ${expiryYear->CardUtils.formatExpiryToTwoDigit}`}>
202+
<div className="flex" ariaHidden=true>
203+
{React.string(`${expiryMonth} / ${expiryYear->CardUtils.formatExpiryToTwoDigit}`)}
250204
</div>
251205
</div>
252206
</RenderIf>
253207
</div>
254208
<div className="w-full">
255-
<div className="flex flex-col items-start mx-3">
209+
<div className="flex flex-col items-start mx-8">
210+
<RenderIf condition={isActive && isRenderCvv}>
211+
<div
212+
className={`flex flex-row items-start justify-start gap-2`}
213+
style={fontSize: "14px", opacity: "0.5"}>
214+
<div className="tracking-widest w-12 mt-6">
215+
{React.string(`${localeString.cvcTextLabel}: `)}
216+
</div>
217+
<div
218+
className={`flex h mx-4 justify-start w-16 ${isActive
219+
? "opacity-1 mt-4"
220+
: "opacity-0"}`}>
221+
<PaymentInputField
222+
isValid=isCVCValid
223+
setIsValid=setIsCVCValid
224+
value=cvcNumber
225+
onChange=changeCVCNumber
226+
onBlur=handleCVCBlur
227+
errorString=""
228+
inputFieldClassName="flex justify-start"
229+
paymentType
230+
appearance=config.appearance
231+
type_="tel"
232+
className={`tracking-widest justify-start w-full`}
233+
maxLength=4
234+
inputRef=cvcRef
235+
placeholder="123"
236+
height="1.8rem"
237+
name={TestUtils.cardCVVInputTestId}
238+
/>
239+
</div>
240+
</div>
241+
</RenderIf>
256242
<RenderIf condition={isActive && displayBillingDetails}>
257-
<div className="text-sm text-left gap-2 mt-5" style={marginLeft: "16%"}>
243+
<div className="tracking-wide text-sm text-left gap-2 mt-4 ml-2">
258244
<div className="font-semibold"> {React.string(billingDetailsText)} </div>
259245
<div className="font-normal">
260246
{React.string(Array.joinWith(billingDetailsArray, ", "))}
261247
</div>
262248
</div>
263249
</RenderIf>
264-
<RenderIf condition={isActive && innerLayout === Spaced}>
265-
<RenderIf condition=isCVCEmpty>
250+
<RenderIf condition={isActive && isCVCEmpty && innerLayout === Spaced && cvcError != ""}>
266251
<div
267-
className="Error pt-1 mt-1"
252+
className="Error pt-1 mt-1 ml-2"
268253
style={
269254
color: themeObj.colorDangerText,
270-
fontSize: themeObj.fontSizeSm,
271-
marginLeft: "16%",
255+
fontSize: themeObj.fontSizeSm
272256
}>
273257
{React.string(cvcError)}
274258
</div>
275-
</RenderIf>
276259
</RenderIf>
277260
<RenderIf condition={isCardExpired}>
278261
<div className="italic mt-3 ml-1" style={fontSize: "14px", opacity: "0.7"}>

0 commit comments

Comments
 (0)