Merge branch 'main' into demo-app-changes

CHANGELOG.md

@@ -1,3 +1,15 @@
+# [0.62.0](https://github.com/juspay/hyperswitch-web/compare/v0.61.2...v0.62.0) (2024-06-11)
+
+
+### Bug Fixes
+
+* two shimmers issue fixed ([#424](https://github.com/juspay/hyperswitch-web/issues/424)) ([78ba856](https://github.com/juspay/hyperswitch-web/commit/78ba8561e85e7dbf9f7257337b155265295d7392))
+
+
+### Features
+
+* crypto currency network added ([#403](https://github.com/juspay/hyperswitch-web/issues/403)) ([24f7297](https://github.com/juspay/hyperswitch-web/commit/24f72972e7faa45edc77f7e75248ca9c8f3334d8))
+
 ## [0.61.2](https://github.com/juspay/hyperswitch-web/compare/v0.61.1...v0.61.2) (2024-06-07)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "main": "index.js",
   "private": true,
   "dependencies": {

src/BrowserSpec.res

@@ -32,9 +32,9 @@ let broswerInfo = () => {
           "text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8"->JSON.Encode.string,
         ),
         ("language", navigator.language->JSON.Encode.string),
-        ("color_depth", colorDepth->Belt.Int.toFloat->JSON.Encode.float),
-        ("screen_height", screen.height->Belt.Int.toFloat->JSON.Encode.float),
-        ("screen_width", screen.width->Belt.Int.toFloat->JSON.Encode.float),
+        ("color_depth", colorDepth->Int.toFloat->JSON.Encode.float),
+        ("screen_height", screen.height->Int.toFloat->JSON.Encode.float),
+        ("screen_width", screen.width->Int.toFloat->JSON.Encode.float),
         ("time_zone", date.getTimezoneOffset()->JSON.Encode.float),
         ("java_enabled", true->JSON.Encode.bool),
         ("java_script_enabled", true->JSON.Encode.bool),

src/CardUtils.res

@@ -71,8 +71,8 @@ type options = {timeZone: string}
 type dateTimeFormat = {resolvedOptions: unit => options}
 @val @scope("Intl") external dateTimeFormat: unit => dateTimeFormat = "DateTimeFormat"
 
-let toInt = val => val->Belt.Int.fromString->Option.getOr(0)
-let toString = val => val->Belt.Int.toString
+let toInt = val => val->Int.fromString->Option.getOr(0)
+let toString = val => val->Int.toString
 
 let getQueryParamsDictforKey = (searchParams, keyName) => {
   let dict = Dict.make()
@@ -206,7 +206,7 @@ let getExpiryDates = val => {
   let date = Date.make()->Date.toISOString
   let (month, year) = splitExpiryDates(val)
   let (_, currentYear) = getCurrentMonthAndYear(date)
-  let prefix = currentYear->Belt.Int.toString->String.slice(~start=0, ~end=2)
+  let prefix = currentYear->Int.toString->String.slice(~start=0, ~end=2)
   (month, `${prefix}${year}`)
 }
 let formatExpiryToTwoDigit = expiry => {
@@ -269,7 +269,7 @@ let getCardBrand = cardNumber => {
         isin
         ->String.replaceRegExp(%re("/[^\d]/g"), "")
         ->String.substring(~start=0, ~end=6)
-        ->Belt.Int.fromString
+        ->Int.fromString
         ->Option.getOr(0)
 
       let range = cardRanges->Array.map(cardRange => {
@@ -317,12 +317,11 @@ let calculateLuhn = value => {
     ->Array.map(item => {
       let val = item->toInt
       let double = val * 2
-      let str = double->Belt.Int.toString
+      let str = double->Int.toString
       let arr = str->String.split("")
 
       switch (arr[0], arr[1]) {
-      | (Some(first), Some(second)) if double > 9 =>
-        (first->toInt + second->toInt)->Belt.Int.toString
+      | (Some(first), Some(second)) if double > 9 => (first->toInt + second->toInt)->Int.toString
       | _ => str
       }
     })

src/Components/AccordionContainer.res

@@ -19,7 +19,7 @@ module Loader = {
           : ""
         <div
           className={`AccordionItem flex flex-row gap-3 animate-pulse cursor-default place-items-center`}
-          key={i->Belt.Int.toString}
+          key={i->Int.toString}
           style={
             minWidth: "80px",
             minHeight: "60px",
@@ -131,7 +131,7 @@ let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
         let isActive = payOption.paymentMethodName == selectedOption
         let borderRadiusStyle = getBorderRadiusStyleForCardOptionDetails(i)
         <Accordion
-          key={i->Belt.Int.toString}
+          key={i->Int.toString}
           paymentOption=payOption
           isActive
           checkoutEle
@@ -149,7 +149,7 @@ let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
           let isActive = payOption.paymentMethodName == selectedOption
           let borderRadiusStyle = getBorderRadiusStyleForDropDownOptionDetails(i)
           <Accordion
-            key={i->Belt.Int.toString}
+            key={i->Int.toString}
             paymentOption=payOption
             isActive
             checkoutEle

src/Components/CryptoCurrencyNetworks.res

@@ -0,0 +1,41 @@
+@react.component
+let make = () => {
+  open DropdownField
+  let currencyVal = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCurrency)
+  let {config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let (cryptoCurrencyNetworks, setCryptoCurrencyNetworks) = Recoil.useRecoilState(
+    RecoilAtoms.cryptoCurrencyNetworks,
+  )
+
+  let dropdownOptions =
+    Utils.currencyNetworksDict
+    ->Dict.get(currencyVal)
+    ->Option.getOr([])
+    ->Array.map(item => {
+      label: Utils.toSpacedUpperCase(~str=item, ~delimiter="_"),
+      value: item,
+    })
+
+  let initialValue = (
+    dropdownOptions
+    ->Array.get(0)
+    ->Option.getOr({
+      label: "",
+      value: "",
+    })
+  ).value
+
+  React.useEffect(() => {
+    setCryptoCurrencyNetworks(_ => initialValue)
+    None
+  }, [initialValue])
+
+  <DropdownField
+    appearance=config.appearance
+    fieldName=localeString.currencyNetwork
+    value=cryptoCurrencyNetworks
+    setValue=setCryptoCurrencyNetworks
+    disabled=false
+    options=dropdownOptions
+  />
+}

src/Components/DynamicFields.res

@@ -326,7 +326,6 @@ let make = (
           key={`outside-billing-${index->Int.toString}`}
           className="flex flex-col w-full place-content-between"
           style={
-            marginTop: index !== 0 || paymentMethod === "card" ? themeObj.spacingGridColumn : "",
             gridColumnGap: themeObj.spacingGridRow,
           }>
           {switch item {
@@ -457,6 +456,7 @@ let make = (
                 optionalRequiredFields={Some(requiredFields)}
               />
             </>
+          | CryptoCurrencyNetworks => <CryptoCurrencyNetworks />
           | Email
           | InfoElement
           | Country
@@ -760,6 +760,7 @@ let make = (
                 | ShippingAddressPincode
                 | ShippingAddressState
                 | ShippingAddressCountry(_)
+                | CryptoCurrencyNetworks
                 | None => React.null
                 }}
               </div>

src/Components/Loader.res

@@ -10,10 +10,10 @@ let make = (~showText=true) => {
           size=52
           style={
             animation: "slowShow 1.5s ease-in-out infinite",
-            animationDelay: {((i + 1) * 180)->Belt.Int.toString ++ "ms"},
+            animationDelay: {((i + 1) * 180)->Int.toString ++ "ms"},
           }
           name=item
-          key={i->Belt.Int.toString}
+          key={i->Int.toString}
         />
       })
       ->React.array}

src/Components/SavedMethods.res

@@ -60,7 +60,7 @@ let make = (
       }
       let isActive = paymentTokenVal == obj.paymentToken
       <SavedCardItem
-        key={i->Belt.Int.toString}
+        key={i->Int.toString}
         setPaymentToken
         isActive
         paymentItem=obj

src/Components/SurchargeUtils.res

@@ -90,7 +90,7 @@ let useOneClickWalletsMessageGetter = (~paymentMethodListValue) => {
           </>
         let msgToConcat = if index === 0 {
           myMsg
-        } else if index === oneClickWalletsArr->Belt.Array.length - 1 {
+        } else if index === oneClickWalletsArr->Array.length - 1 {
           <>
             {React.string(`${Utils.nbsp}${localeString.\"and"}${Utils.nbsp}`)}
             {myMsg}

src/LocaleStrings/ArabicLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `انتهت صلاحية هذه البطاقة`,
   cardHeader: `معلومات البطاقة`,
   cardBrandConfiguredErrorText: str => `${str} غير مدعوم في الوقت الحالي.`,
+  currencyNetwork: `شبكات العملات`,
 }

src/LocaleStrings/CatalanLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Aquesta targeta ha caducat`,
   cardHeader: `Informació de la targeta`,
   cardBrandConfiguredErrorText: str => `${str} no està suportat en aquest moment.`,
+  currencyNetwork: `Xarxes de Monedes`,
 }

src/LocaleStrings/DeutschLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Diese Karte ist abgelaufen`,
   cardHeader: `Kartendaten`,
   cardBrandConfiguredErrorText: str => `${str} wird derzeit nicht unterstützt.`,
+  currencyNetwork: `Währungsnetzwerke`,
 }

src/LocaleStrings/DutchLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Deze kaart is verlopen`,
   cardHeader: `Kaartinformatie`,
   cardBrandConfiguredErrorText: str => `${str} wordt op dit moment niet ondersteund.`,
+  currencyNetwork: `Valutanetwerken`,
 }

src/LocaleStrings/EnglishGBLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `This card has expired`,
   cardHeader: `Card information`,
   cardBrandConfiguredErrorText: str => `${str} is not supported at the moment.`,
+  currencyNetwork: `Currency Networks`,
 }

src/LocaleStrings/EnglishLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `This card has expired`,
   cardHeader: `Card information`,
   cardBrandConfiguredErrorText: str => `${str} is not supported at the moment.`,
+  currencyNetwork: `Currency Networks`,
 }

src/LocaleStrings/FrenchBelgiumLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Cette carte a expiré`,
   cardHeader: `Informations de carte`,
   cardBrandConfiguredErrorText: str => `${str} n'est pas pris en charge pour le moment.`,
+  currencyNetwork: `Réseaux Monétaires`,
 }

src/LocaleStrings/FrenchLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Cette carte a expiré`,
   cardHeader: `Informations de carte`,
   cardBrandConfiguredErrorText: str => `${str} n'est pas pris en charge pour le moment.`,
+  currencyNetwork: `Réseaux Monétaires`,
 }

src/LocaleStrings/HebrewLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `הכרטיס הזה פג תוקף`,
   cardHeader: `מידע כרטיס`,
   cardBrandConfiguredErrorText: str => `${str} לא נתמך כרגע.`,
+  currencyNetwork: `רשתות מטבעות`,
 }

src/LocaleStrings/ItalianLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Questa carta è scaduta`,
   cardHeader: `Informazioni sulla carta`,
   cardBrandConfiguredErrorText: str => `${str} non è supportato al momento.`,
+  currencyNetwork: `Reti Valutarie`,
 }

src/LocaleStrings/JapaneseLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `このカードは期限切れです`,
   cardHeader: `カード情報`,
   cardBrandConfiguredErrorText: str => `${str} は現在サポートされていません。`,
+  currencyNetwork: `通貨ネットワーク`,
 }

src/LocaleStrings/LocaleStringTypes.res

@@ -73,4 +73,5 @@ type localeStrings = {
   cardExpiredText: string,
   cardHeader: string,
   cardBrandConfiguredErrorText: string => string,
+  currencyNetwork: string,
 }

src/LocaleStrings/PolishLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Ta karta wygasła`,
   cardHeader: `Informacje o karcie`,
   cardBrandConfiguredErrorText: str => `${str} nie jest obecnie obsługiwany.`,
+  currencyNetwork: `Sieci Walutowe`,
 }

src/LocaleStrings/PortugueseLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Este cartão expirou`,
   cardHeader: `Informações do cartão`,
   cardBrandConfiguredErrorText: str => `${str} não é suportado no momento.`,
+  currencyNetwork: `Redes de Moeda`,
 }

src/LocaleStrings/RussianLocale.res

@@ -86,4 +86,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHeader: `Информация о карте`,
   cardBrandConfiguredErrorText: str =>
     `${str} в данный момент не поддерживается.`,
+  currencyNetwork: `Валютные сети`,
 }

src/LocaleStrings/SpanishLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Esta tarjeta ha caducado`,
   cardHeader: `Información de la tarjeta`,
   cardBrandConfiguredErrorText: str => `${str} no está soportado en este momento.`,
+  currencyNetwork: `Redes de Divisas`,
 }

src/LocaleStrings/SwedishLocale.res

@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Detta kort har gått ut`,
   cardHeader: `Kortinformation`,
   cardBrandConfiguredErrorText: str => `${str} stöds inte för tillfället.`,
+  currencyNetwork: `Valutanätverk`,
 }

src/PaymentElement.res

@@ -9,6 +9,7 @@ let cardsToRender = (width: int) => {
 }
 @react.component
 let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mode) => {
+  let divRef = React.useRef(Nullable.null)
   let sessionsObj = Recoil.useRecoilValueFromAtom(sessions)
   let {
     showCardFormByDefault,
@@ -25,7 +26,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let (walletOptions, setWalletOptions) = React.useState(_ => [])
   let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
 
-  let setPaymentMethodListValue = Recoil.useSetRecoilState(PaymentUtils.paymentMethodListValue)
+  let (paymentMethodListValue, setPaymentMethodListValue) = Recoil.useRecoilState(
+    PaymentUtils.paymentMethodListValue,
+  )
   let (cardsContainerWidth, setCardsContainerWidth) = React.useState(_ => 0)
   let layoutClass = CardUtils.getLayoutClass(layout)
   let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom)
@@ -368,9 +371,15 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       </div>
     </RenderIf>
     {switch paymentMethodList {
-    | LoadError(_) => React.null
+    | LoadError(_) =>
+      <RenderIf condition={paymentMethodListValue.payment_methods->Array.length === 0}>
+        <ErrorBoundary.ErrorTextAndImage divRef level={Top} />
+      </RenderIf>
     | _ =>
-      <RenderIf condition={paymentOptions->Array.length == 0 && walletOptions->Array.length == 0}>
+      <RenderIf
+        condition={!displaySavedPaymentMethods &&
+        paymentOptions->Array.length == 0 &&
+        walletOptions->Array.length == 0}>
         <PaymentElementShimmer />
       </RenderIf>
     }}

src/PaymentOptions.res

@@ -12,7 +12,7 @@ module TabLoader = {
       ->Array.mapWithIndex((_, i) => {
         <div
           className={`Tab flex flex-col gap-3 animate-pulse cursor-default`}
-          key={i->Belt.Int.toString}
+          key={i->Int.toString}
           style={
             minWidth: "5rem",
             overflowWrap: "hidden",
@@ -118,7 +118,7 @@ let make = (
       {cardOptionDetails
       ->Array.mapWithIndex((payOption, i) => {
         let isActive = payOption.paymentMethodName == selectedOption
-        <TabCard key={i->Belt.Int.toString} paymentOption=payOption isActive />
+        <TabCard key={i->Int.toString} paymentOption=payOption isActive />
       })
       ->React.array}
       <TabLoader cardShimmerCount />

src/Payments/ApplePay.res

@@ -288,12 +288,12 @@ let make = (~sessionObj: option<JSON.t>) => {
 
           let billingContact =
             dict
-            ->getDictfromDict("applePayBillingContact")
+            ->getDictFromDict("applePayBillingContact")
             ->ApplePayTypes.billingContactItemToObjMapper
 
           let shippingContact =
             dict
-            ->getDictfromDict("applePayShippingContact")
+            ->getDictFromDict("applePayShippingContact")
             ->ApplePayTypes.shippingContactItemToObjMapper
 
           let requiredFieldsBody = DynamicFieldsUtils.getApplePayRequiredFields(