Merge pull request #153 from vtex-apps/fix/newsletter-optin

Fix/newsletter optin

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Newsletter opt in update cache by refetching query.
+
 ## [0.31.0] - 2020-02-19
 
 ### Added

node/package.json

@@ -7,7 +7,7 @@
     "eslint": "5.x",
     "eslint-config-vtex": "10.x",
     "prettier": "^1.18.2",
-    "typescript": "3.7.3"
+    "typescript": "3.8.3"
   },
   "dependencies": {
     "@vtex/api": "^3.48.2"

node/yarn.lock

@@ -2040,10 +2040,10 @@ type-is@^1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@3.7.3:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
-  integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
+typescript@3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
 universalify@^0.1.0:
   version "0.1.2"

react/components/Profile/NewsletterBox.tsx

@@ -5,6 +5,7 @@ import { compose } from 'recompose'
 import { Checkbox } from 'vtex.styleguide'
 
 import ContentBox from '../shared/ContentBox'
+import GET_NEWSLETTER from '../../graphql/getNewsletterOpt.gql'
 import NEWSLETTER_MUTATION from '../../graphql/setOptInNewsletter.gql'
 
 const messages = defineMessages({
@@ -26,7 +27,13 @@ class NewsletterBox extends Component<Props, State> {
   public constructor(props: Props) {
     super(props)
     this.state = {
-      checked: this.props.isNewsletterOptIn,
+      checked: props.isNewsletterOptIn,
+    }
+  }
+
+  public componentDidUpdate(oldProps: Props) {
+    if (oldProps.isNewsletterOptIn !== this.props.isNewsletterOptIn) {
+      this.setState({ checked: this.props.isNewsletterOptIn })
     }
   }
 
@@ -44,7 +51,7 @@ class NewsletterBox extends Component<Props, State> {
             isNewsletterOptIn: !checked,
           },
         }),
-      1000
+      500
     )
     this.setState({ checked: !checked })
   }
@@ -79,14 +86,36 @@ interface State {
   checked: boolean
 }
 
-interface Props extends InjectedIntlProps {
+type Props = ExternalProps & QueryResult & Mutations & InjectedIntlProps
+
+interface ExternalProps {
   userEmail: string
+}
+
+interface QueryData {
+  profile: Pick<Profile, 'customFields'>
+}
+
+interface QueryResult {
   isNewsletterOptIn: boolean
+}
+
+interface Mutations {
   setOptInNewsletter: (args: Variables<SetOptInNewsletterArgs>) => Promise<void>
 }
 
-const enhance = compose<Props, Pick<Props, 'isNewsletterOptIn' | 'userEmail'>>(
-  graphql(NEWSLETTER_MUTATION, { name: 'setOptInNewsletter' }),
+const enhance = compose<Props, ExternalProps>(
+  graphql<Props, QueryData, unknown, QueryResult>(GET_NEWSLETTER, {
+    props: ({ data }) => ({
+      isNewsletterOptIn: data?.profile?.customFields?.[0].value === 'true',
+    }),
+  }),
+  graphql(NEWSLETTER_MUTATION, {
+    name: 'setOptInNewsletter',
+    options: {
+      refetchQueries: ['NewsletterOpt'],
+    },
+  }),
   injectIntl
 )
 

react/components/pages/Profile.tsx

@@ -47,17 +47,9 @@ class ProfileContainer extends Component<Props> {
     )
   }
 
-  private getIsNewsletterOptIn = (profile: Profile) => {
-    const isNewsletterOptIn = profile.customFields?.find(
-      ({ key }) => key === 'isNewsletterOptIn'
-    )?.value
-    return isNewsletterOptIn?.toLowerCase() === 'true'
-  }
-
   public render() {
     const { profile } = this.props
     const { isEditingPassword, showToast } = this.state
-    const isNewsletterOptIn = this.getIsNewsletterOptIn(profile)
 
     return (
       <main className="flex flex-column-s flex-row-ns">
@@ -85,10 +77,7 @@ class ProfileContainer extends Component<Props> {
               onEditClick={this.handleEditingPassword}
             />
           )}
-          <NewsletterBox
-            isNewsletterOptIn={isNewsletterOptIn}
-            userEmail={profile.email}
-          />
+          <NewsletterBox userEmail={profile.email} />
         </div>
         {showToast && (
           <Toast messageId="alert.success" onClose={this.handleCloseToast} />
@@ -109,9 +98,7 @@ interface Props {
 }
 
 const enhance = compose<Props, void>(
-  graphql(GET_PROFILE, {
-    options: { variables: { customFields: 'isNewsletterOptIn' } },
-  }),
+  graphql(GET_PROFILE),
   branch<Props>(
     ({ data }) => data.profile == null,
     renderComponent(ProfileLoading)

react/graphql/getNewsletterOpt.gql

@@ -0,0 +1,8 @@
+query NewsletterOpt @context(scope: "private") {
+  profile(customFields: "isNewsletterOptIn") {
+    customFields {
+      key
+      value
+    }
+  }
+}

react/graphql/getProfile.gql

@@ -1,5 +1,5 @@
-query Profile($customFields: String) @context(scope: "private") {
-  profile(customFields: $customFields) {
+query Profile @context(scope: "private") {
+  profile {
     cacheId
     firstName
     lastName
@@ -15,9 +15,5 @@ query Profile($customFields: String) @context(scope: "private") {
     stateRegistration
     isCorporate
     passwordLastUpdate
-    customFields {
-      key
-      value
-    }
   }
 }

react/package.json

@@ -26,7 +26,7 @@
     "eslint": "5.x",
     "eslint-config-vtex-react": "^5.0.1",
     "prop-types": "^15.7.2",
-    "typescript": "3.7.3"
+    "typescript": "3.8.3"
   },
   "scripts": {
     "lint": "tsc --noEmit && eslint --ext ts,tsx .",

react/yarn.lock

@@ -5203,10 +5203,10 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-typescript@3.7.3:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
-  integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
+typescript@3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
 typescript@^3.3.3333:
   version "3.5.3"