From d04fa76a7c911e2621a05c79257e092a1d1dbe38 Mon Sep 17 00:00:00 2001
From: Arush <arush.kapoor@juspay.in>
Date: Tue, 12 Mar 2024 17:10:46 +0530
Subject: [PATCH] fix: added ordering for saved payment methods

---
 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