diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f732be..7bb9761 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ 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] +### Changed +- Content is loaded lazily. ## [2.9.8] - 2019-12-03 ### Added diff --git a/react/components/TelemarketingContainer.tsx b/react/components/TelemarketingContainer.tsx new file mode 100644 index 0000000..07a3579 --- /dev/null +++ b/react/components/TelemarketingContainer.tsx @@ -0,0 +1,94 @@ +import { compose, path } from 'ramda' +import React, { FC, useState } from 'react' +import { graphql } from 'react-apollo' +import { withSession } from 'vtex.render-runtime' +import { Queries } from 'vtex.store-resources' + +import depersonifyMutation from '../mutations/depersonify.gql' +import impersonateMutation from '../mutations/impersonate.gql' +import isMyVtex from '../utils/isMyVtex' +import processSession from '../utils/processSession' +import Telemarketing from './Telemarketing' + +interface Props { + /** Query with the session */ + session?: Session + /** Mutation to depersonify */ + depersonify: () => Promise + /** Mutation to impersonate a customer */ + impersonate: (s: {}) => Promise +} + +const TelemarketingContainer: FC = ({ depersonify, impersonate, session }) => { + const [emailInput, setEmailInput] = useState('') + const [loadingImpersonate, setloadingImpersonate] = useState(false) + + const processedSession = processSession(session) + + if (!session || !processedSession || !processedSession.canImpersonate) { + return null + } + + const handleInputChange = (event: any) => { + setEmailInput(event.target.value) + } + + const handleDepersonify = () => { + setloadingImpersonate(true) + depersonify() + .then(response => { + const depersonifyData = path(['data', 'depersonify'], response) + !!depersonifyData && session.refetch() + window.location.reload() + }) + .catch(() => setloadingImpersonate(false)) + } + + const handleImpersonate = (email: string) => { + setloadingImpersonate(true) + const variables = { email } + impersonate({ variables }) + .then(response => { + const profile = path( + ['data', 'impersonate', 'impersonate', 'profile'], + response + ) + !!profile && session.refetch() + window.location.reload() + }) + .catch(() => setloadingImpersonate(false)) + } + + const { client, attendantEmail } = processedSession + + return ( + + ) +} + +const options = { + name: 'session', + skip: () => !isMyVtex(), + options: () => ({ + ssr: false, + }), +} + +const EnhancedTelemarketing = withSession({ loading: React.Fragment })( + compose( + graphql(Queries.session, options), + graphql(depersonifyMutation, { name: 'depersonify' }), + graphql(impersonateMutation, { name: 'impersonate' }), + )(TelemarketingContainer as any) +) + +export default EnhancedTelemarketing + diff --git a/react/index.tsx b/react/index.tsx index fad7114..87f66b4 100644 --- a/react/index.tsx +++ b/react/index.tsx @@ -1,94 +1,21 @@ -import { compose, path, pathOr, includes } from 'ramda' -import React, { useState, FC } from 'react' -import { graphql } from 'react-apollo' -import { withSession } from 'vtex.render-runtime' -import { Queries } from 'vtex.store-resources' +import React, { FC, Suspense } from 'react' +import { NoSSR } from 'vtex.render-runtime' +import isMyVtex from './utils/isMyVtex' -import Telemarketing from './components/Telemarketing' -import depersonifyMutation from './mutations/depersonify.gql' -import impersonateMutation from './mutations/impersonate.gql' -import processSession from './utils/processSession' +const TelemarketingContainer = React.lazy(() => import('./components/TelemarketingContainer')) -interface Props { - /** Query with the session */ - session?: Session - /** Mutation to depersonify */ - depersonify: () => Promise - /** Mutation to impersonate a customer */ - impersonate: (s: {}) => Promise -} - -const TelemarketingContainer: FC = ({ depersonify, impersonate, session }) => { - const [emailInput, setEmailInput] = useState('') - const [loadingImpersonate, setloadingImpersonate] = useState(false) - - const processedSession = processSession(session) - - if (!session || !processedSession || !processedSession.canImpersonate) { +const Telemarketing: FC = (props) => { + if (!isMyVtex()) { return null } - const handleInputChange = (event: any) => { - setEmailInput(event.target.value) - } - - const handleDepersonify = () => { - setloadingImpersonate(true) - depersonify() - .then(response => { - const depersonifyData = path(['data', 'depersonify'], response) - !!depersonifyData && session.refetch() - window.location.reload() - }) - .catch(() => setloadingImpersonate(false)) - } - - const handleImpersonate = (email: string) => { - setloadingImpersonate(true) - const variables = { email } - impersonate({ variables }) - .then(response => { - const profile = path( - ['data', 'impersonate', 'impersonate', 'profile'], - response - ) - !!profile && session.refetch() - window.location.reload() - }) - .catch(() => setloadingImpersonate(false)) - } - - const { client, attendantEmail } = processedSession - return ( - + + }> + + + ) } -const hasMyVtex = compose(includes('myvtex.com'), pathOr('', ['location', 'hostname'])) - -const options = { - name: 'session', - skip: () => !hasMyVtex(window), - options: () => ({ - ssr: false, - }), -} - -const EnhancedTelemarketing = withSession({ loading: React.Fragment })( - compose( - graphql(Queries.session, options), - graphql(depersonifyMutation, { name: 'depersonify' }), - graphql(impersonateMutation, { name: 'impersonate' }), - )(TelemarketingContainer as any) -) - -export default EnhancedTelemarketing +export default Telemarketing diff --git a/react/tsconfig.json b/react/tsconfig.json index fe3f4a9..0c23de9 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -4,7 +4,7 @@ "types": ["node", "jest", "graphql"], "typeRoots": ["node_modules/@types"], "target": "es2017", - "module": "es6", + "module": "esnext", "sourceMap": true, "moduleResolution": "node", "jsx": "react", diff --git a/react/typings/render.d.ts b/react/typings/render.d.ts index fe411e6..392d103 100644 --- a/react/typings/render.d.ts +++ b/react/typings/render.d.ts @@ -17,7 +17,7 @@ declare module 'vtex.render-runtime' { export const ExtensionPoint: ReactElement export const Helmet: ReactElement export const Link: ComponentType - export const NoSSR: ReactElement + export const NoSSR: ComponentType export const RenderContextConsumer: ReactElement export const canUseDOM: boolean export const withRuntimeContext: ( diff --git a/react/utils/isMyVtex.ts b/react/utils/isMyVtex.ts new file mode 100644 index 0000000..d24c1d4 --- /dev/null +++ b/react/utils/isMyVtex.ts @@ -0,0 +1,8 @@ +import { compose, includes, pathOr } from 'ramda' + +export default function isMyVtex() { + return compose( + includes('myvtex.com'), + pathOr('', ['location', 'hostname']) + )(window) +}