Merge pull request #53 from vtex-apps/fix/refactor

Fix impersonate and despersonify

CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Contrast of muted UI color
+- Impersonate and despersonify
+- Usage of React Intl
+
+### Changed
+- Use vtex.device-detector instead of custom hook
 
 ## [2.9.3] - 2019-08-08
 

manifest.json

@@ -21,7 +21,8 @@
     "vtex.store-components": "3.x",
     "vtex.styleguide": "9.x",
     "vtex.react-portal": "0.x",
-    "vtex.store-icons": "0.x"
+    "vtex.store-icons": "0.x",
+    "vtex.device-detector": "0.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

messages/en.json

@@ -1,5 +1,5 @@
 {
-  "store/telemarketing.attendant": "Attendant",
+  "store/telemarketing.attendant": "Attendant: {attendant}",
   "store/telemarketing.client": "Client",
   "store/telemarketing-login.message": "Login as",
   "store/telemarketing-login.button": "Login",

messages/es.json

@@ -1,5 +1,5 @@
 {
-  "store/telemarketing.attendant": "Asistente",
+  "store/telemarketing.attendant": "Asistente: {attendant}",
   "store/telemarketing.client": "Cliente",
   "store/telemarketing-login.message": "Ingresá como cliente",
   "store/telemarketing-login.button": "Ingresá",

messages/pt.json

@@ -1,5 +1,5 @@
 {
-  "store/telemarketing.attendant": "Atendente",
+  "store/telemarketing.attendant": "Atendente: {attendant}",
   "store/telemarketing.client": "Cliente",
   "store/telemarketing-login.message": "Entrar como cliente",
   "store/telemarketing-login.button": "Entrar",

react/__mocks__/vtex.device-detector/useDevice.tsx

@@ -0,0 +1,5 @@
+export default function useDevice() {
+  return {
+    isMobile: false,
+  }
+}

react/__tests__/Telemarketing.test.tsx

@@ -3,27 +3,19 @@ import { mergeDeepRight } from 'ramda'
 import { render, fireEvent } from '@vtex/test-tools/react'
 
 import Telemarketing from '../components/Telemarketing'
-import messages from '../../messages/en.json'
 
 describe('<Telemarketing /> component', () => {
-  const intl = {
-    formatMessage: ({ id = '' }) => (messages as any)[id],
-  }
-
   const renderComponent = (customProps = {}) => {
     const defaultProps = {
       attendantEmail: 'attendant@vtex.com',
       emailInput: 'email@vtex.com',
-      intl: intl,
       loading: false,
       onDepersonify: () => {},
       onInputChange: () => {},
-      onSetSession: () => {},
-      mobile: false,
+      onImpersonate: () => {},
     }
 
-    const props = mergeDeepRight(defaultProps, customProps)
-    return render(<Telemarketing {...props} />)
+    return render(<Telemarketing {...defaultProps} {...customProps} />)
   }
 
   it('should match snapshot without client', () => {
@@ -56,9 +48,6 @@ describe('<Telemarketing /> component', () => {
   it('should show login button and form', () => {
     const { getByText, getByPlaceholderText } = renderComponent()
 
-    const loginAs = getByText('Login as')
-    expect(loginAs).toBeTruthy()
-
     const emailPlaceholder = getByPlaceholderText('Ex: example@mail.com')
     expect(emailPlaceholder).toBeTruthy()
 
@@ -74,28 +63,28 @@ describe('<Telemarketing /> component', () => {
       email: 'client@vtex.com',
     }
 
-    const { getByText } = renderComponent({ client: client })
+    const { getByText, getAllByText } = renderComponent({ client: client })
 
     const document = getByText(client.document)
     expect(document).toBeTruthy()
 
     const phone = getByText(client.phone)
     expect(phone).toBeTruthy()
 
-    const name = getByText(client.name)
+    const name = getAllByText(client.name)
     expect(name).toBeTruthy()
 
     const email = getByText(client.email)
     expect(email).toBeTruthy()
   })
 
   it('should login when clicked', () => {
-    const onSetSession = jest.fn()
-    const { getByText } = renderComponent({ onSetSession: onSetSession })
+    const onImpersonate = jest.fn()
+    const { getByText } = renderComponent({ onImpersonate: onImpersonate })
 
     fireEvent.click(getByText('Login'))
 
-    expect(onSetSession).toBeCalledTimes(1)
+    expect(onImpersonate).toBeCalledTimes(1)
   })
 
   it('should logout when clicked', () => {

react/__tests__/__snapshots__/Telemarketing.test.tsx.snap

@@ -27,9 +27,8 @@ exports[`<Telemarketing /> component should match snapshot with client 1`] = `
           <div
             class="ml2"
           >
-            Attendant
             <span>
-              : attendant@vtex.com
+              Attendant: attendant@vtex.com
             </span>
           </div>
         </div>
@@ -43,7 +42,7 @@ exports[`<Telemarketing /> component should match snapshot with client 1`] = `
               class="pointer w-100"
             >
               <div
-                class="c-on-base--inverted flex align-center"
+                class="c-on-base--inverted flex items-center"
               >
                 <svg
                   class="IconProfile-mock  "
@@ -58,7 +57,7 @@ exports[`<Telemarketing /> component should match snapshot with client 1`] = `
                 <div
                   class="pa2 clientNameBar w-100"
                 >
-                  client@vtex.com
+                  name
                 </div>
               </div>
             </div>
@@ -115,7 +114,7 @@ exports[`<Telemarketing /> component should match snapshot with client 1`] = `
                             Email
                           </div>
                           <div
-                            class="pb5 pl2 c-muted-3"
+                            class="pb5 pl2 c-muted-1"
                           >
                             client@vtex.com
                           </div>
@@ -126,10 +125,12 @@ exports[`<Telemarketing /> component should match snapshot with client 1`] = `
                           <div
                             class="tl pb5 pr2"
                           >
-                            Document
+                            <span>
+                              Document
+                            </span>
                           </div>
                           <div
-                            class="pb5 pl2 c-muted-3"
+                            class="pb5 pl2 c-muted-1"
                           >
                             document
                           </div>
@@ -140,10 +141,12 @@ exports[`<Telemarketing /> component should match snapshot with client 1`] = `
                           <div
                             class="tl pb5 pr2"
                           >
-                            Phone
+                            <span>
+                              Phone
+                            </span>
                           </div>
                           <div
-                            class="pb5 pl2 c-muted-3"
+                            class="pb5 pl2 c-muted-1"
                           >
                             phone
                           </div>
@@ -158,13 +161,17 @@ exports[`<Telemarketing /> component should match snapshot with client 1`] = `
                           <button
                             type="button"
                           >
-                            Orders
+                            <span>
+                              Orders
+                            </span>
                           </button>
                         </a>
                         <button
                           type="button"
                         >
-                          Logout
+                          <span>
+                            Logout
+                          </span>
                         </button>
                       </div>
                     </div>
@@ -210,9 +217,8 @@ exports[`<Telemarketing /> component should match snapshot without client 1`] =
           <div
             class="ml2"
           >
-            Attendant
             <span>
-              : attendant@vtex.com
+              Attendant: attendant@vtex.com
             </span>
           </div>
         </div>
@@ -241,7 +247,9 @@ exports[`<Telemarketing /> component should match snapshot without client 1`] =
                 <div
                   class="ml2"
                 >
-                  Login as
+                  <span>
+                    Login as
+                  </span>
                 </div>
               </div>
             </div>
@@ -284,7 +292,9 @@ exports[`<Telemarketing /> component should match snapshot without client 1`] =
                       <div
                         class="loginFormMessage t-small tl mb3"
                       >
-                        Login as
+                        <span>
+                          Login as
+                        </span>
                       </div>
                       <div
                         class="emailInput mb5"
@@ -297,7 +307,9 @@ exports[`<Telemarketing /> component should match snapshot without client 1`] =
                       <button
                         type="button"
                       >
-                        Login
+                        <span>
+                          Login
+                        </span>
                       </button>
                     </div>
                   </div>

react/components/LoginAsCustomer.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
+import { FormattedMessage } from 'react-intl'
 import { Button, Input } from 'vtex.styleguide'
 import { IconAssistantSales, IconProfile } from 'vtex.store-icons'
-import translate from '../utils/translate'
 import Popover from './Popover'
 
 import styles from '../telemarketing.css'
@@ -13,34 +13,29 @@ interface Props {
   emailInput: string
   /** Sets the state of the parent component with new email value */
   onInputChange: (s: string) => void
-  /** Calls the setSession on the parent component */
-  onSetSession: (s: string) => void
+  /** Calls the impersonate on the parent component */
+  onImpersonate: (s: string) => void
   /** Loading status */
   loading: boolean
-  /** Intl info */
-  intl: any
   /** If is mobile or not */
   mobile: boolean
 }
 
-/** Component that shows the email input and calls the setSession function using the Popover component. */
-const LoginAsCustomer = (props: Props) => {
-  const {
-    attendantEmail,
-    onInputChange,
-    onSetSession,
-    loading,
-    emailInput,
-    intl,
-    mobile,
-  } = props
-
+/** Component that shows the email input and calls the impersonate function using the Popover component. */
+const LoginAsCustomer = ({
+  attendantEmail,
+  onInputChange,
+  onImpersonate,
+  loading,
+  emailInput,
+  mobile,
+}: Props) => {
   const handleHeaderRendering = useCallback(
     () => (
       <div className="flex items-center c-on-base--inverted">
         <IconProfile />
         <div className="ml2">
-          {translate('store/telemarketing-login.message', intl)}
+          <FormattedMessage id="store/telemarketing-login.message" />
         </div>
       </div>
     ),
@@ -49,7 +44,7 @@ const LoginAsCustomer = (props: Props) => {
 
   const handleKeyPress = useCallback(
     (event: any) => {
-      event.key === 'Enter' && onSetSession(emailInput)
+      event.key === 'Enter' && onImpersonate(emailInput)
     },
     [emailInput]
   )
@@ -72,7 +67,7 @@ const LoginAsCustomer = (props: Props) => {
         <div className="bg-base w-100 ph5 pb5 pt7">
           <div className={`${styles.loginForm} c-disabled`}>
             <div className={`${styles.loginFormMessage} t-small tl mb3`}>
-              {translate('store/telemarketing-login.message', intl)}
+              <FormattedMessage id="store/telemarketing-login.message" />
             </div>
             <div className={`${styles.emailInput} mb5`}>
               <Input
@@ -84,10 +79,10 @@ const LoginAsCustomer = (props: Props) => {
             </div>
             <Button
               size="regular"
-              onClick={() => onSetSession(emailInput)}
+              onClick={() => onImpersonate(emailInput)}
               isLoading={loading}
             >
-              {translate('store/telemarketing-login.button', intl)}
+              <FormattedMessage id="store/telemarketing-login.button" />
             </Button>
           </div>
         </div>