fix: remove expired saved cards

src/Components/SavedCardItem.res

@@ -11,7 +11,7 @@ let make = (
   ~list,
   ~setRequiredFieldsBody,
 ) => {
-  let {themeObj, config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let (cardBrand, setCardBrand) = Recoil.useRecoilState(RecoilAtoms.cardBrand)
   let (
     isCVCValid,
@@ -49,6 +49,22 @@ let make = (
   let isCard = paymentItem.paymentMethod === "card"
   let isRenderCvv = isCard && paymentItem.requiresCvv
 
+  let expiryMonth =
+    (
+      paymentItem.card.expiryMonth->Int.fromString === Some(12)
+        ? 01
+        : paymentItem.card.expiryMonth->Int.fromString->Option.getOr(01) + 1
+    )->Int.toString
+  let expiryYear =
+    (
+      paymentItem.card.expiryMonth->Int.fromString === Some(12)
+        ? paymentItem.card.expiryYear->Int.fromString->Option.getOr(0) + 1
+        : paymentItem.card.expiryYear->Int.fromString->Option.getOr(0)
+    )->Int.toString
+  let expiryDate = Date.fromString(`${expiryYear}-${expiryMonth}`)
+  let currentDate = Date.make()
+  let isCardExpired = isCard && expiryDate < currentDate
+
   let paymentMethodType = switch paymentItem.paymentMethodType {
   | Some(paymentMethodType) => paymentMethodType
   | None => "debit"
@@ -70,6 +86,7 @@ let make = (
       ~background="transparent",
       ~color=themeObj.colorTextSecondary,
       ~boxShadow="none",
+      ~opacity={isCardExpired ? "0.7" : "1"},
       (),
     )}
     onClick={_ => setPaymentToken(_ => (paymentItem.paymentToken, paymentItem.customerId))}>
@@ -91,23 +108,25 @@ let make = (
               />
             </div>
             <div className={`PickerItemIcon mx-3 flex  items-center `}> brandIcon </div>
-            <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 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>
-                : <div> {React.string(paymentMethodType->Utils.snakeToTitleCase)} </div>}
-              <RenderIf condition={paymentItem.defaultPaymentMethodSet}>
-                <Icon
-                  size=18
-                  name="checkmark"
-                  style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ())}
-                />
-              </RenderIf>
+                  : <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}>
@@ -123,37 +142,44 @@ let make = (
           </RenderIf>
         </div>
         <div className="w-full ">
-          <RenderIf condition={isActive}>
-            <div className="flex flex-col items-start mx-8">
-              <RenderIf condition={isRenderCvv}>
+          <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 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>
+                  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>
-              </RenderIf>
+              </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
@@ -169,8 +195,8 @@ let make = (
                 paymentMethodType
                 cardBrand={cardBrand->CardUtils.getCardType}
               />
-            </div>
-          </RenderIf>
+            </RenderIf>
+          </div>
         </div>
       </div>
     </div>

src/LocaleStrings/ArabicLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `استخدم طرق الدفع المحفوظة`,
   cardNickname: `الاسم علي الكارت`,
   nicknamePlaceholder: `اسم البطاقة (اختياري)`,
+  cardExpiredText: `انتهت صلاحية هذه البطاقة`,
   cardHeader: `معلومات البطاقة`,
 }

src/LocaleStrings/CatalanLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Utilitzeu formes de pagament desades`,
   nicknamePlaceholder: `Àlies de la targeta (opcional)`,
   selectPaymentMethodText: `Seleccioneu una forma de pagament i torneu-ho a provar`,
+  cardExpiredText: `Aquesta targeta ha caducat`,
   cardHeader: `Informació de la targeta`,
 }

src/LocaleStrings/DeutschLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Gespeicherte Zahlungsarten nutzen`,
   cardNickname: `Spitzname der Karte`,
   nicknamePlaceholder: `Kartenname (optional)`,
+  cardExpiredText: `Diese Karte ist abgelaufen`,
   cardHeader: `Kartendaten`,
 }

src/LocaleStrings/DutchLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Gebruik opgeslagen betaalmethoden`,
   nicknamePlaceholder: `Bijnaam kaart (optioneel)`,
   selectPaymentMethodText: `Selecteer een betaalmethode en probeer het opnieuw`,
+  cardExpiredText: `Deze kaart is verlopen`,
   cardHeader: `Kaartinformatie`,
 }

src/LocaleStrings/EnglishGBLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: "Use saved payment methods",
   cardNickname: "Card Nickname",
   nicknamePlaceholder: "Card Nickname (Optional)",
+  cardExpiredText: `This card has expired`,
   cardHeader: `Card information`,
 }

src/LocaleStrings/EnglishLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: "Use saved payment methods",
   cardNickname: "Card Nickname",
   nicknamePlaceholder: "Card Nickname (Optional)",
+  cardExpiredText: `This card has expired`,
   cardHeader: `Card information`,
 }

src/LocaleStrings/FrenchBelgiumLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Utiliser les modes de paiement enregistrés`,
   nicknamePlaceholder: `Surnom de la carte (facultatif)`,
   selectPaymentMethodText: `Veuillez sélectionner un mode de paiement et réessayer`,
+  cardExpiredText: `Cette carte a expiré`,
   cardHeader: `Informations de carte`,
 }

src/LocaleStrings/FrenchLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Utiliser les modes de paiement enregistrés`,
   cardNickname: `Pseudonyme de la carte`,
   nicknamePlaceholder: `Surnom de la carte (facultatif)`,
+  cardExpiredText: `Cette carte a expiré`,
   cardHeader: `Informations de carte`,
 }

src/LocaleStrings/HebrewLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `השתמש באמצעי תשלום שמורים`,
   cardNickname: `כינוי לכרטיס`,
   nicknamePlaceholder: `כינוי לכרטיס (אופציונלי)`,
+  cardExpiredText: `הכרטיס הזה פג תוקף`,
   cardHeader: `מידע כרטיס`,
 }

src/LocaleStrings/ItalianLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Utilizza i metodi di pagamento salvati`,
   nicknamePlaceholder: `Soprannome della carta (facoltativo)`,
   selectPaymentMethodText: `Seleziona un metodo di pagamento e riprova`,
+  cardExpiredText: `Questa carta è scaduta`,
   cardHeader: `Informazioni sulla carta`,
 }

src/LocaleStrings/JapaneseLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `保存した支払い方法を使用する`,
   cardNickname: `カードのニックネーム`,
   nicknamePlaceholder: `カードニックネーム（任意）`,
+  cardExpiredText: `このカードは期限切れです`,
   cardHeader: `カード情報`,
 }

src/LocaleStrings/LocaleStringTypes.res

@@ -70,5 +70,6 @@ type localeStrings = {
   useExistingPaymentMethods: string,
   cardNickname: string,
   nicknamePlaceholder: string,
+  cardExpiredText: string,
   cardHeader: string,
 }

src/LocaleStrings/PolishLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Skorzystaj z zapisanych metod płatności`,
   nicknamePlaceholder: `Pseudonim karty (opcjonalnie)`,
   selectPaymentMethodText: `Wybierz metodę płatności i spróbuj ponownie`,
+  cardExpiredText: `Ta karta wygasła`,
   cardHeader: `Informacje o karcie`,
 }

src/LocaleStrings/PortugueseLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Use métodos de pagamento salvos`,
   nicknamePlaceholder: `Apelido do cartão (opcional)`,
   selectPaymentMethodText: `Selecione uma forma de pagamento e tente novamente`,
+  cardExpiredText: `Este cartão expirou`,
   cardHeader: `Informações do cartão`,
 }

src/LocaleStrings/RussianLocale.res

@@ -82,5 +82,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Используйте сохраненные способы оплаты`,
   nicknamePlaceholder: `Псевдоним карты (необязательно)`,
   selectPaymentMethodText: `Пожалуйста, выберите способ оплаты и повторите попытку.`,
+  cardExpiredText: `Эта карта истекла`,
   cardHeader: `Информация о карте`,
 }

src/LocaleStrings/SpanishLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Utilice métodos de pago guardados`,
   nicknamePlaceholder: `Apodo de la tarjeta (opcional)`,
   selectPaymentMethodText: `Por favor seleccione un método de pago y vuelva a intentarlo`,
+  cardExpiredText: `Esta tarjeta ha caducado`,
   cardHeader: `Información de la tarjeta`,
 }

src/LocaleStrings/SwedishLocale.res

@@ -79,5 +79,6 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   useExistingPaymentMethods: `Använd sparade betalningsmetoder`,
   nicknamePlaceholder: `Kortets smeknamn (valfritt)`,
   selectPaymentMethodText: `Välj en betalningsmetod och försök igen`,
+  cardExpiredText: `Detta kort har gått ut`,
   cardHeader: `Kortinformation`,
 }