diff --git a/node/package.json b/node/package.json index e67bdd33..920b1119 100644 --- a/node/package.json +++ b/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" diff --git a/node/yarn.lock b/node/yarn.lock index e7440f23..46ab26fe 100644 --- a/node/yarn.lock +++ b/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" diff --git a/react/components/Profile/NewsletterBox.tsx b/react/components/Profile/NewsletterBox.tsx index 8b44c913..2523cdcc 100644 --- a/react/components/Profile/NewsletterBox.tsx +++ b/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({ @@ -23,10 +24,13 @@ const messages = defineMessages({ }) class NewsletterBox extends Component { - public constructor(props: Props) { - super(props) - this.state = { - checked: this.props.isNewsletterOptIn, + public state = { + checked: false, + } + + public componentDidUpdate(oldProps: Props) { + if (oldProps.isNewsletterOptIn !== this.props.isNewsletterOptIn) { + this.setState({ checked: this.props.isNewsletterOptIn }) } } @@ -79,13 +83,37 @@ interface State { checked: boolean } -interface Props extends InjectedIntlProps { +type Props = ExternalProps & QueryResult & Mutations & InjectedIntlProps + +interface ExternalProps { userEmail: string +} + +interface QueryData { + profile: Pick + loading: boolean +} + +interface QueryResult { + loading?: boolean isNewsletterOptIn: boolean +} + +interface Mutations { setOptInNewsletter: (args: Variables) => Promise } -const enhance = compose>( +const enhance = compose( + graphql(GET_NEWSLETTER, { + props: ({ data }) => ({ + isNewsletterOptIn: + data?.profile?.customFields?.[0].value.toLowerCase() === 'true', + loading: data?.loading, + }), + options: { + fetchPolicy: 'cache-and-network', + }, + }), graphql(NEWSLETTER_MUTATION, { name: 'setOptInNewsletter' }), injectIntl ) diff --git a/react/components/pages/Profile.tsx b/react/components/pages/Profile.tsx index 33a16f94..2f0c854f 100644 --- a/react/components/pages/Profile.tsx +++ b/react/components/pages/Profile.tsx @@ -47,17 +47,9 @@ class ProfileContainer extends Component { ) } - 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 (
@@ -85,10 +77,7 @@ class ProfileContainer extends Component { onEditClick={this.handleEditingPassword} /> )} - + {showToast && ( @@ -109,9 +98,7 @@ interface Props { } const enhance = compose( - graphql(GET_PROFILE, { - options: { variables: { customFields: 'isNewsletterOptIn' } }, - }), + graphql(GET_PROFILE), branch( ({ data }) => data.profile == null, renderComponent(ProfileLoading) diff --git a/react/graphql/getNewsletterOpt.gql b/react/graphql/getNewsletterOpt.gql new file mode 100644 index 00000000..10f99a4c --- /dev/null +++ b/react/graphql/getNewsletterOpt.gql @@ -0,0 +1,8 @@ +query NewsletterOpt @context(scope: "private") { + profile(customFields: "isNewsletterOptIn") { + customFields { + key + value + } + } +} diff --git a/react/graphql/getProfile.gql b/react/graphql/getProfile.gql index a978e059..2c28d05e 100644 --- a/react/graphql/getProfile.gql +++ b/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 - } } } diff --git a/react/yarn.lock b/react/yarn.lock index c1418999..50767559 100644 --- a/react/yarn.lock +++ b/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"