feat: add / remove phone number (#2488)

* chore: file rename * chore: more renaming * feat: add/remove phone number * chore: more rename * chore: fix title --------- Co-authored-by: Nicolas Burtey <[email protected]>
GaloyMoney · Jul 21, 2023 · eb49400 · eb49400
1 parent 053a147
commit eb49400
Show file tree

Hide file tree

Showing 42 changed files with 1,377 additions and 382 deletions.
diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js
@@ -46,10 +46,10 @@ const getStories = () => {
     "./app/components/atomic/galoy-secondary-button/galoy-secondary-button.stories.tsx": require("../app/components/atomic/galoy-secondary-button/galoy-secondary-button.stories.tsx"),
     "./app/components/atomic/galoy-tertiary-button/galoy-tertiary-button.stories.tsx": require("../app/components/atomic/galoy-tertiary-button/galoy-tertiary-button.stories.tsx"),
     "./app/components/balance-header/balance-header.stories.tsx": require("../app/components/balance-header/balance-header.stories.tsx"),
+    "./app/components/button-group/button-group.stories.tsx": require("../app/components/button-group/button-group.stories.tsx"),
     "./app/components/currency-keyboard/currency-keyboard.stories.tsx": require("../app/components/currency-keyboard/currency-keyboard.stories.tsx"),
     "./app/components/custom-modal/custom-modal.stories.tsx": require("../app/components/custom-modal/custom-modal.stories.tsx"),
     "./app/components/menu-select/menu-select.stories.tsx": require("../app/components/menu-select/menu-select.stories.tsx"),
-    "./app/components/button-group/button-group.stories.tsx": require("../app/components/button-group/button-group.stories.tsx"),
     "./app/components/modal-nfc/modal-nfc.stories.tsx": require("../app/components/modal-nfc/modal-nfc.stories.tsx"),
     "./app/components/set-default-account-modal/set-default-account-modal.stories.tsx": require("../app/components/set-default-account-modal/set-default-account-modal.stories.tsx"),
     "./app/components/set-lightning-address-modal/set-lightning-address-modal.stories.tsx": require("../app/components/set-lightning-address-modal/set-lightning-address-modal.stories.tsx"),
@@ -78,10 +78,10 @@ const getStories = () => {
     "./app/screens/get-started-screen/device-account-fail-modal.stories.tsx": require("../app/screens/get-started-screen/device-account-fail-modal.stories.tsx"),
     "./app/screens/get-started-screen/get-started-screen.stories.tsx": require("../app/screens/get-started-screen/get-started-screen.stories.tsx"),
     "./app/screens/home-screen/home-screen.stories.tsx": require("../app/screens/home-screen/home-screen.stories.tsx"),
-    "./app/screens/phone-auth-screen/phone-flow.stories.tsx": require("../app/screens/phone-auth-screen/phone-flow.stories.tsx"),
-    "./app/screens/phone-auth-screen/phone-validation.stories.tsx": require("../app/screens/phone-auth-screen/phone-validation.stories.tsx"),
-    "./app/screens/receive-bitcoin-screen/receive-screen.stories.tsx": require("../app/screens/receive-bitcoin-screen/receive-screen.stories.tsx"),
+    "./app/screens/phone-auth-screen/phone-login-flow.stories.tsx": require("../app/screens/phone-auth-screen/phone-login-flow.stories.tsx"),
+    "./app/screens/phone-auth-screen/phone-login-validation.stories.tsx": require("../app/screens/phone-auth-screen/phone-login-validation.stories.tsx"),
     "./app/screens/receive-bitcoin-screen/qr-view.stories.tsx": require("../app/screens/receive-bitcoin-screen/qr-view.stories.tsx"),
+    "./app/screens/receive-bitcoin-screen/receive-screen.stories.tsx": require("../app/screens/receive-bitcoin-screen/receive-screen.stories.tsx"),
     "./app/screens/redeem-lnurl-withdrawal-screen/redeem-bitcoin-detail-screen.stories.tsx": require("../app/screens/redeem-lnurl-withdrawal-screen/redeem-bitcoin-detail-screen.stories.tsx"),
     "./app/screens/redeem-lnurl-withdrawal-screen/redeem-bitcoin-result-screen.stories.tsx": require("../app/screens/redeem-lnurl-withdrawal-screen/redeem-bitcoin-result-screen.stories.tsx"),
     "./app/screens/send-bitcoin-screen/confirm-destination-modal.stories.tsx": require("../app/screens/send-bitcoin-screen/confirm-destination-modal.stories.tsx"),

diff --git a/app/graphql/generated.gql b/app/graphql/generated.gql
@@ -405,6 +405,7 @@ mutation userEmailDelete {
     }
     me {
       id
+      phone
       email {
         address
         verified
@@ -488,6 +489,39 @@ mutation userPhoneDelete {
     }
     me {
       id
+      phone
+      email {
+        address
+        verified
+        __typename
+      }
+      __typename
+    }
+    __typename
+  }
+}
+
+mutation userPhoneRegistrationInitiate($input: UserPhoneRegistrationInitiateInput!) {
+  userPhoneRegistrationInitiate(input: $input) {
+    errors {
+      message
+      __typename
+    }
+    success
+    __typename
+  }
+}
+
+mutation userPhoneRegistrationValidate($input: UserPhoneRegistrationValidateInput!) {
+  userPhoneRegistrationValidate(input: $input) {
+    errors {
+      message
+      code
+      __typename
+    }
+    me {
+      id
+      phone
       email {
         address
         verified

diff --git a/app/graphql/generated.ts b/app/graphql/generated.ts
@@ -1895,6 +1895,13 @@ export type UserLoginUpgradeMutationVariables = Exact<{
 
 export type UserLoginUpgradeMutation = { readonly __typename: 'Mutation', readonly userLoginUpgrade: { readonly __typename: 'UpgradePayload', readonly success: boolean, readonly authToken?: string | null, readonly errors: ReadonlyArray<{ readonly __typename: 'GraphQLApplicationError', readonly message: string, readonly code?: string | null }> } };
 
+export type UserPhoneRegistrationValidateMutationVariables = Exact<{
+  input: UserPhoneRegistrationValidateInput;
+}>;
+
+
+export type UserPhoneRegistrationValidateMutation = { readonly __typename: 'Mutation', readonly userPhoneRegistrationValidate: { readonly __typename: 'UserPhoneRegistrationValidatePayload', readonly errors: ReadonlyArray<{ readonly __typename: 'GraphQLApplicationError', readonly message: string, readonly code?: string | null }>, readonly me?: { readonly __typename: 'User', readonly id: string, readonly phone?: string | null, readonly email?: { readonly __typename: 'Email', readonly address?: string | null, readonly verified?: boolean | null } | null } | null } };
+
 export type CaptchaRequestAuthCodeMutationVariables = Exact<{
   input: CaptchaRequestAuthCodeInput;
 }>;
@@ -1907,6 +1914,13 @@ export type SupportedCountriesQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type SupportedCountriesQuery = { readonly __typename: 'Query', readonly globals?: { readonly __typename: 'Globals', readonly supportedCountries: ReadonlyArray<{ readonly __typename: 'Country', readonly id: string, readonly supportedAuthChannels: ReadonlyArray<PhoneCodeChannelType> }> } | null };
 
+export type UserPhoneRegistrationInitiateMutationVariables = Exact<{
+  input: UserPhoneRegistrationInitiateInput;
+}>;
+
+
+export type UserPhoneRegistrationInitiateMutation = { readonly __typename: 'Mutation', readonly userPhoneRegistrationInitiate: { readonly __typename: 'SuccessPayload', readonly success?: boolean | null, readonly errors: ReadonlyArray<{ readonly __typename: 'GraphQLApplicationError', readonly message: string }> } };
+
 export type MyLnUpdatesSubscriptionVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -2123,12 +2137,12 @@ export type AccountDeleteMutation = { readonly __typename: 'Mutation', readonly
 export type UserEmailDeleteMutationVariables = Exact<{ [key: string]: never; }>;
 
 
-export type UserEmailDeleteMutation = { readonly __typename: 'Mutation', readonly userEmailDelete: { readonly __typename: 'UserEmailDeletePayload', readonly errors: ReadonlyArray<{ readonly __typename: 'GraphQLApplicationError', readonly message: string }>, readonly me?: { readonly __typename: 'User', readonly id: string, readonly email?: { readonly __typename: 'Email', readonly address?: string | null, readonly verified?: boolean | null } | null } | null } };
+export type UserEmailDeleteMutation = { readonly __typename: 'Mutation', readonly userEmailDelete: { readonly __typename: 'UserEmailDeletePayload', readonly errors: ReadonlyArray<{ readonly __typename: 'GraphQLApplicationError', readonly message: string }>, readonly me?: { readonly __typename: 'User', readonly id: string, readonly phone?: string | null, readonly email?: { readonly __typename: 'Email', readonly address?: string | null, readonly verified?: boolean | null } | null } | null } };
 
 export type UserPhoneDeleteMutationVariables = Exact<{ [key: string]: never; }>;
 
 
-export type UserPhoneDeleteMutation = { readonly __typename: 'Mutation', readonly userPhoneDelete: { readonly __typename: 'UserPhoneDeletePayload', readonly errors: ReadonlyArray<{ readonly __typename: 'GraphQLApplicationError', readonly message: string }>, readonly me?: { readonly __typename: 'User', readonly id: string, readonly email?: { readonly __typename: 'Email', readonly address?: string | null, readonly verified?: boolean | null } | null } | null } };
+export type UserPhoneDeleteMutation = { readonly __typename: 'Mutation', readonly userPhoneDelete: { readonly __typename: 'UserPhoneDeletePayload', readonly errors: ReadonlyArray<{ readonly __typename: 'GraphQLApplicationError', readonly message: string }>, readonly me?: { readonly __typename: 'User', readonly id: string, readonly phone?: string | null, readonly email?: { readonly __typename: 'Email', readonly address?: string | null, readonly verified?: boolean | null } | null } | null } };
 
 export type AccountUpdateDefaultWalletIdMutationVariables = Exact<{
   input: AccountUpdateDefaultWalletIdInput;
@@ -3626,6 +3640,50 @@ export function useUserLoginUpgradeMutation(baseOptions?: Apollo.MutationHookOpt
 export type UserLoginUpgradeMutationHookResult = ReturnType<typeof useUserLoginUpgradeMutation>;
 export type UserLoginUpgradeMutationResult = Apollo.MutationResult<UserLoginUpgradeMutation>;
 export type UserLoginUpgradeMutationOptions = Apollo.BaseMutationOptions<UserLoginUpgradeMutation, UserLoginUpgradeMutationVariables>;
+export const UserPhoneRegistrationValidateDocument = gql`
+    mutation userPhoneRegistrationValidate($input: UserPhoneRegistrationValidateInput!) {
+  userPhoneRegistrationValidate(input: $input) {
+    errors {
+      message
+      code
+    }
+    me {
+      id
+      phone
+      email {
+        address
+        verified
+      }
+    }
+  }
+}
+    `;
+export type UserPhoneRegistrationValidateMutationFn = Apollo.MutationFunction<UserPhoneRegistrationValidateMutation, UserPhoneRegistrationValidateMutationVariables>;
+
+/**
+ * __useUserPhoneRegistrationValidateMutation__
+ *
+ * To run a mutation, you first call `useUserPhoneRegistrationValidateMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUserPhoneRegistrationValidateMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [userPhoneRegistrationValidateMutation, { data, loading, error }] = useUserPhoneRegistrationValidateMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useUserPhoneRegistrationValidateMutation(baseOptions?: Apollo.MutationHookOptions<UserPhoneRegistrationValidateMutation, UserPhoneRegistrationValidateMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UserPhoneRegistrationValidateMutation, UserPhoneRegistrationValidateMutationVariables>(UserPhoneRegistrationValidateDocument, options);
+      }
+export type UserPhoneRegistrationValidateMutationHookResult = ReturnType<typeof useUserPhoneRegistrationValidateMutation>;
+export type UserPhoneRegistrationValidateMutationResult = Apollo.MutationResult<UserPhoneRegistrationValidateMutation>;
+export type UserPhoneRegistrationValidateMutationOptions = Apollo.BaseMutationOptions<UserPhoneRegistrationValidateMutation, UserPhoneRegistrationValidateMutationVariables>;
 export const CaptchaRequestAuthCodeDocument = gql`
     mutation captchaRequestAuthCode($input: CaptchaRequestAuthCodeInput!) {
   captchaRequestAuthCode(input: $input) {
@@ -3700,6 +3758,42 @@ export function useSupportedCountriesLazyQuery(baseOptions?: Apollo.LazyQueryHoo
 export type SupportedCountriesQueryHookResult = ReturnType<typeof useSupportedCountriesQuery>;
 export type SupportedCountriesLazyQueryHookResult = ReturnType<typeof useSupportedCountriesLazyQuery>;
 export type SupportedCountriesQueryResult = Apollo.QueryResult<SupportedCountriesQuery, SupportedCountriesQueryVariables>;
+export const UserPhoneRegistrationInitiateDocument = gql`
+    mutation userPhoneRegistrationInitiate($input: UserPhoneRegistrationInitiateInput!) {
+  userPhoneRegistrationInitiate(input: $input) {
+    errors {
+      message
+    }
+    success
+  }
+}
+    `;
+export type UserPhoneRegistrationInitiateMutationFn = Apollo.MutationFunction<UserPhoneRegistrationInitiateMutation, UserPhoneRegistrationInitiateMutationVariables>;
+
+/**
+ * __useUserPhoneRegistrationInitiateMutation__
+ *
+ * To run a mutation, you first call `useUserPhoneRegistrationInitiateMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUserPhoneRegistrationInitiateMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [userPhoneRegistrationInitiateMutation, { data, loading, error }] = useUserPhoneRegistrationInitiateMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useUserPhoneRegistrationInitiateMutation(baseOptions?: Apollo.MutationHookOptions<UserPhoneRegistrationInitiateMutation, UserPhoneRegistrationInitiateMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UserPhoneRegistrationInitiateMutation, UserPhoneRegistrationInitiateMutationVariables>(UserPhoneRegistrationInitiateDocument, options);
+      }
+export type UserPhoneRegistrationInitiateMutationHookResult = ReturnType<typeof useUserPhoneRegistrationInitiateMutation>;
+export type UserPhoneRegistrationInitiateMutationResult = Apollo.MutationResult<UserPhoneRegistrationInitiateMutation>;
+export type UserPhoneRegistrationInitiateMutationOptions = Apollo.BaseMutationOptions<UserPhoneRegistrationInitiateMutation, UserPhoneRegistrationInitiateMutationVariables>;
 export const MyLnUpdatesDocument = gql`
     subscription myLnUpdates {
   myUpdates {
@@ -4982,6 +5076,7 @@ export const UserEmailDeleteDocument = gql`
     }
     me {
       id
+      phone
       email {
         address
         verified
@@ -5023,6 +5118,7 @@ export const UserPhoneDeleteDocument = gql`
     }
     me {
       id
+      phone
       email {
         address
         verified

diff --git a/app/i18n/en/index.ts b/app/i18n/en/index.ts
@@ -842,7 +842,7 @@ const en: BaseTranslation = {
     learn: "I don't mean to badger you, but there's lot more to learn, dig in...",
     learnToEarn: "Learn to Earn",
   },
-  PhoneInputScreen: {
+  PhoneLoginInitiateScreen: {
     title: "Account set up",
     header: "Enter your phone number, and we'll text you an access code.",
     headerVerify: "Verify you are human",
@@ -858,7 +858,7 @@ const en: BaseTranslation = {
     sms: "Send via SMS",
     whatsapp: "Send via WhatsApp",
   },
-  PhoneValidationScreen: {
+  PhoneLoginValidationScreen: {
     errorLoggingIn: "Error logging in. Did you use the right code?",
     errorTooManyAttempts: "Too many attempts. Please try again later.",
     errorCannotUpgradeToExistingAccount:
@@ -871,6 +871,21 @@ const en: BaseTranslation = {
     sendViaOtherChannel:
       "You selected to receive the code via {channel: string}. You can try receiving via {other: string} instead",
   },
+  PhoneRegistrationInitiateScreen: {
+    title: "Phone set up",
+    header: "Enter your phone number, and we'll text you an access code.",
+    headerVerify: "Verify you are human",
+    errorRequestingCode: "Something went wrong requesting the phone code, please try again later.",
+    errorInvalidPhoneNumber: "Invalid phone number. Are you sure you entered the right number?",
+    errorUnsupportedCountry: "We are unable to support customers in your country.",
+    placeholder: "Phone Number",
+    verify: "Click to Verify",
+    sms: "Send via SMS",
+    whatsapp: "Send via WhatsApp",
+  },
+  PhoneRegistrationValidateScreen: {
+    successTitle: "Phone number confirmed",
+  },
   EmailRegistrationInitiateScreen: {
     title: "Add your email",
     header: "Enter your email address, and we'll send you an access code.",
@@ -880,7 +895,6 @@ const en: BaseTranslation = {
     placeholder: "[email protected]",
   },
   EmailRegistrationValidateScreen: {
-    title: "Code confirmation",
     header: "To confirm your email address, enter the code we just sent you on {email: string}",
     success: "Email {email: string} confirmed successfully",
   },
@@ -891,7 +905,6 @@ const en: BaseTranslation = {
     send: "Send code",
   },
   EmailLoginValidateScreen: {
-    title: "Code confirmation",
     header: "If there is an account attached to {email: string}, you should have received 6 digits code to enter below.\n\nIf you are not receiving anything, it's probably either because this is not the right email, the email is in your spam folder.",
     success: "Email {email: string} confirmed successfully",
   },
@@ -914,6 +927,7 @@ const en: BaseTranslation = {
     close: "Close",
     confirm: "Confirm",
     convert: "Convert",
+    codeConfirmation: "Code Confirmation",
     currency: "Currency",
     currencySyncIssue: "Currency issue. Refresh needed",
     csvExport: "Export transactions as CSV",