Merged PR 40170: Verleng geldigheidsduur toegangscode bij activiteit

Related work items: #137910

Author: frankfe-amsterdam

src/components/features/header/HeaderBase.tsx

@@ -4,6 +4,7 @@ import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context'
 import {HideFromAccessibility} from '@/components/features/accessibility/HideFromAccessibility'
 import {HeaderProps} from '@/components/features/header/types'
 import {Box} from '@/components/ui/containers/Box'
+import {ExtendAccessCodeValidityOnTap} from '@/modules/access-code/components/ExtendAccessCodeValidityOnTap'
 import {useScreen} from '@/store/slices/screen'
 
 type BackgroundColorProp = {
@@ -27,7 +28,9 @@ export const HeaderBase = ({backgroundColor, children}: Props) => {
     <HideFromAccessibility
       hide={isContentHiddenFromAccessibility || isHiddenFromAccessibility}
       style={styles.header}>
-      <Box>{children}</Box>
+      <ExtendAccessCodeValidityOnTap>
+        <Box>{children}</Box>
+      </ExtendAccessCodeValidityOnTap>
     </HideFromAccessibility>
   )
 }

src/components/features/screen/ScreenBase.tsx

@@ -8,6 +8,7 @@ import {ScreenInnerWrapper} from '@/components/features/screen/ScreenInnerWrappe
 import {ScreenWrapper} from '@/components/features/screen/ScreenWrapper'
 import {AlertTopOfScreen} from '@/components/ui/feedback/alert/AlertTopOfScreen'
 import {Gutter} from '@/components/ui/layout/Gutter'
+import {ExtendAccessCodeValidityOnTap} from '@/modules/access-code/components/ExtendAccessCodeValidityOnTap'
 import {DisableScrollProvider} from '@/providers/disableScroll.provider'
 import {useScreen} from '@/store/slices/screen'
 
@@ -59,35 +60,37 @@ export const ScreenBase = ({
 
   return (
     <DisableScrollProvider>
-      <HideFromAccessibility
-        hide={isHiddenFromAccessibility}
-        style={styles.screen}
-        testID={testID}>
-        {!isOutsideNavigation && !!bottomSheet && <ScreenHeader />}
-        {stickyHeader}
-        {!!hasStickyAlert && <AlertTopOfScreen />}
+      <ExtendAccessCodeValidityOnTap>
         <HideFromAccessibility
-          hide={isContentHiddenFromAccessibility}
-          style={[styles.scrollViewContent, styles.scrollView]}>
-          <ScreenWrapper
-            scrollViewContentStyle={styles.scrollViewContent}
-            scrollViewStyle={styles.scrollView}
-            trackScroll={trackScroll}
-            {...wrapperProps}>
-            <ScreenInnerWrapper style={styles.content}>
-              {children}
-            </ScreenInnerWrapper>
-          </ScreenWrapper>
+          hide={isHiddenFromAccessibility}
+          style={styles.screen}
+          testID={testID}>
+          {!isOutsideNavigation && !!bottomSheet && <ScreenHeader />}
+          {stickyHeader}
+          {!!hasStickyAlert && <AlertTopOfScreen />}
+          <HideFromAccessibility
+            hide={isContentHiddenFromAccessibility}
+            style={[styles.scrollViewContent, styles.scrollView]}>
+            <ScreenWrapper
+              scrollViewContentStyle={styles.scrollViewContent}
+              scrollViewStyle={styles.scrollView}
+              trackScroll={trackScroll}
+              {...wrapperProps}>
+              <ScreenInnerWrapper style={styles.content}>
+                {children}
+              </ScreenInnerWrapper>
+            </ScreenWrapper>
+          </HideFromAccessibility>
+          {(!!stickyFooter || !!bottomSheet) && (
+            <>
+              <Gutter height="sm" />
+              {stickyFooter}
+              {bottomSheet}
+            </>
+          )}
+          {!!spaceBottom && <View style={{height: spaceBottom}} />}
         </HideFromAccessibility>
-        {(!!stickyFooter || !!bottomSheet) && (
-          <>
-            <Gutter height="sm" />
-            {stickyFooter}
-            {bottomSheet}
-          </>
-        )}
-        {!!spaceBottom && <View style={{height: spaceBottom}} />}
-      </HideFromAccessibility>
+      </ExtendAccessCodeValidityOnTap>
     </DisableScrollProvider>
   )
 }

src/components/ui/gestures/GestureDetector.tsx

@@ -0,0 +1,15 @@
+import {ReactNode} from 'react'
+import {
+  ComposedGesture,
+  GestureDetector as GestureDetectorBase,
+  GestureType,
+} from 'react-native-gesture-handler'
+
+type Props = {
+  children: ReactNode
+  gesture: ComposedGesture | GestureType
+}
+
+export const GestureDetector = (props: Props) => (
+  <GestureDetectorBase {...props} />
+)

src/modules/access-code/components/ExtendAccessCodeValidityOnTap.tsx

@@ -0,0 +1,22 @@
+import {ReactNode, useMemo} from 'react'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import {runOnJS} from 'react-native-reanimated'
+import {useEnterAccessCode} from '@/modules/access-code/hooks/useEnterAccessCode'
+
+type Props = {
+  children: ReactNode
+}
+
+export const ExtendAccessCodeValidityOnTap = ({children}: Props) => {
+  const {onExtendAccessCodeValidity} = useEnterAccessCode()
+
+  const gesture = useMemo(
+    () =>
+      Gesture.Tap().onBegin(() => {
+        runOnJS(onExtendAccessCodeValidity)()
+      }),
+    [onExtendAccessCodeValidity],
+  )
+
+  return <GestureDetector gesture={gesture}>{children}</GestureDetector>
+}

src/modules/access-code/hooks/useEnterAccessCode.ts

@@ -67,11 +67,19 @@ export const useEnterAccessCode = () => {
       return false
     } else {
       return (
-        Math.abs(dayjs(now).diff(dayjs(codeValidTimestamp))) <= 15 * msToMinutes
+        Math.abs(dayjs(now).diff(dayjs(codeValidTimestamp))) <= 5 * msToMinutes
       )
     }
   }, [codeValidTimestamp])
 
+  const onExtendAccessCodeValidity = useCallback(() => {
+    if (!isCodeValid) {
+      return
+    }
+
+    dispatch(setIsCodeValid(true))
+  }, [dispatch, isCodeValid])
+
   const setIsForgotCode = useCallback(
     (forgot: boolean) =>
       dispatch(accessCodeSlice.actions.setIsForgotCode(forgot)),
@@ -93,6 +101,7 @@ export const useEnterAccessCode = () => {
     isEnteringCode,
     isForgotCode,
     onAccessCodeEntered,
+    onExtendAccessCodeValidity,
     setIsEnteringCode,
     setIsForgotCode,
   }