diff --git a/packages/scandipwa/i18n/da_DK.json b/packages/scandipwa/i18n/da_DK.json index c31d5668f9..d71aceadf2 100644 --- a/packages/scandipwa/i18n/da_DK.json +++ b/packages/scandipwa/i18n/da_DK.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/de_DE.json b/packages/scandipwa/i18n/de_DE.json index 179798f908..e3cf1bad62 100644 --- a/packages/scandipwa/i18n/de_DE.json +++ b/packages/scandipwa/i18n/de_DE.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/es_ES.json b/packages/scandipwa/i18n/es_ES.json index 8fd1a3cdb4..4e04da3712 100644 --- a/packages/scandipwa/i18n/es_ES.json +++ b/packages/scandipwa/i18n/es_ES.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/fa_IR.json b/packages/scandipwa/i18n/fa_IR.json index 41a29f11ed..13a648ebcd 100644 --- a/packages/scandipwa/i18n/fa_IR.json +++ b/packages/scandipwa/i18n/fa_IR.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/fi_FI.json b/packages/scandipwa/i18n/fi_FI.json index e43ccc0137..c623ceb298 100644 --- a/packages/scandipwa/i18n/fi_FI.json +++ b/packages/scandipwa/i18n/fi_FI.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/fr_FR.json b/packages/scandipwa/i18n/fr_FR.json index bca2ea4d24..49844b236a 100644 --- a/packages/scandipwa/i18n/fr_FR.json +++ b/packages/scandipwa/i18n/fr_FR.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/it_IT.json b/packages/scandipwa/i18n/it_IT.json index d27a93cd16..8c17e28d65 100644 --- a/packages/scandipwa/i18n/it_IT.json +++ b/packages/scandipwa/i18n/it_IT.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/lv_LV.json b/packages/scandipwa/i18n/lv_LV.json index 398f13d9e7..0cbe3855d1 100644 --- a/packages/scandipwa/i18n/lv_LV.json +++ b/packages/scandipwa/i18n/lv_LV.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/nb_NO.json b/packages/scandipwa/i18n/nb_NO.json index fd67b41dd3..5566c6df08 100644 --- a/packages/scandipwa/i18n/nb_NO.json +++ b/packages/scandipwa/i18n/nb_NO.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/nl_NL.json b/packages/scandipwa/i18n/nl_NL.json index c750999887..f72be4674a 100644 --- a/packages/scandipwa/i18n/nl_NL.json +++ b/packages/scandipwa/i18n/nl_NL.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/pl_PL.json b/packages/scandipwa/i18n/pl_PL.json index dc05f112c3..4a5ea8e159 100644 --- a/packages/scandipwa/i18n/pl_PL.json +++ b/packages/scandipwa/i18n/pl_PL.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/pt_BR.json b/packages/scandipwa/i18n/pt_BR.json index ba8c45c964..717669d4a9 100644 --- a/packages/scandipwa/i18n/pt_BR.json +++ b/packages/scandipwa/i18n/pt_BR.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/ru_RU.json b/packages/scandipwa/i18n/ru_RU.json index 60549bf05b..8f4d0d34b9 100644 --- a/packages/scandipwa/i18n/ru_RU.json +++ b/packages/scandipwa/i18n/ru_RU.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/sl_SI.json b/packages/scandipwa/i18n/sl_SI.json index cb5fc07d47..918aebfafe 100644 --- a/packages/scandipwa/i18n/sl_SI.json +++ b/packages/scandipwa/i18n/sl_SI.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/sv_SE.json b/packages/scandipwa/i18n/sv_SE.json index 276ffcfa08..a15869df9a 100644 --- a/packages/scandipwa/i18n/sv_SE.json +++ b/packages/scandipwa/i18n/sv_SE.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/tr_TR.json b/packages/scandipwa/i18n/tr_TR.json index 21a109876f..d29b873990 100644 --- a/packages/scandipwa/i18n/tr_TR.json +++ b/packages/scandipwa/i18n/tr_TR.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/i18n/zh_TW.json b/packages/scandipwa/i18n/zh_TW.json index ada19815c0..066da17651 100644 --- a/packages/scandipwa/i18n/zh_TW.json +++ b/packages/scandipwa/i18n/zh_TW.json @@ -610,5 +610,9 @@ "Send Confirmation Action": null, "This email does not require confirmation.": null, "Remove file": null, - "Region": null + "Region": null, + "Confirm Newsletter Page": null, + "Confirm subscription": null, + "Unable to confirm subscrabition": null, + "Thank you for subscribing to our newsletter!": null } diff --git a/packages/scandipwa/src/component/Router/Router.component.js b/packages/scandipwa/src/component/Router/Router.component.js index 07273b556d..68aa489e45 100644 --- a/packages/scandipwa/src/component/Router/Router.component.js +++ b/packages/scandipwa/src/component/Router/Router.component.js @@ -52,6 +52,7 @@ import { CMS_PAGE, COMPARE, CONFIRM_ACCOUNT, + CONFIRM_NEWSLETTER, CONTACT_PAGE, COOKIE_POPUP, CREATE_ACCOUNT, @@ -93,6 +94,7 @@ export const PasswordChangePage = lazy(() => import(/* webpackMode: "lazy", webp export const SearchPage = lazy(() => import(/* webpackMode: "lazy", webpackChunkName: "search" */ 'Route/SearchPage')); export const SendConfirmationPage = lazy(() => import(/* webpackMode: "lazy", webpackChunkName: "cms" */ 'Route/SendConfirmationPage')); export const ConfirmAccountPage = lazy(() => import(/* webpackMode: "lazy", webpackChunkName: "cms" */ 'Route/ConfirmAccountPage')); +export const ConfirmNewsletterPage = lazy(() => import(/* webpackMode: "lazy", webpackChunkName: "cms" */ 'Route/ConfirmNewsletterPage')); export const MenuPage = lazy(() => import(/* webpackMode: "lazy", webpackChunkName: "cms" */ 'Route/MenuPage')); export const Footer = lazy(() => import(/* webpackMode: "lazy", webpackChunkName: "footer" */ 'Component/Footer')); export const NavigationTabs = lazy(() => import(/* webpackMode: "lazy", webpackChunkName: "header" */ 'Component/NavigationTabs')); @@ -309,6 +311,11 @@ export class Router extends PureComponent { position: 95, name: PRINT_ORDER }, + { + component: } />, + position: 100, + name: CONFIRM_NEWSLETTER + }, { component: } />, position: 1000, diff --git a/packages/scandipwa/src/component/Router/Router.config.js b/packages/scandipwa/src/component/Router/Router.config.js index 9b95f59e37..b0dbfe7f28 100644 --- a/packages/scandipwa/src/component/Router/Router.config.js +++ b/packages/scandipwa/src/component/Router/Router.config.js @@ -32,6 +32,7 @@ export const LOGIN = 'LOGIN'; export const ACCOUNT_FORGOT_PASSWORD = 'ACCOUNT_FORGOT_PASSWORD'; export const FORGOT_PASSWORD = 'FORGOT_PASSWORD'; export const CONFIRM_ACCOUNT = 'CONFIRM_ACCOUNT'; +export const CONFIRM_NEWSLETTER = 'CONFIRM_NEWSLETTER'; export const MY_ACCOUNT = 'MY_ACCOUNT'; export const MY_ACCOUNT_ORDER = 'MY_ACCOUNT_ORDER'; export const MY_ACCOUNT_ORDERS = 'MY_ACCOUNT_ORDERS'; diff --git a/packages/scandipwa/src/query/NewsletterSubscription.query.js b/packages/scandipwa/src/query/NewsletterSubscription.query.js index 916f69e3fa..efce31d13b 100644 --- a/packages/scandipwa/src/query/NewsletterSubscription.query.js +++ b/packages/scandipwa/src/query/NewsletterSubscription.query.js @@ -27,6 +27,20 @@ export class NewsletterSubscriptionQuery { 'status' ]; } + + confirmSubscribeToNewsletterMutation(id, code) { + return new Field('confirmSubscribingToNewsletter') + .addArgument('id', 'String!', id) + .addArgument('code', 'String!', code) + .addFieldList(this._getConfirmFields()); + } + + _getConfirmFields() { + return [ + 'status', + 'message' + ]; + } } export default new NewsletterSubscriptionQuery(); diff --git a/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.component.js b/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.component.js new file mode 100644 index 0000000000..e89acc7c4b --- /dev/null +++ b/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.component.js @@ -0,0 +1,97 @@ +/** + * ScandiPWA - Progressive Web App for Magento + * + * Copyright © Scandiweb, Inc. All rights reserved. + * See LICENSE for license details. + * + * @license OSL-3.0 (Open Software License ("OSL") v. 3.0) + * @package scandipwa/scandipwa + * @link https://github.com/scandipwa/scandipwa + */ + +import PropTypes from 'prop-types'; +import { PureComponent } from 'react'; + +import ContentWrapper from 'Component/ContentWrapper'; +import Link from 'Component/Link'; + +import { FAILED_STATUS, SUCCESS_STATUS } from './ConfirmNewsletterPage.config'; + +import './ConfirmNewsletterPage.style'; + +/** @namespace Route/ConfirmNewsletterPage/Component */ +export class ConfirmNewsletterPage extends PureComponent { + static propTypes = { + status: PropTypes.string.isRequired, + message: PropTypes.string.isRequired, + shouldDisplayWarning: PropTypes.bool.isRequired + }; + + renderWarningMessage() { + const { status, message, shouldDisplayWarning } = this.props; + + if (!shouldDisplayWarning && status !== FAILED_STATUS) { + return null; + } + + return ( +
+

+ { __('Unable to confirm subscrabition') } +

+
+ { message } +
+
+ ); + } + + renderButtons() { + return ( +
+ + { __('Continue shopping') } + +
+ ); + } + + renderPageContents() { + const { status, message, shouldDisplayWarning } = this.props; + + if (shouldDisplayWarning || status !== SUCCESS_STATUS) { + return null; + } + + return ( + <> +

+ { message } +

+

+ { __('Thank you for subscribing to our newsletter!') } +

+ { this.renderButtons() } + + ); + } + + render() { + return ( +
+ + { this.renderWarningMessage() } + { this.renderPageContents() } + +
+ ); + } +} + +export default ConfirmNewsletterPage; diff --git a/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.config.js b/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.config.js new file mode 100644 index 0000000000..acfba240af --- /dev/null +++ b/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.config.js @@ -0,0 +1,13 @@ +/** + * ScandiPWA - Progressive Web App for Magento + * + * Copyright © Scandiweb, Inc. All rights reserved. + * See LICENSE for license details. + * + * @license OSL-3.0 (Open Software License ("OSL") v. 3.0) + * @package scandipwa/scandipwa + * @link https://github.com/scandipwa/scandipwa + */ + +export const SUCCESS_STATUS = 'success'; +export const FAILED_STATUS = 'failed'; diff --git a/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.container.js b/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.container.js new file mode 100644 index 0000000000..4db61e464c --- /dev/null +++ b/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.container.js @@ -0,0 +1,99 @@ +/** + * ScandiPWA - Progressive Web App for Magento + * + * Copyright © Scandiweb, Inc. All rights reserved. + * See LICENSE for license details. + * + * @license OSL-3.0 (Open Software License ("OSL") v. 3.0) + * @package scandipwa/scandipwa + * @link https://github.com/scandipwa/scandipwa + */ + +import PropTypes from 'prop-types'; +import { PureComponent } from 'react'; +import { connect } from 'react-redux'; + +import NewsletterSubscriptionQuery from 'Query/NewsletterSubscription.query'; +import { toggleBreadcrumbs } from 'Store/Breadcrumbs/Breadcrumbs.action'; +import { updateMeta } from 'Store/Meta/Meta.action'; +import { MatchType } from 'Type/Router.type'; +import { fetchMutation } from 'Util/Request'; + +import ConfirmNewsletterPage from './ConfirmNewsletterPage.component'; + +/** @namespace Route/ConfirmNewsletterPage/Container/mapStateToProps */ +export const mapStateToProps = () => ({}); + +/** @namespace Route/ConfirmNewsletterPage/Container/mapDispatchToProps */ +export const mapDispatchToProps = (dispatch) => ({ + toggleBreadcrumbs: (isVisible) => dispatch(toggleBreadcrumbs(isVisible)), + updateMeta: (meta) => dispatch(updateMeta(meta)) +}); + +/** @namespace Route/ConfirmNewsletterPage/Container */ +export class ConfirmNewsletterPageContainer extends PureComponent { + static propTypes = { + match: MatchType.isRequired, + updateMeta: PropTypes.func.isRequired, + toggleBreadcrumbs: PropTypes.func.isRequired + }; + + state = { + status: '', + message: '' + }; + + componentDidMount() { + const { updateMeta, toggleBreadcrumbs } = this.props; + + if (!this.shouldDisplayWarning()) { + this.requestSubscriptionConfirmation(); + } + + updateMeta({ title: __('Confirm subscription') }); + toggleBreadcrumbs(false); + } + + containerProps() { + const { status, message } = this.state; + + return { + status, + message, + shouldDisplayWarning: this.shouldDisplayWarning() + }; + } + + shouldDisplayWarning() { + const { + match: { + params: { + id, + code + } + } + } = this.props; + + return !(id && code); + } + + async requestSubscriptionConfirmation() { + const { match: { params: { id, code } } } = this.props; + + const { confirmSubscribingToNewsletter: { status, message } } = await fetchMutation( + NewsletterSubscriptionQuery.confirmSubscribeToNewsletterMutation(id, code) + ); + + this.setState({ status, message }); + } + + render() { + return ( + + ); + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ConfirmNewsletterPageContainer); diff --git a/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.style.scss b/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.style.scss new file mode 100644 index 0000000000..2e2827ac07 --- /dev/null +++ b/packages/scandipwa/src/route/ConfirmNewsletterPage/ConfirmNewsletterPage.style.scss @@ -0,0 +1,58 @@ +/** + * ScandiPWA - Progressive Web App for Magento + * + * Copyright © Scandiweb, Inc. All rights reserved. + * See LICENSE for license details. + * + * @license OSL-3.0 (Open Software License ("OSL") v. 3.0) + * @package scandipwa/scandipwa + * @link https://github.com/scandipwa/scandipwa + */ + +.ConfirmNewsletterPage { + padding-block-end: var(--header-nav-height); + + @include desktop { + margin-block-start: var(--header-total-height); + } + + @include mobile { + padding-block-end: calc(var(--navigation-tabs-height) + 60px); + padding-block-start: 20px; + } + + &::before { + @include desktop { + content: ''; + background: var(--breadcrumbs-background); + display: block; + min-height: var(--breadcrumbs-height); + } + } + + &-WarningMsg { + color: var(--primary-error-color); + font-size: 15px; + padding-block-start: 20px; + text-align: center; + + h2 { + color: var(--primary-error-color); + } + } + + &-Heading { + padding-block: 10px 24px; + text-transform: none; + } + + &-Message { + margin-block-start: 22px; + } + + &-ContinueButton { + @include desktop { + margin-block-start: 24px; + } + } +} diff --git a/packages/scandipwa/src/route/ConfirmNewsletterPage/index.js b/packages/scandipwa/src/route/ConfirmNewsletterPage/index.js new file mode 100644 index 0000000000..61c5904b4c --- /dev/null +++ b/packages/scandipwa/src/route/ConfirmNewsletterPage/index.js @@ -0,0 +1,12 @@ +/** + * ScandiPWA - Progressive Web App for Magento + * + * Copyright © Scandiweb, Inc. All rights reserved. + * See LICENSE for license details. + * + * @license OSL-3.0 (Open Software License ("OSL") v. 3.0) + * @package scandipwa/scandipwa + * @link https://github.com/scandipwa/scandipwa + */ + +export { default } from './ConfirmNewsletterPage.container';