Merge branch 'main' into external-threeDs

src/components/common/CustomButton.res

@@ -71,7 +71,7 @@ let make = (
     | Normal => ("#0048a0", "#0570de")
     | LoadingButton => ("#0048a0", "#0570de")
     | Completed => ("#0048a0", "#0570de")
-    | Disabled => ("#E7EAF1", "#E7EAF1")
+    | Disabled => ("#808080", "#808080")
     }
   }
 
@@ -86,10 +86,10 @@ let make = (
   | Normal => false
   | _ => true
   }
-  let isdisabledColor = switch buttonState {
-  | Disabled => true
-  | _ => false
-  }
+  // let isdisabledColor = switch buttonState {
+  // | Disabled => true
+  // | _ => false
+  // }
 
   let loaderIconColor = switch buttonType {
   | Primary => Some(payNowButtonTextColor)
@@ -163,7 +163,7 @@ let make = (
           ~alignItems=#center,
           ~borderRadius,
           ~overflow=#hidden,
-          ~opacity={isdisabledColor ? 0.6 : 1.},
+          ~opacity=1., //{isdisabledColor ? 0.6 : 1.},
           (),
         ),
       ])}

src/components/common/CustomInput.res

@@ -30,7 +30,7 @@ let make = (
   ~textAlign=None,
   ~onPressIconRight=?,
   ~isValid=true,
-  ~showEyeIconaftersecureTextEntry=true,
+  ~showEyeIconaftersecureTextEntry=false,
   ~borderTopWidth=1.,
   ~borderBottomWidth=1.,
   ~borderLeftWidth=1.,
@@ -50,7 +50,7 @@ let make = (
   let {
     placeholderColor,
     bgColor,
-    focusedTextInputBoderColor,
+    primaryColor,
     errorTextInputColor,
     normalTextInputBoderColor,
     component,
@@ -71,8 +71,8 @@ let make = (
   // let focusedTextInputBoderColor = "rgba(0, 153, 255, 1)"
   // let errorTextInputColor = "rgba(218, 14, 15, 1)"
   // let normalTextInputBoderColor = "rgba(204, 210, 226, 0.75)"
-  let _ = state != "" && secureTextEntry == false && enableCrossIcon
-  let shadwoStyle = enableShadow
+  // let _ = state != "" && secureTextEntry == false && enableCrossIcon
+  let shadowStyle = enableShadow
     ? viewStyle(
         ~elevation,
         ~shadowRadius,
@@ -89,9 +89,7 @@ let make = (
       ? <TextWrapper textType={PlaceholderText}>
           {React.string(heading)}
           {mandatory
-            ? <TextWrapper textType={ErrorText}>
-                {" *"->React.string}
-              </TextWrapper>
+            ? <TextWrapper textType={ErrorText}> {" *"->React.string} </TextWrapper>
             : React.null}
         </TextWrapper>
       : React.null}
@@ -111,15 +109,15 @@ let make = (
           ~height=height->dp,
           ~flexDirection=#row,
           ~borderColor=isValid
-            ? isFocused ? focusedTextInputBoderColor : normalTextInputBoderColor
+            ? isFocused ? primaryColor : normalTextInputBoderColor
             : errorTextInputColor,
           ~width,
           ~paddingHorizontal=13.->dp,
           ~alignItems=#center,
           ~justifyContent=#center,
           (),
         ),
-        shadwoStyle,
+        shadowStyle,
         // bgColor,
       ])}>
       {switch iconLeft {

src/components/common/CustomSelectBox.res

@@ -4,20 +4,20 @@ let make = (~initialIconName, ~updateIconName, ~isSelected, ~fillIcon) => {
   let fill = fillIcon ? Some(primaryColor) : None
 
   switch updateIconName {
-  | "" => <Icon name={initialIconName} height=20. width=20. ?fill />
-  | _ =>
+  | None => <Icon name={initialIconName} height=18. width=18. ?fill />
+  | Some(updateIconName) =>
     <>
       <Icon
         name={initialIconName}
-        height=20.
-        width=20.
+        height=18.
+        width=18.
         ?fill
         style={ReactNative.Style.viewStyle(~display=isSelected ? #flex : #none, ())}
       />
       <Icon
         name={updateIconName}
-        height=20.
-        width=20.
+        height=18.
+        width=18.
         ?fill
         style={ReactNative.Style.viewStyle(~display=isSelected ? #none : #flex, ())}
       />

src/components/common/CustomView.res

@@ -66,74 +66,71 @@ let make = (
 module Wrapper = {
   @react.component
   let make = (~onModalClose, ~width=100.->pct, ~children=React.null) => {
-  let {bgColor} = ThemebasedStyle.useThemeBasedStyle()
+    let {bgColor} = ThemebasedStyle.useThemeBasedStyle()
 
-  let (viewHeight, setViewHeight) = React.useState(_ => 0.)
-  let updateScrollViewHeight = (event: Event.layoutEvent) => {
-    let nativeEvent = Event.LayoutEvent.nativeEvent(event)
-    let vheight =
-      nativeEvent
-      ->JSON.Decode.object
-      ->Option.getOr(Dict.make())
-      ->Dict.get("layout")
-      ->Option.getOr(JSON.Encode.null)
-      ->JSON.Decode.object
-      ->Option.getOr(Dict.make())
-      ->Dict.get("height")
+    let (viewHeight, setViewHeight) = React.useState(_ => 0.)
+    let updateScrollViewHeight = (event: Event.layoutEvent) => {
+      let nativeEvent = Event.LayoutEvent.nativeEvent(event)
+      let vheight =
+        nativeEvent
+        ->JSON.Decode.object
+        ->Option.getOr(Dict.make())
+        ->Dict.get("layout")
+        ->Option.getOr(JSON.Encode.null)
+        ->JSON.Decode.object
+        ->Option.getOr(Dict.make())
+        ->Dict.get("height")
 
-
-    switch vheight {
-    | Some(height) => {
-        let height = height->JSON.Decode.float->Option.getOr(0.)
-        setViewHeight(_ => height +. 90.)
+      switch vheight {
+      | Some(height) => {
+          let height = height->JSON.Decode.float->Option.getOr(0.)
+          setViewHeight(_ => height +. 90.)
+        }
+      | None => ()
       }
-    | None => ()
     }
-  }
 
-  let (heightPosition, _) = React.useState(_ => Animated.Value.create(0.))
-  let setAnimation = _ => {
-    Animated.timing(
-      heightPosition,
-      Animated.Value.Timing.config(
-        ~toValue={
-          viewHeight->Animated.Value.Timing.fromRawValue
-        },
-        ~isInteraction=true,
-        ~useNativeDriver=false,
-        ~delay=0.,
-        ~duration=150.,
-        ~easing=Easing.linear,
-        (),
-      )
-    )->Animated.start()
-  }
+    let (heightPosition, _) = React.useState(_ => Animated.Value.create(0.))
+    let setAnimation = _ => {
+      Animated.timing(
+        heightPosition,
+        Animated.Value.Timing.config(
+          ~toValue={
+            viewHeight->Animated.Value.Timing.fromRawValue
+          },
+          ~isInteraction=true,
+          ~useNativeDriver=false,
+          ~delay=0.,
+          ~duration=150.,
+          ~easing=Easing.linear,
+          (),
+        ),
+      )->Animated.start()
+    }
 
-  React.useEffect(() => {
-    setAnimation()
-    None
-  }, [viewHeight])
+    React.useEffect(() => {
+      setAnimation()
+      None
+    }, [viewHeight])
 
-  <Animated.ScrollView
-    style={array([
-      viewStyle(
-        ~height=heightPosition->Animated.StyleProp.size,
-        ~width,
-        //    ~overflow=#hidden,
-        ~minHeight=250.->dp,
-        ~borderRadius=15.,
-        ~borderBottomLeftRadius=0.,
-        ~borderBottomRightRadius=0.,
-        (),
-      ),
-      bgColor,
-    ])}>
+    <Animated.ScrollView
+      style={array([
+        viewStyle(
+          ~height=heightPosition->Animated.StyleProp.size,
+          ~width,
+          //    ~overflow=#hidden,
+          ~minHeight=250.->dp,
+          ~borderRadius=15.,
+          ~borderBottomLeftRadius=0.,
+          ~borderBottomRightRadius=0.,
+          (),
+        ),
+        bgColor,
+      ])}>
       <ModalHeader onModalClose />
-      <View onLayout=updateScrollViewHeight>
-        {children}
-      </View>
+      <View onLayout=updateScrollViewHeight> {children} </View>
       <Space height={Platform.os == #ios ? 48. : 24.} />
       <LoadingOverlay />
-  </Animated.ScrollView>
+    </Animated.ScrollView>
   }
 }

src/components/common/DynamicFields.res

@@ -278,27 +278,21 @@ let make = (
   ~setIsAllDynamicFieldValid,
   ~setDynamicFieldsJson,
   ~isSaveCardsFlow=false,
-  ~saveCardsData: option<SdkTypes.savedDataType>,
 ) => {
   let localeObject = GetLocale.useGetLocalObj()
   let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
-  let filteredRequiredFields =
-    requiredFields->RequiredFieldsTypes.filterRequiredFields(isSaveCardsFlow, saveCardsData)
 
   let clientTimeZone = Utils.dateTimeFormat().resolvedOptions().timeZone
   let clientCountry = Utils.getClientCountry(clientTimeZone)
 
   let keysValArray =
-    filteredRequiredFields->RequiredFieldsTypes.getKeysValArray(
-      isSaveCardsFlow,
-      clientCountry.isoAlpha2,
-    )
+    requiredFields->RequiredFieldsTypes.getKeysValArray(isSaveCardsFlow, clientCountry.isoAlpha2)
   let (finalJson, setFinalJson) = React.useState(_ => keysValArray)
 
-  React.useEffect2(() => {
+  React.useEffect1(() => {
     setFinalJson(_ => keysValArray)
     None
-  }, (isSaveCardsFlow, saveCardsData))
+  }, [isSaveCardsFlow])
   let (country, setCountry) = React.useState(_ => nativeProp.hyperParams.country)
   React.useEffect1(() => {
     let countryVal =
@@ -323,7 +317,7 @@ let make = (
   }, [finalJson])
 
   let filteredRequiredFieldsFromRendering =
-    filteredRequiredFields->RequiredFieldsTypes.filterDynamicFieldsFromRendering(keysValArray)
+    requiredFields->RequiredFieldsTypes.filterDynamicFieldsFromRendering(keysValArray)
 
   let (statesJson, setStatesJson) = React.useState(_ => None)
 
@@ -373,7 +367,7 @@ let make = (
       {if requiredFieldsInsideBilling->Array.length > 0 {
         <>
           <Space height=24. />
-          <TextWrapper text=localeObject.billingDetails textType={SubheadingBold} />
+          <TextWrapper text=localeObject.billingDetails textType={ModalText} />
           <Space height=8. />
           <Fields
             fields=requiredFieldsInsideBilling

src/components/common/TextWithLine.res

@@ -8,7 +8,7 @@ let make = (~text) => {
       style={viewStyle(
         ~height=1.->dp,
         ~marginHorizontal=10.->dp,
-        ~backgroundColor="hsla(0,0%, 85% , 0.5 )",
+        ~backgroundColor="#CCCCCC",
         ~flex=1.,
         (),
       )}
@@ -18,7 +18,7 @@ let make = (~text) => {
       style={viewStyle(
         ~height=1.->dp,
         ~marginHorizontal=10.->dp,
-        ~backgroundColor="hsla(0,0%, 85% , 0.5 )",
+        ~backgroundColor="#CCCCCC",
         ~flex=1.,
         (),
       )}