feat: added payment method - bancontact card

src/components/elements/CardFormUi.res

@@ -95,8 +95,8 @@ let make = (
             state={cardNumberIsFocus ? cardNumber : cardNumber->String.sliceToEnd(~start=-4)}
             setState={text => onChangeCardNumber(text, expireRef)}
             placeholder={cardNumberIsFocus
-              ? "1234 1234 1234 1234"
-              : "1234 1234 1234 1234"->String.sliceToEnd(~start=-4) ++ "..."}
+              ? Placeholders.cardNumber
+              : Placeholders.cardNumber->String.sliceToEnd(~start=-4) ++ "..."}
             keyboardType=#"number-pad"
             enableCrossIcon=false
             textColor={isCardNumberValid ? component.color : dangerColor}
@@ -142,7 +142,7 @@ let make = (
             reference={Some(expireRef)}
             state=expireDate
             setState={text => onChangeCardExpire(text, cvvRef)}
-            placeholder="MM / YY"
+            placeholder=Placeholders.cardExpiry
             keyboardType=#"number-pad"
             enableCrossIcon=false
             borderTopWidth=0.

src/components/elements/PaymentSheetUi.res

@@ -16,6 +16,7 @@ let make = (
   ~onScanCard,
   ~keyToTrigerButtonClickError,
 ) => {
+  let getScanCardComponent = ScanCard.useScanCardComponent()
   let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
   let isCardNumberValid = isCardNumberValid->Option.getOr(true)
   let isExpireDateValid = isExpireDataValid->Option.getOr(true)
@@ -36,7 +37,6 @@ let make = (
   }
 
   let {
-    primaryColor,
     component,
     dangerColor,
     borderRadius,
@@ -87,49 +87,6 @@ let make = (
     None
   }, [keyToTrigerButtonClickError])
 
-  let getScanCardComponent = (isScanCardAvailable, cardBrand, cardNumber) => {
-    CustomInput.CustomIcon(
-      <View style={array([viewStyle(~flexDirection=#row, ~alignItems=#center, ())])}>
-        <Icon name={cardBrand === "" ? "waitcard" : cardBrand} height=30. width=30. fill="black" />
-        <UIUtils.RenderIf condition={isScanCardAvailable && cardNumber === ""}>
-          {<>
-            <View
-              style={viewStyle(
-                ~backgroundColor=component.borderColor,
-                ~marginLeft=10.->dp,
-                ~marginRight=10.->dp,
-                ~height=80.->pct,
-                ~width=1.->dp,
-                (),
-              )}
-            />
-            <CustomTouchableOpacity
-              style={viewStyle(
-                ~height=100.->pct,
-                ~width=27.5->dp,
-                ~display=#flex,
-                ~alignItems=#"flex-start",
-                ~justifyContent=#center,
-                (),
-              )}
-              onPress={_pressEvent => {
-                ScanCardModule.launchScanCard(scanCardCallback)
-                logger(
-                  ~logType=INFO,
-                  ~value="Launch",
-                  ~category=USER_EVENT,
-                  ~eventName=SCAN_CARD,
-                  (),
-                )
-              }}>
-              <Icon name={"CAMERA"} height=25. width=25. fill=primaryColor />
-            </CustomTouchableOpacity>
-          </>}
-        </UIUtils.RenderIf>
-      </View>,
-    )
-  }
-
   <ErrorBoundary level=FallBackScreen.Screen rootTag=nativeProp.rootTag>
     <View style={viewStyle(~width=100.->pct, ~borderRadius, ())}>
       <View style={viewStyle(~width=100.->pct, ())}>
@@ -151,7 +108,12 @@ let make = (
           borderBottomRightRadius=0.
           textColor={isCardNumberValid ? component.color : dangerColor}
           enableCrossIcon=false
-          iconRight={getScanCardComponent(ScanCardModule.isAvailable, cardBrand, cardNumber)}
+          iconRight={getScanCardComponent(
+            ~isScanCardAvailable=ScanCardModule.isAvailable,
+            ~cardBrand,
+            ~cardNumber,
+            ~onScanCard=scanCardCallback,
+          )}
           onFocus={() => {
             setCardNumberIsFocus(_ => true)
             onChangeCardNumber(cardNumber, nullRef)

src/hooks/ScanCard.res

@@ -0,0 +1,50 @@
+open ReactNative
+open Style
+
+/**
+Hook returns an icon (`React.element`) for card brand.
+
+Additonaly, returns the `scan-card` button (if feature is available for the platform).
+*/
+let useScanCardComponent = () => (~isScanCardAvailable, ~cardBrand, ~cardNumber, ~onScanCard) => {
+  let {
+    primaryColor,
+    component,
+  } = ThemebasedStyle.useThemeBasedStyle()
+  let logger = LoggerHook.useLoggerHook()
+
+  CustomInput.CustomIcon(
+    <View style={array([viewStyle(~flexDirection=#row, ~alignItems=#center, ())])}>
+      <Icon name={cardBrand === "" ? "waitcard" : cardBrand} height=30. width=30. fill="black" />
+      <UIUtils.RenderIf condition={isScanCardAvailable && cardNumber === ""}>
+        {<>
+          <View
+            style={viewStyle(
+              ~backgroundColor=component.borderColor,
+              ~marginLeft=10.->dp,
+              ~marginRight=10.->dp,
+              ~height=80.->pct,
+              ~width=1.->dp,
+              (),
+            )}
+          />
+          <TouchableOpacity
+            style={viewStyle(
+              ~height=100.->pct,
+              ~width=27.5->dp,
+              ~display=#flex,
+              ~alignItems=#"flex-start",
+              ~justifyContent=#center,
+              (),
+            )}
+            onPress={_pressEvent => {
+              ScanCardModule.launchScanCard(onScanCard)
+              logger(~logType=INFO, ~value="Launch", ~category=USER_EVENT, ~eventName=SCAN_CARD, ())
+            }}>
+            <Icon name={"CAMERA"} height=25. width=25. fill=primaryColor />
+          </TouchableOpacity>
+        </>}
+      </UIUtils.RenderIf>
+    </View>,
+  )
+}