feat: change button flow. Add validations and make it responsive (#367)

* feat: UserMenu Update. and other validations

* style: responsive

* feat: change send email button flow

* test: saveSubscriptionEmailSuccess

* refactor: SpanUnconfirmedEmail

BREAKING CHANGE: rename functions in UserMenu props in decentraland-ui

src/components/Notifications/NotificationEmailCard/NotificationEmailCard.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useHistory } from 'react-router-dom'
 import { Email } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { objectToSnake } from 'ts-case-convert'
@@ -28,6 +29,7 @@ function NotificationEmailCard(props: Props) {
   } = props
   const [isValidEmail, setIsValidEmail] = useState(true)
   const [email, setEmail] = useState(unconfirmedEmail || emailProp)
+  const history = useHistory()
 
   useEffect(() => {
     if (unconfirmedEmail || emailProp) {
@@ -47,6 +49,7 @@ function NotificationEmailCard(props: Props) {
   const handleOnChangeEmail = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       setEmail(event.target.value)
+      history.replace({ state: {} })
     },
     [setEmail]
   )
@@ -78,11 +81,11 @@ function NotificationEmailCard(props: Props) {
   const buttonText = useMemo(() => {
     if (!emailProp && !unconfirmedEmail && !hasConfirmEmail) {
       return t('settings.notifications.email.button_submit_label')
-    } else if (unconfirmedEmail) {
+    } else if (unconfirmedEmail && unconfirmedEmail === email) {
       return t('settings.notifications.email.button_resend_label')
     }
     return t('settings.notifications.email.button_edit_label')
-  }, [emailProp, unconfirmedEmail, hasConfirmEmail])
+  }, [emailProp, unconfirmedEmail, hasConfirmEmail, email])
 
   return (
     <>
@@ -91,8 +94,11 @@ function NotificationEmailCard(props: Props) {
           <Title variant="h6" data-testid={NOTIFICATION_EMAIL_CARD_TITLE_TEST_ID}>
             {t('settings.notifications.email.title')}
 
-            {(unconfirmedEmail || hasConfirmEmail) && (
-              <SpanUnconfirmedEmail confirmed={hasConfirmEmail} data-testid={NOTIFICATION_EMAIL_CARD_UNCONFIRMED_TEST_ID}>
+            {(hasConfirmEmail || unconfirmedEmail) && (
+              <SpanUnconfirmedEmail
+                confirmed={hasConfirmEmail && !unconfirmedEmail}
+                data-testid={NOTIFICATION_EMAIL_CARD_UNCONFIRMED_TEST_ID}
+              >
                 {hasConfirmEmail ? t('settings.notifications.email.confirmed') : t('settings.notifications.email.pending_approval')}
               </SpanUnconfirmedEmail>
             )}
@@ -121,7 +127,7 @@ function NotificationEmailCard(props: Props) {
           <Button
             variant="contained"
             onClick={handleSaveEmail}
-            disabled={isLoading || email === emailProp}
+            disabled={isLoading || (email === emailProp && !unconfirmedEmail)}
             data-testid={NOTIFICATION_EMAIL_CARD_BUTTON_TEST_ID}
           >
             {isLoading ? <CircularProgress size={20} data-testid={NOTIFICATION_EMAIL_CARD_BUTTON_LOADING_TEST_ID} /> : buttonText}

src/components/Wallets/AccountCard/AccountCard.css

@@ -25,3 +25,10 @@
   opacity: 0;
   cursor: pointer;
 }
+
+@media (max-width: 768px) {
+  .AccountCard.ui.card {
+    min-width: auto;
+    margin: 0 0 12px 0;
+  }
+}

src/components/Wallets/AccountCardContainer/AccountCardContainer.css

@@ -9,3 +9,8 @@
     padding-left: 50px;
   }
 }
+@media (max-width: 768px) {
+  .AccountCardContainer {
+    padding: 0;
+  }
+}

src/modules/subscription/reducer.spec.ts

@@ -218,6 +218,25 @@ describe('when reducing the update of the email subscription success action', ()
       error: null
     })
   })
+
+  describe('and there is an unconfirmed email and the user set to confirm the same email and the already validated before', () => {
+    beforeEach(() => {
+      state = {
+        ...state,
+        email: subscription.email!,
+        unconfirmedEmail,
+        loading: [saveSubscriptionEmailRequest(unconfirmedEmail)]
+      }
+    })
+    it('should return a state with the unconfirmed email undefined and the loading state cleared', () => {
+      expect(subscriptionReducer(state, saveSubscriptionEmailSuccess(state.email))).toEqual({
+        ...state,
+        unconfirmedEmail: undefined,
+        loading: [],
+        error: null
+      })
+    })
+  })
 })
 
 describe('when reducing update of the email subscription failure action', () => {

src/modules/subscription/reducer.ts

@@ -103,10 +103,13 @@ export function subscriptionReducer(state = buildInitialState(), action: Subscri
 
     case SAVE_SUBSCRIPTION_EMAIL_SUCCESS: {
       const { email } = action.payload
-
+      let unconfirmedEmail: string | undefined = email
+      if (state.email === email) {
+        unconfirmedEmail = undefined
+      }
       return {
         ...state,
-        unconfirmedEmail: email,
+        unconfirmedEmail,
         loading: loadingReducer(state.loading, action)
       }
     }

src/modules/subscription/utils.ts

@@ -24,7 +24,9 @@ export const subscriptionGroups: SubscriptionGroups = {
   [SubscriptionGroupKeys.WORLDS]: [
     NotificationType.WORLDS_ACCESS_RESTORED,
     NotificationType.WORLDS_ACCESS_RESTRICTED,
-    NotificationType.WORLDS_MISSING_RESOURCES
+    NotificationType.WORLDS_MISSING_RESOURCES,
+    NotificationType.WORLDS_PERMISSION_GRANTED,
+    NotificationType.WORLDS_PERMISSION_REVOKED
   ]
 }