skip captcha on dev mode and refetch setting on phone change (#848)

* skip captcha on dev mode and refetch setting on phone change

* Update examples/client/Locomotion/src/pages/Profile/Phone.js

Co-authored-by: Omer Gery <[email protected]>

* fetchHideCaptchaSetting

* cr @OmerGery

* Update Phone.js

---------

Co-authored-by: Omer Gery <[email protected]>

examples/client/Locomotion/src/context/onboarding/index.tsx

@@ -16,13 +16,17 @@ interface OnboardingContextInterface {
   navigateBasedOnUser: (user: any) => void,
   requiredOnboarding: any,
   nextScreen: (currentScreen: string) => void,
+  fetchHideCaptchaSetting: () => void,
+  shouldHideCaptcha?: boolean,
 }
 
 export const OnboardingContext = createContext<OnboardingContextInterface>({
   verifyCode: async code => undefined,
   navigateBasedOnUser: user => undefined,
   requiredOnboarding: {},
   nextScreen: (currentScreen: string) => undefined,
+  fetchHideCaptchaSetting: async () => undefined,
+  shouldHideCaptcha: false,
 });
 
 const SCREEN_ORDER = [
@@ -63,7 +67,15 @@ const OnboardingContextProvider = ({ children }: { children: any }) => {
     [MAIN_ROUTES.AVATAR]: false,
     [MAIN_ROUTES.CARD]: false,
   });
+  const [shouldHideCaptcha, setShouldHideCaptcha] = useState(false);
+  const fetchHideCaptchaSetting = async () => {
+    const hideCaptchaSetting = await getSettingByKey(
+      SETTINGS_KEYS.DISABLE_CAPTCHA_UI,
+      true,
+    );
 
+    setShouldHideCaptcha(hideCaptchaSetting);
+  };
   const navigateToScreen = (screen: string) => navigationService.navigate(screen);
 
   const shouldShowCardPage = async () => {
@@ -155,6 +167,8 @@ const OnboardingContextProvider = ({ children }: { children: any }) => {
         navigateBasedOnUser,
         requiredOnboarding,
         nextScreen,
+        fetchHideCaptchaSetting,
+        shouldHideCaptcha,
       }}
     >
       {children}

examples/client/Locomotion/src/context/settings/index.js

@@ -24,9 +24,9 @@ const useSettings = () => {
   const [showPrice, setShowPrice] = useState(false);
 
 
-  const getSettingByKey = async (key) => {
+  const getSettingByKey = async (key, invalidateCache = false) => {
     let value = await StorageService.get(key);
-    if (value === undefined) {
+    if (value === undefined || invalidateCache) {
       ({ value } = await settingsApi.getByKey(key));
       await StorageService.save({
         [key]: value,

examples/client/Locomotion/src/pages/DevPage/index.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { ScrollView } from 'react-native-gesture-handler';
 import Config from 'react-native-config';
+import { OnboardingContext } from '../../context/onboarding';
 import TextInput from '../../Components/TextInput';
 import { NavButton, ButtonText } from '../Profile/SaveButton/styles';
 import AppSettings from '../../services/app-settings';
@@ -15,6 +16,7 @@ const DevSettingPage = () => {
   const [operationId, setOperationId] = useState(Config.OPERATION_ID);
   const [serverUrl, setServerUrl] = useState(Config.SERVER_HOST);
   const [stripeKey, setStripeKey] = useState(Config.STRIPE_PUBLISHER_KEY);
+  const { fetchHideCaptchaSetting } = useContext(OnboardingContext);
   return (
     <PageContainer>
       <PageHeader
@@ -53,8 +55,9 @@ const DevSettingPage = () => {
       />
       <NavButton
         testID="saveButton"
-        onPress={() => {
-          AppSettings.setSettings({ serverUrl, operationId, stripeKey });
+        onPress={async () => {
+          await AppSettings.setSettings({ serverUrl, operationId, stripeKey });
+          await fetchHideCaptchaSetting();
           navigationService.goBack();
         }}
       >

examples/client/Locomotion/src/pages/Profile/Phone.js

@@ -21,32 +21,22 @@ import AppSettings from '../../services/app-settings';
 import * as NavigationService from '../../services/navigation';
 import { PageContainer, ContentContainer } from '../styles';
 import Auth from '../../services/auth';
-import SETTINGS_KEYS from '../../context/settings/keys';
 
 
 const Phone = ({ navigation }) => {
-  const { nextScreen } = useContext(OnboardingContext);
+  const { nextScreen, shouldHideCaptcha, fetchHideCaptchaSetting } = useContext(OnboardingContext);
   const { updateState, user, onLogin } = useContext(UserContext);
   const [showErrorText, setShowErrorText] = useState(false);
   const [renderId, setRenderId] = useState(0);
   const [isInvalid, setIsInvalid] = useState(true);
   const recaptchaRef = useRef(null);
   const [captchaToken, setCaptchaToken] = useState(null);
   const [isLoadingSaveButton, setIsLoadingSaveButton] = useState(false);
-  const [shouldHideCaptcha, setShouldHideCaptcha] = useState(false);
-  const { getSettingByKey } = settings.useContainer();
-  const fetchHideCaptchaSetting = async () => {
-    const hideCaptchaSetting = await getSettingByKey(
-      SETTINGS_KEYS.DISABLE_CAPTCHA_UI,
-    );
-    Mixpanel.setEvent('Fetched hide captcha setting', { hideCaptchaSetting });
-    setShouldHideCaptcha(hideCaptchaSetting);
-  };
+
   useEffect(() => {
     fetchHideCaptchaSetting();
   }, []);
 
-
   const onVerifyCaptcha = async (verifiedCaptchaToken) => {
     Mixpanel.setEvent('Captcha Verified successfully', { verifiedCaptchaToken });
     setCaptchaToken(verifiedCaptchaToken);
@@ -94,7 +84,9 @@ const Phone = ({ navigation }) => {
   };
   useEffect(() => {
     if (isLoadingSaveButton) {
-      if (!shouldHideCaptcha && Config.CAPTCHA_KEY && recaptchaRef.current) {
+      if (
+        !shouldHideCaptcha && Config.CAPTCHA_KEY && recaptchaRef.current && !isDebugPhoneNumber()
+      ) {
         recaptchaRef.current.open();
       } else {
         Mixpanel.setEvent('Submit phone number, without captcha , (Config.CAPTCHA_KEY is not defined)');