From 0db8943b381b2af768d8c97679d04cd9f2587af0 Mon Sep 17 00:00:00 2001 From: tomivm Date: Wed, 1 Feb 2023 14:04:22 -0300 Subject: [PATCH 1/8] Remove Mount of PremiumRequiredModal on PremiumFeature --- src/components/PremiumFeature/PremiumFeature.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/PremiumFeature/PremiumFeature.js b/src/components/PremiumFeature/PremiumFeature.js index 83c47627c..f1594bc41 100644 --- a/src/components/PremiumFeature/PremiumFeature.js +++ b/src/components/PremiumFeature/PremiumFeature.js @@ -1,13 +1,11 @@ import React, { useState } from 'react'; import { connect } from 'react-redux'; -import PremiumRequiredModal from './PremiumRequiredModal'; function PremiumFeature(props) { - const [openModal, setOpenModal] = useState(false); const captured = event => { if (!props.isSubscribed) { event.stopPropagation(); - setOpenModal(true); + props.showPremiumRequired(); } }; @@ -15,13 +13,6 @@ function PremiumFeature(props) { return ( <>
{props.children}
- {openModal && ( - { - setOpenModal(false); - }} - /> - )} ); } From f27a7ca5b2c7243890524b755e94ceaa1e7fd3e6 Mon Sep 17 00:00:00 2001 From: tomivm Date: Wed, 1 Feb 2023 14:05:55 -0300 Subject: [PATCH 2/8] Remove import of useState on PremiumFeature --- src/components/PremiumFeature/PremiumFeature.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PremiumFeature/PremiumFeature.js b/src/components/PremiumFeature/PremiumFeature.js index f1594bc41..3f4f9669b 100644 --- a/src/components/PremiumFeature/PremiumFeature.js +++ b/src/components/PremiumFeature/PremiumFeature.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { connect } from 'react-redux'; function PremiumFeature(props) { From df422bf6840b217ff6fa31fd4629af8a0986f1cf Mon Sep 17 00:00:00 2001 From: tomivm Date: Wed, 1 Feb 2023 14:08:59 -0300 Subject: [PATCH 3/8] Mount PremiumRequiredModal on App component --- src/components/App/App.component.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/App/App.component.js b/src/components/App/App.component.js index 30b73aed3..bae9a5939 100644 --- a/src/components/App/App.component.js +++ b/src/components/App/App.component.js @@ -9,6 +9,7 @@ import ChangePassword from '../Account/ChangePassword'; import OAuthLogin from '../Account/OAuthLogin'; import AuthScreen, { RedirectIfLogged } from '../AuthScreen'; import BoardContainer from '../Board'; +import PremiumRequiredModal from '../PremiumFeature/PremiumRequiredModal'; import Notifications from '../Notifications'; import NotFound from '../NotFound'; import Settings from '../Settings'; @@ -61,6 +62,7 @@ export class App extends Component { + Date: Wed, 1 Feb 2023 14:19:53 -0300 Subject: [PATCH 4/8] Add reducer staff to show and hide PremiumRequiredModal --- .../SubscriptionProvider.actions.js | 19 +++++++++++++- .../SubscriptionProvider.constants.js | 2 ++ .../SubscriptionProvider.reducer.js | 26 +++++++++++++++++-- 3 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/providers/SubscriptionProvider/SubscriptionProvider.actions.js b/src/providers/SubscriptionProvider/SubscriptionProvider.actions.js index 9f16de516..0af089254 100644 --- a/src/providers/SubscriptionProvider/SubscriptionProvider.actions.js +++ b/src/providers/SubscriptionProvider/SubscriptionProvider.actions.js @@ -2,7 +2,9 @@ import { UPDATE_PRODUCT_STATE, UPDATE_SUBSCRIBER_ID, UPDATE_IS_SUBSCRIBED, - UPDATE_SUBSCRIPTION + UPDATE_SUBSCRIPTION, + SHOW_PREMIUM_REQUIRED, + HIDE_PREMIUM_REQUIRED } from './SubscriptionProvider.constants'; export function updateProductState(payload = {}) { @@ -29,3 +31,18 @@ export function updateSubscription(payload) { payload }; } + +export function showPremiumRequired( + { isTryPeriodFinished } = { isTryPeriodFinished: false } +) { + return { + type: SHOW_PREMIUM_REQUIRED, + isTryPeriodFinished + }; +} + +export function hidePremiumRequired() { + return { + type: HIDE_PREMIUM_REQUIRED + }; +} diff --git a/src/providers/SubscriptionProvider/SubscriptionProvider.constants.js b/src/providers/SubscriptionProvider/SubscriptionProvider.constants.js index cd1439e64..8020bbf7c 100644 --- a/src/providers/SubscriptionProvider/SubscriptionProvider.constants.js +++ b/src/providers/SubscriptionProvider/SubscriptionProvider.constants.js @@ -2,3 +2,5 @@ export const UPDATE_PRODUCT_STATE = 'UPDATE_PRODUCT_STATE'; export const UPDATE_SUBSCRIBER_ID = 'UPDATE_SUBSCRIBER_ID'; export const UPDATE_IS_SUBSCRIBED = 'UPDATE_IS_SUBSCRIBED'; export const UPDATE_SUBSCRIPTION = 'UPDATE_SUBSCRIPTION'; +export const SHOW_PREMIUM_REQUIRED = 'SHOW_PREMIUM_REQUIRED'; +export const HIDE_PREMIUM_REQUIRED = 'HIDE_PREMIUM_REQUIRED'; diff --git a/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js b/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js index edb4010f4..05f45fd8b 100644 --- a/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js +++ b/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js @@ -2,14 +2,20 @@ import { UPDATE_PRODUCT_STATE, UPDATE_SUBSCRIBER_ID, UPDATE_IS_SUBSCRIBED, - UPDATE_SUBSCRIPTION + UPDATE_SUBSCRIPTION, + SHOW_PREMIUM_REQUIRED, + HIDE_PREMIUM_REQUIRED } from './SubscriptionProvider.constants'; const initialState = { subscriberId: '', androidSubscriptionState: 'not_subscribed', isSubscribed: false, - expiryDate: null + expiryDate: null, + premiumRequiredModalState: { + open: false, + isTryPeriodFinished: false + } }; function subscriptionProviderReducer(state = initialState, action) { @@ -41,6 +47,22 @@ function subscriptionProviderReducer(state = initialState, action) { isSubscribed, androidSubscriptionState }; + case SHOW_PREMIUM_REQUIRED: + return { + ...state, + premiumRequiredModalState: { + open: true, + isTryPeriodFinished: action.isTryPeriodFinished + } + }; + case HIDE_PREMIUM_REQUIRED: + return { + ...state, + premiumRequiredModalState: { + open: false, + isTryPeriodFinished: false + } + }; default: return state; } From 453ad7869e280086cf93346c5d8d6d11c76eb6da Mon Sep 17 00:00:00 2001 From: tomivm Date: Wed, 1 Feb 2023 14:22:56 -0300 Subject: [PATCH 5/8] use showPremiumRequired action on PremiumFeature --- src/components/PremiumFeature/PremiumFeature.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/PremiumFeature/PremiumFeature.js b/src/components/PremiumFeature/PremiumFeature.js index 3f4f9669b..6a78117de 100644 --- a/src/components/PremiumFeature/PremiumFeature.js +++ b/src/components/PremiumFeature/PremiumFeature.js @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import { showPremiumRequired } from '../../providers/SubscriptionProvider/SubscriptionProvider.actions'; function PremiumFeature(props) { const captured = event => { @@ -21,7 +22,7 @@ const mapStateToProps = state => ({ isSubscribed: state.subscription.isSubscribed }); -const mapDispatchToProps = {}; +const mapDispatchToProps = { showPremiumRequired }; export default connect( mapStateToProps, From 8e3bfe0b9ba53960803003ddf4785cd2d3f00518 Mon Sep 17 00:00:00 2001 From: tomivm Date: Wed, 1 Feb 2023 14:33:19 -0300 Subject: [PATCH 6/8] Implement logic to show and hide PremiumRequiredModal using redux state --- .../PremiumFeature/PremiumRequiredModal.js | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/PremiumFeature/PremiumRequiredModal.js b/src/components/PremiumFeature/PremiumRequiredModal.js index f6b520fc1..5771c3a80 100644 --- a/src/components/PremiumFeature/PremiumRequiredModal.js +++ b/src/components/PremiumFeature/PremiumRequiredModal.js @@ -1,4 +1,8 @@ import React from 'react'; +import { connect } from 'react-redux'; + +import { hidePremiumRequired } from './../../providers/SubscriptionProvider/SubscriptionProvider.actions'; + import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; @@ -12,7 +16,12 @@ import messages from './PremiumFeature.messages'; import style from './PremiumRequiredModal.module.css'; -export default function PremiumRequiredModal({ onClose, isTryPeriodFinished }) { +function PremiumRequiredModal({ + hidePremiumRequired, + premiumRequiredModalState +}) { + const { open, isTryPeriodFinished } = premiumRequiredModalState; + const dialogText = { tittle: isTryPeriodFinished ? ( @@ -24,8 +33,8 @@ export default function PremiumRequiredModal({ onClose, isTryPeriodFinished }) { return ( @@ -36,7 +45,7 @@ export default function PremiumRequiredModal({ onClose, isTryPeriodFinished }) { {dialogText.body}