Merge pull request #76 from vtex-apps/feature/logout

Feature logout
vtex-apps · Apr 22, 2019 · 0f58b98 · 0f58b98
2 parents 469352f + 4b8dcad
commit 0f58b98
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.26.0] - 2019-04-22
+
+### Added
+
+- `logout` feature
+
 ## [0.25.2] - 2019-04-08
 
 ### Fixed

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "my-account",
   "vendor": "vtex",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "title": "My Account",
   "description": "",
   "mustUpdateAt": "2019-07-09",
@@ -17,7 +17,8 @@
     "vtex.styleguide": "8.x",
     "vtex.profile-form": "2.x",
     "vtex.country-codes": "1.x",
-    "vtex.address-form": "3.x"
+    "vtex.address-form": "3.x",
+    "vtex.react-vtexid": "3.x"
   },
   "builders": {
     "react": "2.x",

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.25.2",
+  "version": "0.26.0",
   "devDependencies": {
     "@types/exenv": "^1.2.0",
     "@vtex/intl-equalizer": "^2.0.1",

diff --git a/react/components/Menu/MenuLinksList.js b/react/components/Menu/MenuLinksList.js
@@ -1,6 +1,8 @@
-import React from 'react'
-import { injectIntl, intlShape } from 'react-intl'
+import React, { Component, Fragment } from 'react'
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl'
 import { ExtensionPoint } from 'render'
+import { AuthService } from 'vtex.react-vtexid'
+import { ModalDialog } from 'vtex.styleguide'
 import MenuLink from './MenuLink'
 
 const links = [
@@ -14,30 +16,70 @@ const links = [
   },
 ]
 
-const MenuLinksList = ({ intl }) => {
-  return (
-    <nav className="vtex-account__menu-links">
-      <ExtensionPoint
-        id="menu-links-before"
-        render={links =>
-          links.map(({ name, path }) => (
-            <MenuLink path={path} name={name} key={name} />
-          ))
-        }
-      />
-      {links.map(({ path, id }) => (
-        <MenuLink path={path} name={intl.formatMessage({ id })} key={id} />
-      ))}
-      <ExtensionPoint
-        id="menu-links-after"
-        render={links =>
-          links.map(({ name, path }) => (
-            <MenuLink path={path} name={name} key={name} />
-          ))
-        }
-      />
-    </nav>
-  )
+class MenuLinksList extends Component {
+
+  state = { isModalOpen: false }
+
+  handleModalToggle = () => {
+    this.setState(prevState => ({ isModalOpen: !prevState.isModalOpen }))
+  }
+
+  render() {
+    const { intl } = this.props
+
+    return (
+      <nav className="vtex-account__menu-links">
+        <ExtensionPoint
+          id="menu-links-before"
+          render={links =>
+            links.map(({ name, path }) => (
+              <MenuLink path={path} name={name} key={name} />
+            ))
+          }
+        />
+        {links.map(({ path, id }) => (
+          <MenuLink path={path} name={intl.formatMessage({ id })} key={id} />
+        ))}
+        <ExtensionPoint
+          id="menu-links-after"
+          render={links =>
+            links.map(({ name, path }) => (
+              <MenuLink path={path} name={name} key={name} />
+            ))
+          }
+        />
+        <AuthService.RedirectLogout returnUrl="/">
+            {({ action: logout }) => (
+              <Fragment>
+                <div
+                  className={`vtex-account_menu-link f6 no-underline db hover-near-black pv5 mv3 pl5 bl bw2 nowrap c-muted-1 b--transparent pointer`}
+                  onClick={this.handleModalToggle}>
+                  <FormattedMessage id="pages.logout" />
+                </div>
+
+                <ModalDialog
+                  centered
+                  confirmation={{
+                    onClick: logout,
+                    label: intl.formatMessage({ id: "pages.logout" }),
+                  }}
+                  cancelation={{
+                    onClick: this.handleModalToggle,
+                    label: intl.formatMessage({ id: "logoutModal.cancel" }),
+                  }}
+                  isOpen={this.state.isModalOpen}
+                  onClose={this.handleModalToggle}
+                  >
+                  <span className="t-heading-5 pa6" >
+                    <FormattedMessage id="logoutModal.title" />
+                  </span>
+                </ModalDialog>
+              </Fragment>
+            )}
+        </AuthService.RedirectLogout>
+      </nav>
+    )
+  }
 }
 
 MenuLinksList.propTypes = {

diff --git a/react/locales/ca.json b/react/locales/ca.json
@@ -6,6 +6,9 @@
   "pages.profile": "Perfil",
   "pages.profileEdit": "Edita Perfil",
   "pages.myAccount": "El meu compte",
+  "pages.logout": "Sortir",
+  "logoutModal.cancel": "Cancel·la",
+  "logoutModal.title": "Segur que voleu sortir?",
   "personalData.redefinePassword": "Modificar contrassenya",
   "personalData.saveData": "Desa els canvis",
   "personalData.password": "Contrassenya",

diff --git a/react/locales/en.json b/react/locales/en.json
@@ -6,6 +6,9 @@
   "pages.profile": "Profile",
   "pages.profileEdit": "Edit Profile",
   "pages.myAccount": "My account",
+  "pages.logout": "Leave",
+  "logoutModal.cancel": "Cancel",
+  "logoutModal.title": "Do you really want to quit?",
   "personalData.redefinePassword": "Redefine password",
   "personalData.saveData": "Save changes",
   "personalData.password": "Password",

diff --git a/react/locales/es.json b/react/locales/es.json
@@ -6,6 +6,9 @@
   "pages.profile": "Perfil",
   "pages.profileEdit": "Editar Perfil",
   "pages.myAccount": "Mi cuenta",
+  "pages.logout": "Salir",
+  "logoutModal.cancel": "Cancelar",
+  "logoutModal.title": "¿Quieres salir?",
   "personalData.redefinePassword": "Modificar contraseña",
   "personalData.saveData": "Guardar cambios",
   "personalData.password": "Contraseña",

diff --git a/react/locales/fr.json b/react/locales/fr.json
@@ -6,6 +6,9 @@
   "pages.profile": "Profil",
   "pages.profileEdit": "Modifier Profil",
   "pages.myAccount": "Mon compte",
+  "pages.logout": "Sortie",
+  "logoutModal.cancel": "Annuler",
+  "logoutModal.title": "Veux-tu vraiment arrêter de fumer?",
   "personalData.redefinePassword": "Redéfinir mot de passe",
   "personalData.saveData": "Sauvegarder les modifications",
   "personalData.password": "Mot de passe",

diff --git a/react/locales/it.json b/react/locales/it.json
@@ -7,6 +7,9 @@
   "pages.profile": "Profilo",
   "pages.profileEdit": "Modifica Profilo",
   "pages.myAccount": "Il mio account",
+  "pages.logout": "Lasciare",
+  "logoutModal.cancel": "Annullare",
+  "logoutModal.title": "Vuoi veramente smettere?",
 
   "personalData.redefinePassword": "Ridefinisci la password",
   "personalData.saveData": "Salva le modifiche",

diff --git a/react/locales/pt.json b/react/locales/pt.json
@@ -6,6 +6,9 @@
   "pages.profile": "Dados pessoais",
   "pages.profileEdit": "Editar dados pessoais",
   "pages.myAccount": "Minha conta",
+  "pages.logout": "Sair",
+  "logoutModal.cancel": "Cancelar",
+  "logoutModal.title": "Deseja mesmo sair?",
   "personalData.redefinePassword": "Redefinir senha",
   "personalData.saveData": "Salvar alterações",
   "personalData.password": "Senha",

diff --git a/react/locales/ro.json b/react/locales/ro.json
@@ -6,6 +6,9 @@
   "pages.profile": "Profil",
   "pages.profileEdit": "Editează profilul",
   "pages.myAccount": "Contul meu",
+  "pages.logout": "Părăsi",
+  "logoutModal.cancel": "Anula",
+  "logoutModal.title": "Chiar vrei să renunți?",
   "personalData.redefinePassword": "Redenumiți parola",
   "personalData.saveData": "Salvează modificările",
   "personalData.password": "Parola",