feat: full screen & modal view

.husky/commit-msg

@@ -1,5 +1,4 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+
 
 BRANCH_NAME=$(git branch | grep '*' | sed 's/* //')
 

package.json

@@ -70,6 +70,7 @@
     "@tsconfig/react-native": "^3.0.0",
     "@types/jest": "^29.2.1",
     "@types/react": "^18.2.6",
+    "@types/react-refresh": "^0",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "babel-loader": "^9.1.3",
@@ -97,6 +98,7 @@
     "react-native-bundle-visualizer": "^3.1.3",
     "react-native-dotenv": "^3.4.11",
     "react-native-web": "^0.19.12",
+    "react-refresh": "^0.14.2",
     "react-test-renderer": "18.3.1",
     "rescript": "11",
     "rescript-react-native": "^0.73.1",

reactNativeWeb/webpack.config.js

@@ -7,13 +7,12 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const appDirectory = path.resolve(__dirname);
+
 const { presets, plugins } = require(`${appDirectory}/babel.config.js`);
 const isDevelopment = process.env.NODE_ENV == 'development';
 const repoVersion = require("./version.json").version;
 const majorVersion = "v" + repoVersion.split(".")[0];
 const repoPublicPath = isDevelopment ? `` : `/mobile/${repoVersion}/mobile/${majorVersion}`;
-
-// console.log('dev mode --- >', isDevelopment);
 const compileNodeModules = [
   // Add every react-native package that needs compiling
   // 'react-native-gesture-handler',

src/components/common/CustomView.res

@@ -1,6 +1,7 @@
 open ReactNative
 open Style
 type modalPosition = [#center | #top | #bottom]
+
 @react.component
 let make = (
   ~onDismiss=() => (),
@@ -10,12 +11,16 @@ let make = (
   ~bottomModalWidth=100.->pct,
   (),
 ) => {
+  let (screenType, _) = DimensionHook.useDimension()
+  let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
+
   let modalPosStyle = array([
     viewStyle(~flex=1., ~width=100.->pct, ~height=100.->pct, ~alignItems=#center, ()),
-    switch modalPosition {
-    | #center => viewStyle(~alignItems=#center, ~justifyContent=#center, ())
-    | #top => viewStyle(~alignItems=#center, ~justifyContent=#"flex-start", ())
-    | #bottom => viewStyle(~alignItems=#center, ~justifyContent=#"flex-end", ())
+    switch (modalPosition, screenType) {
+    | (_, Medium | Large) => viewStyle(~alignItems=#center, ~justifyContent=#center, ())
+    | (#center, _) => viewStyle(~alignItems=#center, ~justifyContent=#center, ())
+    | (#top, _) => viewStyle(~alignItems=#center, ~justifyContent=#"flex-start", ())
+    | (#bottom, _) => viewStyle(~alignItems=#center, ~justifyContent=#"flex-end", ())
     },
   ])
 
@@ -25,11 +30,51 @@ let make = (
   | _ => true
   }
 
+  let sheetStyle = array([
+    viewStyle(
+      ~width=bottomModalWidth,
+      ~borderRadius=15.,
+      ~borderBottomLeftRadius=0.,
+      ~borderBottomRightRadius=0.,
+      ~overflow=#hidden,
+      ~alignItems=#center,
+      ~justifyContent=#center,
+      (),
+    ),
+    switch (screenType, nativeProp.configuration.fullScreenModalView) {
+    | (Small, false) => viewStyle(~borderBottomLeftRadius=0., ~borderBottomRightRadius=0., ())
+    | (_, false) =>
+      viewStyle(
+        ~borderBottomLeftRadius=15.,
+        ~borderBottomRightRadius=15.,
+        ~maxWidth=600.->dp,
+        ~maxHeight=95.->pct,
+        (),
+      )
+    | (_, true) =>
+      viewStyle(
+        ~flex=1.,
+        ~borderRadius=0.,
+        ~maxWidth=100.0->pct,
+        ~maxHeight=100.->pct,
+        ~alignContent=#center,
+        (),
+      )
+    },
+  ])
   //  let (locationY, setLocationY) = React.useState(_ => 0.)
 
   <View style=modalPosStyle>
     <CustomTouchableOpacity
-      style={viewStyle(~flex=1., ~width=100.->pct, ~flexGrow=1., ())}
+      style={viewStyle(
+        ~flex=1.,
+        ~width=100.->pct,
+        ~height=100.->pct,
+        ~flexGrow=1.,
+        ~position=#absolute,
+        ~top=0.->dp,
+        (),
+      )}
       disabled=disableClickOutside
       onPress={_ => {
         if closeOnClickOutSide {
@@ -44,18 +89,7 @@ let make = (
     //       onDismiss()
     //     }
     //   }}>
-    <View
-      style={viewStyle(
-        ~width=bottomModalWidth,
-        ~borderRadius=15.,
-        ~borderBottomLeftRadius=0.,
-        ~borderBottomRightRadius=0.,
-        ~overflow=#hidden,
-        ~maxHeight=95.->pct,
-        ~alignItems=#center,
-        ~justifyContent=#center,
-        (),
-      )}>
+    <View style={sheetStyle}>
       <SafeAreaView />
       {children}
     </View>

src/hooks/DimensionHook.res

@@ -0,0 +1,27 @@
+open ReactNative
+type screenType = Small | Medium | Large
+
+let useDimension = () => {
+  let (screenType, setScreenType) = React.useState(() => Small)
+
+  let handleDimensionChange = _ => {
+    let width = Dimensions.get(#window).width
+    if width < 640. {
+      setScreenType(_ => Small)
+    } else if width > 640. && width < 786. {
+      setScreenType(_ => Medium)
+    } else if width > 768. {
+      setScreenType(_ => Large)
+    }
+  }
+  React.useEffect0(() => {
+    let subscription = Dimensions.addEventListener(#change, handleDimensionChange)
+    handleDimensionChange()
+    Some(
+      () => {
+        subscription->EventSubscription.remove
+      },
+    )
+  })
+  (screenType, Dimensions.get(#window))
+}

src/routes/FullScreenSheetWrapper.res

@@ -4,6 +4,10 @@ open Style
 @react.component
 let make = (~children) => {
   let (loading, setLoading) = React.useContext(LoadingContext.loadingContext)
+  let (screenType, _) = DimensionHook.useDimension()
+  let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
+  let (screenType, _) = DimensionHook.useDimension()
+  let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext)
 
   let handleSuccessFailure = AllPaymentHooks.useHandleSuccessFailure()
   let onModalClose = React.useCallback0(() => {
@@ -20,51 +24,107 @@ let make = (~children) => {
   let {paymentSheetOverlay} = ThemebasedStyle.useThemeBasedStyle()
 
   let (sheetFlex, _) = React.useState(_ => Animated.Value.create(0.))
-  React.useEffect0(() => {
+  let (sheetOpacity, _) = React.useState(_ => Animated.Value.create(0.))
+  React.useEffect1(() => {
+    switch (screenType, nativeProp.configuration.fullWidth) {
+    | (Small, false) =>
+      Animated.timing(
+        sheetFlex,
+        {
+          toValue: {1.->Animated.Value.Timing.fromRawValue},
+          isInteraction: true,
+          useNativeDriver: false,
+        },
+      )->Animated.start()
+    | (_, _) => sheetFlex->Animated.Value.setValue(1.0)
+    }
+
     Animated.timing(
-      sheetFlex,
+      sheetOpacity,
       {
         toValue: {1.->Animated.Value.Timing.fromRawValue},
+        duration: 400.,
+        delay: 0.,
+        easing: Easing.linear,
         isInteraction: true,
         useNativeDriver: false,
       },
     )->Animated.start()
     None
-  })
+  }, [screenType])
+  }, [screenType])
 
   let (heightPosition, _) = React.useState(_ => Animated.Value.create(0.))
-  React.useEffect1(() => {
+  React.useEffect2(() => {
     if loading == LoadingContext.PaymentCancelled || loading == LoadingContext.PaymentSuccess {
-      Animated.timing(
-        heightPosition,
-        {
-          toValue: {
-            1000.->Animated.Value.Timing.fromRawValue
+      switch (screenType, nativeProp.configuration.fullScreenModalView) {
+      | (Small, false) =>
+        Animated.timing(
+          heightPosition,
+          {
+            toValue: 1000.->Animated.Value.Timing.fromRawValue,
+            isInteraction: true,
+            useNativeDriver: false,
+            duration: 300.,
+            easing: Easing.linear,
           },
-          isInteraction: true,
-          useNativeDriver: false,
-          delay: 0.,
-          duration: 300.,
-          easing: Easing.linear,
-        },
-      )->Animated.start()
+        )->Animated.start(~endCallback=({finished}) => {
+          if finished {
+            sheetFlex->Animated.Value.setValue(0.)
+            setSheetDisplay(_ => false)
+            sheetOpacity->Animated.Value.setValue(0.)
+            heightPosition->Animated.Value.setValue(0.0)
+          }
+        }, ())
+      | (_, _) =>
+        Animated.parallel(
+          [
+            Animated.timing(
+              sheetFlex,
+              {
+                toValue: 0.->Animated.Value.Timing.fromRawValue,
+                isInteraction: true,
+                useNativeDriver: false,
+                duration: 300.,
+              },
+            ),
+            Animated.timing(
+              sheetOpacity,
+              {
+                toValue: 0.->Animated.Value.Timing.fromRawValue,
+                isInteraction: true,
+                useNativeDriver: false,
+                duration: 300.,
+              },
+            ),
+          ],
+          {
+            stopTogether: true,
+          },
+        )->Animated.start()
+      }
     }
     None
-  }, [loading])
-
+  }, (loading, screenType))
   <View
     style={viewStyle(
       ~flex=1.,
       ~alignContent=#"flex-end",
       ~backgroundColor=paymentSheetOverlay,
+      ~justifyContent=sheetJustifyContent,
+      ~paddingTop=modalPaddingTop,
       ~justifyContent=#"flex-end",
-      ~paddingTop=48.->dp,
+      // ~paddingTop=48.->dp,
       (),
     )}>
     <Animated.View
       style={viewStyle(
         ~transform=[translateY(~translateY=heightPosition->Animated.StyleProp.float)],
-        ~flexGrow={sheetFlex->Animated.StyleProp.float},
+        ~flex={sheetFlex->Animated.StyleProp.float},
+        ~opacity={sheetOpacity->Animated.StyleProp.float},
+        ~display=sheetDisplay,
+        ~flex={sheetFlex->Animated.StyleProp.float},
+        ~opacity={sheetOpacity->Animated.StyleProp.float},
         (),
       )}>
       <CustomView onDismiss=onModalClose>

src/types/SdkTypes.res

@@ -248,6 +248,7 @@ type configurationType = {
   placeholder: placeholder,
   netceteraSDKApiKey: option<string>,
   displayDefaultSavedPaymentIcon: bool,
+  fullScreenModalView: bool,
 }
 
 type sdkState =
@@ -865,6 +866,7 @@ let parseConfigurationDict = (configObj, from) => {
       expiryDate: getString(placeholderDict, "expiryDate", "MM / YY"),
       cvv: getString(placeholderDict, "cvv", "CVC"),
     },
+    fullScreenModalView: getBool(configObj, "fullScreenModalView", false),
   }
   configuration
 }