From a7e9f6d48e83ae96395ac19365abf4d757229c9b Mon Sep 17 00:00:00 2001
From: ArushKapoorJuspay <121166031+ArushKapoorJuspay@users.noreply.github.com>
Date: Tue, 12 Mar 2024 17:18:04 +0530
Subject: [PATCH] fix: added ordering for saved payment methods (#222)

---
 src/PaymentElement.res | 49 +++++++++++++++++++++++++-----------------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index e373568b3..25d0f74c9 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -49,39 +49,48 @@ let make = (
     setLoadSavedCards: (PaymentType.savedCardsLoadState => PaymentType.savedCardsLoadState) => unit,
   ) = React.useState(_ => PaymentType.LoadingSavedCards)
 
-  React.useEffect1(() => {
-    switch customerPaymentMethods {
-    | LoadingSavedCards => ()
-    | LoadedSavedCards(savedCards, isGuestCustomer) => {
-        setSavedMethods(_ => savedCards)
+  React.useEffect2(() => {
+    switch (displaySavedPaymentMethodsCheckbox, customerPaymentMethods) {
+    | (false, _) => {
+        setShowFields(._ => true)
+        setLoadSavedCards(_ => LoadedSavedCards([], true))
+      }
+    | (_, LoadingSavedCards) => ()
+    | (_, LoadedSavedCards(savedPaymentMethods, isGuestCustomer)) => {
+        let defaultPaymentMethod =
+          savedPaymentMethods->Js.Array2.find(savedCard => savedCard.defaultPaymentMethodSet)
+
+        let savedCardsWithoutDefaultPaymentMethod =
+          savedPaymentMethods->Js.Array2.filter(savedCard => {
+            !savedCard.defaultPaymentMethodSet
+          })
+
+        let finalSavedPaymentMethods = switch defaultPaymentMethod {
+        | Some(defaultPaymentMethod) =>
+          [defaultPaymentMethod]->Js.Array2.concat(savedCardsWithoutDefaultPaymentMethod)
+        | None => savedCardsWithoutDefaultPaymentMethod
+        }
+
+        setSavedMethods(_ => finalSavedPaymentMethods)
         setLoadSavedCards(_ =>
-          savedCards->Js.Array2.length == 0
+          finalSavedPaymentMethods->Js.Array2.length == 0
             ? NoResult(isGuestCustomer)
-            : LoadedSavedCards(savedCards, isGuestCustomer)
+            : LoadedSavedCards(finalSavedPaymentMethods, isGuestCustomer)
         )
-        setShowFields(.prev => savedCards->Js.Array2.length == 0 || prev)
+        setShowFields(.prev => finalSavedPaymentMethods->Js.Array2.length == 0 || prev)
       }
-    | NoResult(isGuestCustomer) => {
+    | (_, NoResult(isGuestCustomer)) => {
         setLoadSavedCards(_ => NoResult(isGuestCustomer))
         setShowFields(._ => true)
       }
     }
 
     None
-  }, [customerPaymentMethods])
-
-  React.useEffect1(() => {
-    if displaySavedPaymentMethodsCheckbox {
-      setShowFields(._ => true)
-      setLoadSavedCards(_ => LoadedSavedCards([], true))
-    }
-    None
-  }, [displaySavedPaymentMethodsCheckbox])
+  }, (customerPaymentMethods, displaySavedPaymentMethodsCheckbox))
 
   React.useEffect1(() => {
     let defaultPaymentMethod =
-      savedMethods
-      ->Js.Array2.find(savedMethod => savedMethod.defaultPaymentMethodSet)
+      savedMethods->Js.Array2.find(savedMethod => savedMethod.defaultPaymentMethodSet)
 
     let isSavedMethodsEmpty = savedMethods->Js.Array2.length === 0