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)');