Merge pull request Expensify#87181 from Expensify/chuckdries/change-pin-offline

[No QA] Wrap ChangePINPage in FullPageOfflineBlockingView

Author: chuckdries

src/pages/settings/Wallet/ExpensifyCardPage/ChangePINPage.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MagicCodeInput from '@components/MagicCodeInput';
@@ -97,43 +98,45 @@ function ChangePINPageContent({cardID}: {cardID: string}) {
                     setError('');
                 }}
             />
-            <View style={[styles.flexGrow1, styles.ph5]}>
-                <View style={[styles.flex1]}>
-                    <Text style={[styles.textHeadlineH1, styles.mb2]}>{title}</Text>
-
-                    <View style={[styles.mv4, styles.ph11]}>
-                        <MagicCodeInput
-                            key={`pin-${isConfirmStep}`}
-                            autoComplete={CONST.AUTO_COMPLETE_VARIANTS.OFF}
-                            name="pin"
-                            value={currentPIN}
-                            maxLength={CONST.EXPENSIFY_CARD.PIN.LENGTH}
-                            onChangeText={handlePINChange}
-                            hasError={!!error}
-                            autoFocus
-                            secureTextEntry={isPINHidden}
-                        />
-                        {!!error && <Text style={[styles.formError, styles.mt2]}>{error}</Text>}
+            <FullPageOfflineBlockingView>
+                <View style={[styles.flexGrow1, styles.ph5]}>
+                    <View style={[styles.flex1]}>
+                        <Text style={[styles.textHeadlineH1, styles.mb2]}>{title}</Text>
+
+                        <View style={[styles.mv4, styles.ph11]}>
+                            <MagicCodeInput
+                                key={`pin-${isConfirmStep}`}
+                                autoComplete={CONST.AUTO_COMPLETE_VARIANTS.OFF}
+                                name="pin"
+                                value={currentPIN}
+                                maxLength={CONST.EXPENSIFY_CARD.PIN.LENGTH}
+                                onChangeText={handlePINChange}
+                                hasError={!!error}
+                                autoFocus
+                                secureTextEntry={isPINHidden}
+                            />
+                            {!!error && <Text style={[styles.formError, styles.mt2]}>{error}</Text>}
+                        </View>
+
+                        <View style={[styles.flexRow, styles.justifyContentCenter, styles.mv4, styles.alignItemsCenter, styles.w100]}>
+                            <Button
+                                icon={isPINHidden ? icons.Eye : icons.EyeDisabled}
+                                text={isPINHidden ? translate('cardPage.revealPin') : translate('cardPage.hidePin')}
+                                onPress={togglePINVisibility}
+                                medium
+                            />
+                        </View>
                     </View>
 
-                    <View style={[styles.flexRow, styles.justifyContentCenter, styles.mv4, styles.alignItemsCenter, styles.w100]}>
-                        <Button
-                            icon={isPINHidden ? icons.Eye : icons.EyeDisabled}
-                            text={isPINHidden ? translate('cardPage.revealPin') : translate('cardPage.hidePin')}
-                            onPress={togglePINVisibility}
-                            medium
-                        />
-                    </View>
+                    <Button
+                        success
+                        large
+                        text={isConfirmStep ? translate('common.confirm') : translate('common.next')}
+                        onPress={handleSubmit}
+                        style={[styles.mb5]}
+                    />
                 </View>
-
-                <Button
-                    success
-                    large
-                    text={isConfirmStep ? translate('common.confirm') : translate('common.next')}
-                    onPress={handleSubmit}
-                    style={[styles.mb5]}
-                />
-            </View>
+            </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );
 }