From 21ec10642353f195123e6150bc092d6188faa7fa Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Fri, 3 Mar 2023 12:56:30 -0300 Subject: [PATCH 01/17] Create subscription info section --- .../Settings/Subscribe/Subscribe.component.js | 182 +++++++++++------- .../Settings/Subscribe/Subscribe.css | 21 ++ .../Settings/Subscribe/Subscribe.messages.js | 4 + 3 files changed, 142 insertions(+), 65 deletions(-) diff --git a/src/components/Settings/Subscribe/Subscribe.component.js b/src/components/Settings/Subscribe/Subscribe.component.js index 6529fcafd..8243ef911 100644 --- a/src/components/Settings/Subscribe/Subscribe.component.js +++ b/src/components/Settings/Subscribe/Subscribe.component.js @@ -14,6 +14,7 @@ import ListItemText from '@material-ui/core/ListItemText'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import CheckCircleIcon from '@material-ui/icons/CheckCircle'; import Alert from '@material-ui/lab/Alert'; +import Paper from '@material-ui/core/Paper'; import FullScreenDialog from '../../UI/FullScreenDialog'; import messages from './Subscribe.messages'; @@ -28,6 +29,11 @@ import { import { formatDuration, formatTitle } from './Subscribe.helpers'; import { isAndroid } from '../../../cordova-util'; import { CircularProgress } from '@material-ui/core'; +import Chip from '@material-ui/core/Chip'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableRow from '@material-ui/core/TableRow'; import { Link } from 'react-router-dom'; import RefreshIcon from '@material-ui/icons/Refresh'; @@ -100,61 +106,70 @@ const Subscribe = ({ }); }; const renderProducts = () => { - return products.map(product => { - const canPurchase = - subscription.androidSubscriptionState === NOT_SUBSCRIBED || - subscription.androidSubscriptionState === EXPIRED || - subscription.androidSubscriptionState === ON_HOLD; - return product.offers.map(offer => { - return [ - - - - - {formatTitle(product.title)} - - - {offer.pricingPhases[0].price} / - {formatDuration(offer.pricingPhases[0].billingPeriod)} - - - -
-
- - - - {renderIncludedFeatures()} - - - - - - - - ]; - }); - }); + const canPurchase = + subscription.androidSubscriptionState === NOT_SUBSCRIBED || + subscription.androidSubscriptionState === EXPIRED || + subscription.androidSubscriptionState === ON_HOLD; + return [ + + {products.map(product => { + return product.offers.map(offer => { + return [ + + + + + {formatTitle(product.title)} + + + {offer.pricingPhases[0].price} / + {formatDuration(offer.pricingPhases[0].billingPeriod)} + + + +
+
+ + + + {renderIncludedFeatures()} + + + + + + + + ]; + }); + })} + + ]; }; const renderSubscriptionStatus = () => { @@ -235,6 +250,52 @@ const Subscribe = ({ ]; }; + const subscriptionInfo = () => { + const subscription = { + plan: 'Premium All Features', + status: 'active', + planAmount: '3USD / month', + nextPayment: '25/5/12' + }; + return [ + + Subscription Info +
+
+ + + {Object.entries(subscription).map(row => ( + + + {row[0]} + + + {row[0] === 'status' ? ( + + ) : ( + row[1] + )} + + + ))} + +
+
+
+
+ +
+ + ]; + }; + return (
{renderSubscriptionStatus()} -
- - {renderProducts()} - -
+ {!subscription.isSubscribed ? renderProducts() : subscriptionInfo()}
); diff --git a/src/components/Settings/Subscribe/Subscribe.css b/src/components/Settings/Subscribe/Subscribe.css index 47df3f867..c192b7586 100644 --- a/src/components/Settings/Subscribe/Subscribe.css +++ b/src/components/Settings/Subscribe/Subscribe.css @@ -17,3 +17,24 @@ display: flex; align-items: center; } + +.Subscribe__Info { + padding: 1rem; +} + +.Subscribe__Info__Container { + display: flex; + margin-top: 1rem; + margin-bottom: 1rem; + align-items: center; +} + +.Subscribe__Info__Table__Container { + width: 100%; +} + +.Subscribe__Info__Button__Container { + display: flex; + justify-content: end; + margin-top: 2rem; +} diff --git a/src/components/Settings/Subscribe/Subscribe.messages.js b/src/components/Settings/Subscribe/Subscribe.messages.js index e84d6d114..5544f5b92 100644 --- a/src/components/Settings/Subscribe/Subscribe.messages.js +++ b/src/components/Settings/Subscribe/Subscribe.messages.js @@ -108,5 +108,9 @@ export default defineMessages({ id: 'cboard.components.Settings.Subscribe.on_trial_period', defaultMessage: 'You are on the 30 day free trial. After it ends, you will need to subscribe to get all features.' + }, + manageSubscription: { + id: 'cboard.components.Settings.Subscribe.manageSubscription', + defaultMessage: 'Manage Subscription' } }); From b03b93e7b41aef96ea1f1981f7f9c46451b6eecd Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Fri, 3 Mar 2023 13:33:01 -0300 Subject: [PATCH 02/17] Add subscriptionInfo component --- .../Settings/Subscribe/Subscribe.component.js | 57 +-------------- .../Settings/Subscribe/Subscribe.css | 3 +- .../Settings/Subscribe/SubscriptionInfo.js | 72 +++++++++++++++++++ 3 files changed, 77 insertions(+), 55 deletions(-) create mode 100644 src/components/Settings/Subscribe/SubscriptionInfo.js diff --git a/src/components/Settings/Subscribe/Subscribe.component.js b/src/components/Settings/Subscribe/Subscribe.component.js index 8243ef911..28530eed1 100644 --- a/src/components/Settings/Subscribe/Subscribe.component.js +++ b/src/components/Settings/Subscribe/Subscribe.component.js @@ -14,7 +14,6 @@ import ListItemText from '@material-ui/core/ListItemText'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import CheckCircleIcon from '@material-ui/icons/CheckCircle'; import Alert from '@material-ui/lab/Alert'; -import Paper from '@material-ui/core/Paper'; import FullScreenDialog from '../../UI/FullScreenDialog'; import messages from './Subscribe.messages'; @@ -29,11 +28,6 @@ import { import { formatDuration, formatTitle } from './Subscribe.helpers'; import { isAndroid } from '../../../cordova-util'; import { CircularProgress } from '@material-ui/core'; -import Chip from '@material-ui/core/Chip'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableRow from '@material-ui/core/TableRow'; import { Link } from 'react-router-dom'; import RefreshIcon from '@material-ui/icons/Refresh'; @@ -44,6 +38,7 @@ import { PROCCESING, ON_HOLD } from '../../../providers/SubscriptionProvider/SubscriptionProvider.constants'; +import SubscriptionInfo from './SubscriptionInfo'; const propTypes = { /** @@ -250,52 +245,6 @@ const Subscribe = ({ ]; }; - const subscriptionInfo = () => { - const subscription = { - plan: 'Premium All Features', - status: 'active', - planAmount: '3USD / month', - nextPayment: '25/5/12' - }; - return [ - - Subscription Info -
-
- - - {Object.entries(subscription).map(row => ( - - - {row[0]} - - - {row[0] === 'status' ? ( - - ) : ( - row[1] - )} - - - ))} - -
-
-
-
- -
- - ]; - }; - return (
- {renderSubscriptionStatus()} + {!subscription.isSubscribed && renderSubscriptionStatus()} - {!subscription.isSubscribed ? renderProducts() : subscriptionInfo()} + {!subscription.isSubscribed ? renderProducts() : }
); diff --git a/src/components/Settings/Subscribe/Subscribe.css b/src/components/Settings/Subscribe/Subscribe.css index c192b7586..687df3158 100644 --- a/src/components/Settings/Subscribe/Subscribe.css +++ b/src/components/Settings/Subscribe/Subscribe.css @@ -20,6 +20,7 @@ .Subscribe__Info { padding: 1rem; + margin-top: 1rem; } .Subscribe__Info__Container { @@ -35,6 +36,6 @@ .Subscribe__Info__Button__Container { display: flex; - justify-content: end; + justify-content: flex-end; margin-top: 2rem; } diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js new file mode 100644 index 000000000..a3808ac20 --- /dev/null +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { connect } from 'react-redux'; + +import Button from '@material-ui/core/Button'; +import { Typography } from '@material-ui/core'; + +import { FormattedMessage } from 'react-intl'; +import messages from './Subscribe.messages'; + +import Chip from '@material-ui/core/Chip'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; + +const subscriptionInfo = () => { + const subscription = { + plan: 'Premium All Features', + status: 'active', + planAmount: '3USD / month', + nextPayment: '25/5/12' + }; + return [ + + Subscription Info +
+
+ + + {Object.entries(subscription).map(row => ( + + + {row[0]} + + + {row[0] === 'status' ? ( + + ) : ( + row[1] + )} + + + ))} + +
+
+
+
+ +
+ + ]; +}; + +const mapStateToProps = ({ subscription: { premiumRequiredModalState } }) => ({ + premiumRequiredModalState +}); + +const mapDispatchToProps = {}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(subscriptionInfo); From c740a7cfb9bb3c3c98835883404d4306fa854977 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Mon, 6 Mar 2023 18:21:40 -0300 Subject: [PATCH 03/17] Add subscription info message --- src/components/Settings/Subscribe/Subscribe.messages.js | 4 ++++ src/components/Settings/Subscribe/SubscriptionInfo.js | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Settings/Subscribe/Subscribe.messages.js b/src/components/Settings/Subscribe/Subscribe.messages.js index 5544f5b92..b10a52f00 100644 --- a/src/components/Settings/Subscribe/Subscribe.messages.js +++ b/src/components/Settings/Subscribe/Subscribe.messages.js @@ -109,6 +109,10 @@ export default defineMessages({ defaultMessage: 'You are on the 30 day free trial. After it ends, you will need to subscribe to get all features.' }, + subscriptionInfo: { + id: 'cboard.components.Settings.Subscribe.subscriptionInfo', + defaultMessage: 'Subscription Info' + }, manageSubscription: { id: 'cboard.components.Settings.Subscribe.manageSubscription', defaultMessage: 'Manage Subscription' diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js index a3808ac20..a296a77e6 100644 --- a/src/components/Settings/Subscribe/SubscriptionInfo.js +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -21,9 +21,12 @@ const subscriptionInfo = () => { planAmount: '3USD / month', nextPayment: '25/5/12' }; + return [ - Subscription Info + + +
From d949c886e0886fe4c577d749a02430346160d5ff Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Tue, 7 Mar 2023 14:42:20 -0300 Subject: [PATCH 04/17] Update product on API after order --- src/api/api.js | 20 +++++++++++++++++++ .../Settings/Subscribe/Subscribe.container.js | 19 +++++++++++++----- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/api/api.js b/src/api/api.js index afdfccc00..9c6dff12c 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -538,6 +538,26 @@ class API { ); return data; } + + async updateSubscriber(subscriber = {}) { + const authToken = getAuthToken(); + if (!(authToken && authToken.length)) { + throw new Error('Need to be authenticated to perform this request'); + } + + const headers = { + Authorization: `Bearer ${authToken}` + }; + const subscriberId = getSubscriberId(); + const { data } = await this.axiosInstance.patch( + `/subscriber/${subscriberId}`, + subscriber, + { + headers + } + ); + return data; + } } const API_INSTANCE = new API({}); diff --git a/src/components/Settings/Subscribe/Subscribe.container.js b/src/components/Settings/Subscribe/Subscribe.container.js index d78f681b1..839d2cfde 100644 --- a/src/components/Settings/Subscribe/Subscribe.container.js +++ b/src/components/Settings/Subscribe/Subscribe.container.js @@ -20,6 +20,8 @@ import { PROCCESING } from '../../../providers/SubscriptionProvider/SubscriptionProvider.constants'; +import { formatTitle } from './Subscribe.helpers'; + export class SubscribeContainer extends PureComponent { static propTypes = { history: PropTypes.object.isRequired, @@ -123,6 +125,15 @@ export class SubscribeContainer extends PureComponent { isLogged && subscription.androidSubscriptionState === NOT_SUBSCRIBED ) { + const newProduct = { + product: { + subscriptionId: product.id, + title: formatTitle(product.title), + billingPeriod: offer.pricingPhases[0].billingPeriod, + price: offer.pricingPhases[0].price + } + }; + try { updateSubscription({ isSubscribed: false, @@ -132,6 +143,8 @@ export class SubscribeContainer extends PureComponent { const subscriber = await API.getSubscriber(user.id); updateSubscriberId(subscriber._id); + await API.updateSubscriber(newProduct); + const order = await window.CdvPurchase.store.order(offer); if (order && order.isError) throw order; } catch (e) { @@ -141,11 +154,7 @@ export class SubscribeContainer extends PureComponent { userId: user.id, country: location.countryCode || 'Not localized', status: NOT_SUBSCRIBED, - product: { - planId: offer.id, - subscriptionId: product.id, - status: 'valid' - } + newProduct }; const res = await API.createSubscriber(newSubscriber); updateSubscriberId(res._id); From 4604450ce0ee3ef7a29d2e570859aa49b63f52d8 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Tue, 7 Mar 2023 14:44:30 -0300 Subject: [PATCH 05/17] Get product from state and show on SubInfo --- .../Settings/Subscribe/Subscribe.messages.js | 16 ++++++++ .../Settings/Subscribe/SubscriptionInfo.js | 39 ++++++++++++++----- .../SubscriptionProvider.reducer.js | 5 +++ 3 files changed, 51 insertions(+), 9 deletions(-) diff --git a/src/components/Settings/Subscribe/Subscribe.messages.js b/src/components/Settings/Subscribe/Subscribe.messages.js index b10a52f00..029fb0123 100644 --- a/src/components/Settings/Subscribe/Subscribe.messages.js +++ b/src/components/Settings/Subscribe/Subscribe.messages.js @@ -116,5 +116,21 @@ export default defineMessages({ manageSubscription: { id: 'cboard.components.Settings.Subscribe.manageSubscription', defaultMessage: 'Manage Subscription' + }, + planAmount: { + id: 'cboard.components.Settings.Subscribe.planAmount', + defaultMessage: 'Plan Amount:' + }, + title: { + id: 'cboard.components.Settings.Subscribe.title', + defaultMessage: 'Plan:' + }, + nextPayment: { + id: 'cboard.components.Settings.Subscribe.nextPayment', + defaultMessage: 'Next payment at:' + }, + status: { + id: 'cboard.components.Settings.Subscribe.status', + defaultMessage: 'Status' } }); diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js index a296a77e6..532732625 100644 --- a/src/components/Settings/Subscribe/SubscriptionInfo.js +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -13,13 +13,30 @@ import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; +import { formatDuration } from './Subscribe.helpers'; + +const subscriptionInfo = ({ + product, + expiryDate, + androidSubscriptionState +}) => { + // const subscription = { + // plan: 'Premium All Features', + // status: 'active', + // planAmount: '3USD / month', + // nextPayment: '25/5/12' + // }; + + const { title, billingPeriod, price } = product; + const planAmount = `${price} / ${formatDuration(billingPeriod)}`; + + const formatedDate = new Date(expiryDate).toLocaleString(); -const subscriptionInfo = () => { const subscription = { - plan: 'Premium All Features', - status: 'active', - planAmount: '3USD / month', - nextPayment: '25/5/12' + title, + status: androidSubscriptionState, + planAmount, + nextPayment: formatedDate }; return [ @@ -34,12 +51,12 @@ const subscriptionInfo = () => { {Object.entries(subscription).map(row => ( - {row[0]} + {} {row[0] === 'status' ? ( } size="small" color="primary" style={{ backgroundColor: 'green' }} @@ -63,8 +80,12 @@ const subscriptionInfo = () => { ]; }; -const mapStateToProps = ({ subscription: { premiumRequiredModalState } }) => ({ - premiumRequiredModalState +const mapStateToProps = ({ + subscription: { product, expiryDate, androidSubscriptionState } +}) => ({ + product, + expiryDate, + androidSubscriptionState }); const mapDispatchToProps = {}; diff --git a/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js b/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js index 9d0be13e9..a9dda968b 100644 --- a/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js +++ b/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js @@ -30,6 +30,11 @@ const initialState = { premiumRequiredModalState: { open: false, showTryPeriodFinishedMessages: false + }, + product: { + title: '', + billingPeriod: '', + price: '' } }; From bec0fdc248aea19a2951d0b715415bd9f6f2a325 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 8 Mar 2023 21:07:01 -0300 Subject: [PATCH 06/17] Add updateProduct action --- .../SubscriptionProvider.actions.js | 10 +++++++++- .../SubscriptionProvider.constants.js | 1 + .../SubscriptionProvider.reducer.js | 8 +++++++- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/providers/SubscriptionProvider/SubscriptionProvider.actions.js b/src/providers/SubscriptionProvider/SubscriptionProvider.actions.js index 1cce7855a..499df40a3 100644 --- a/src/providers/SubscriptionProvider/SubscriptionProvider.actions.js +++ b/src/providers/SubscriptionProvider/SubscriptionProvider.actions.js @@ -12,7 +12,8 @@ import { NOT_SUBSCRIBED, CANCELED, ACTIVE, - REQUIRING_PREMIUM_COUNTRIES + REQUIRING_PREMIUM_COUNTRIES, + UPDATE_PRODUCT } from './SubscriptionProvider.constants'; import { isLogged } from '../../components/App/App.selectors'; @@ -166,3 +167,10 @@ export function hidePremiumRequired() { type: HIDE_PREMIUM_REQUIRED }; } + +export function updateProduct(product = {}) { + return { + type: UPDATE_PRODUCT, + product + }; +} diff --git a/src/providers/SubscriptionProvider/SubscriptionProvider.constants.js b/src/providers/SubscriptionProvider/SubscriptionProvider.constants.js index cbffbee4d..e65ff6da6 100644 --- a/src/providers/SubscriptionProvider/SubscriptionProvider.constants.js +++ b/src/providers/SubscriptionProvider/SubscriptionProvider.constants.js @@ -12,6 +12,7 @@ export const SHOW_PREMIUM_REQUIRED = 'cboard/subscription/SHOW_PREMIUM_REQUIRED'; export const HIDE_PREMIUM_REQUIRED = 'cboard/subscription/HIDE_PREMIUM_REQUIRED'; +export const UPDATE_PRODUCT = 'cboard/subscription/UPDATE_PRODUCT'; export const NOT_SUBSCRIBED = 'not_subscribed'; export const PROCCESING = 'proccesing'; diff --git a/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js b/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js index a9dda968b..8b8c57057 100644 --- a/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js +++ b/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js @@ -8,7 +8,8 @@ import { UPDATE_SUBSCRIPTION_ERROR, SHOW_PREMIUM_REQUIRED, HIDE_PREMIUM_REQUIRED, - NOT_SUBSCRIBED + NOT_SUBSCRIBED, + UPDATE_PRODUCT } from './SubscriptionProvider.constants'; import { LOGOUT, @@ -77,6 +78,11 @@ function subscriptionProviderReducer(state = initialState, action) { isSubscribed, androidSubscriptionState }; + case UPDATE_PRODUCT: + return { + ...state, + product: action.product + }; case UPDATE_SUBSCRIPTION_ERROR: const { showError, code, message } = action.payload; return { From 094bde7fec1900478a6481aeb30f47f1342066fb Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 8 Mar 2023 21:07:47 -0300 Subject: [PATCH 07/17] Update product state on login succes --- .../SubscriptionProvider/SubscriptionProvider.reducer.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js b/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js index 8b8c57057..6a95aedbd 100644 --- a/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js +++ b/src/providers/SubscriptionProvider/SubscriptionProvider.reducer.js @@ -98,14 +98,16 @@ function subscriptionProviderReducer(state = initialState, action) { const { id = '', status = NOT_SUBSCRIBED, - expiryDate: expiry = null + expiryDate: expiry = null, + product = initialState.product } = subscriber; return { ...state, subscriberId: id, androidSubscriptionState: status, - expiryDate: expiry + expiryDate: expiry, + product }; case LOGOUT: return initialState; From 8d9b02d583eec6780f5d4ade21f63abbcae71aab Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 8 Mar 2023 21:13:41 -0300 Subject: [PATCH 08/17] Proper chip color status --- src/components/Settings/Subscribe/SubscriptionInfo.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js index 532732625..1ad7a31f5 100644 --- a/src/components/Settings/Subscribe/SubscriptionInfo.js +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -14,6 +14,11 @@ import TableCell from '@material-ui/core/TableCell'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import { formatDuration } from './Subscribe.helpers'; +import { + ACTIVE, + CANCELED, + IN_GRACE_PERIOD +} from '../../../providers/SubscriptionProvider/SubscriptionProvider.constants'; const subscriptionInfo = ({ product, @@ -32,6 +37,10 @@ const subscriptionInfo = ({ const formatedDate = new Date(expiryDate).toLocaleString(); + const statusColor = + androidSubscriptionState === ACTIVE + ? { backgroundColor: 'green' } + : { backgroundColor: 'darkorange' }; const subscription = { title, status: androidSubscriptionState, @@ -59,7 +68,7 @@ const subscriptionInfo = ({ label={} size="small" color="primary" - style={{ backgroundColor: 'green' }} + style={statusColor} /> ) : ( row[1] From 863c1e2d4e344041949cb822f6d1b60ee67fe42f Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 8 Mar 2023 21:24:19 -0300 Subject: [PATCH 09/17] Update product after submit subscribe --- .../Settings/Subscribe/Subscribe.container.js | 33 ++++++++++++++----- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/Settings/Subscribe/Subscribe.container.js b/src/components/Settings/Subscribe/Subscribe.container.js index 839d2cfde..4af9197df 100644 --- a/src/components/Settings/Subscribe/Subscribe.container.js +++ b/src/components/Settings/Subscribe/Subscribe.container.js @@ -13,7 +13,8 @@ import { updateSubscriberId, updateSubscription, updateAndroidSubscriptionState, - updateSubscriptionError + updateSubscriptionError, + updateProduct } from '../../../providers/SubscriptionProvider/SubscriptionProvider.actions'; import { NOT_SUBSCRIBED, @@ -35,11 +36,18 @@ export class SubscribeContainer extends PureComponent { }; componentDidMount() { + const { updateSubscriptionError, updateSubscription } = this.props; + if (isAndroid()) { window.CdvPurchase.store.when('subscription').updated(this.setProducts); this.props.comprobeSubscription(); } this.setProducts(); + // updateSubscription({ + // isSubscribed: true, + // expiryDate: new Date(), + // androidSubscriptionState: ACTIVE + // }); } setProducts = () => { @@ -118,7 +126,8 @@ export class SubscribeContainer extends PureComponent { location, updateSubscriberId, updateSubscription, - subscription + subscription, + updateProduct } = this.props; if (isAndroid()) { if ( @@ -126,11 +135,14 @@ export class SubscribeContainer extends PureComponent { subscription.androidSubscriptionState === NOT_SUBSCRIBED ) { const newProduct = { + title: formatTitle(product.title), + billingPeriod: offer.pricingPhases[0].billingPeriod, + price: offer.pricingPhases[0].price + }; + const apiProduct = { product: { - subscriptionId: product.id, - title: formatTitle(product.title), - billingPeriod: offer.pricingPhases[0].billingPeriod, - price: offer.pricingPhases[0].price + ...newProduct, + subscriptionId: product.id } }; @@ -143,7 +155,8 @@ export class SubscribeContainer extends PureComponent { const subscriber = await API.getSubscriber(user.id); updateSubscriberId(subscriber._id); - await API.updateSubscriber(newProduct); + await API.updateSubscriber(apiProduct); + updateProduct(newProduct); const order = await window.CdvPurchase.store.order(offer); if (order && order.isError) throw order; @@ -154,10 +167,11 @@ export class SubscribeContainer extends PureComponent { userId: user.id, country: location.countryCode || 'Not localized', status: NOT_SUBSCRIBED, - newProduct + apiProduct }; const res = await API.createSubscriber(newSubscriber); updateSubscriberId(res._id); + updateProduct(newProduct); const order = await window.CdvPurchase.store.order(offer); if (order && order.isError) throw order; } catch (e) { @@ -219,7 +233,8 @@ const mapDispatchToProps = { updateSubscription, comprobeSubscription, updateAndroidSubscriptionState, - updateSubscriptionError + updateSubscriptionError, + updateProduct }; export default connect( From dd8d0ee8660204275b2839136cee12e25ccba3e0 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 8 Mar 2023 21:32:03 -0300 Subject: [PATCH 10/17] Payment label according to the status --- .../Settings/Subscribe/Subscribe.messages.js | 14 +++++++++++--- .../Settings/Subscribe/SubscriptionInfo.js | 15 +++++++++++++-- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/components/Settings/Subscribe/Subscribe.messages.js b/src/components/Settings/Subscribe/Subscribe.messages.js index 029fb0123..b58ba2053 100644 --- a/src/components/Settings/Subscribe/Subscribe.messages.js +++ b/src/components/Settings/Subscribe/Subscribe.messages.js @@ -125,12 +125,20 @@ export default defineMessages({ id: 'cboard.components.Settings.Subscribe.title', defaultMessage: 'Plan:' }, + status: { + id: 'cboard.components.Settings.Subscribe.status', + defaultMessage: 'Status' + }, nextPayment: { id: 'cboard.components.Settings.Subscribe.nextPayment', defaultMessage: 'Next payment at:' }, - status: { - id: 'cboard.components.Settings.Subscribe.status', - defaultMessage: 'Status' + premiumWillEnd: { + id: 'cboard.components.Settings.Subscribe.premiumWillEnd', + defaultMessage: 'The premium acces will end on:' + }, + fixPaymentIssue: { + id: 'cboard.components.Settings.Subscribe.fixPaymentIssue', + defaultMessage: 'Fix your payment issues before the:' } }); diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js index 1ad7a31f5..8fe624d21 100644 --- a/src/components/Settings/Subscribe/SubscriptionInfo.js +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -41,11 +41,18 @@ const subscriptionInfo = ({ androidSubscriptionState === ACTIVE ? { backgroundColor: 'green' } : { backgroundColor: 'darkorange' }; + + const getPaymentLabel = () => { + if (androidSubscriptionState === ACTIVE) return 'nextPayment'; + if (androidSubscriptionState === IN_GRACE_PERIOD) return 'fixPaymentIssue'; + if (androidSubscriptionState === CANCELED) return 'premiumWillEnd'; + }; + const subscription = { title, status: androidSubscriptionState, planAmount, - nextPayment: formatedDate + paymentLabel: formatedDate }; return [ @@ -60,7 +67,11 @@ const subscriptionInfo = ({ {Object.entries(subscription).map(row => ( - {} + {row[0] !== 'paymentLabel' ? ( + + ) : ( + + )} {row[0] === 'status' ? ( From 2cd4fb99216f22527fcba01d462595bda44436b3 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 8 Mar 2023 21:32:47 -0300 Subject: [PATCH 11/17] Add functionability to manage subscription button --- src/components/Settings/Subscribe/SubscriptionInfo.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js index 8fe624d21..5a639548e 100644 --- a/src/components/Settings/Subscribe/SubscriptionInfo.js +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -92,7 +92,14 @@ const subscriptionInfo = ({
-
From b42010a92e7247b0e6f91a6bd59a2d5374d97563 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 8 Mar 2023 21:35:29 -0300 Subject: [PATCH 12/17] Change status messages for subsInfo component --- .../Settings/Subscribe/Subscribe.messages.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Settings/Subscribe/Subscribe.messages.js b/src/components/Settings/Subscribe/Subscribe.messages.js index b58ba2053..5a8916f0f 100644 --- a/src/components/Settings/Subscribe/Subscribe.messages.js +++ b/src/components/Settings/Subscribe/Subscribe.messages.js @@ -59,17 +59,15 @@ export default defineMessages({ }, active: { id: 'cboard.components.Settings.Subscribe.active', - defaultMessage: 'You are already subscribed. Your next pay is on: {e}' + defaultMessage: 'ACTIVE' }, canceled: { id: 'cboard.components.Settings.Subscribe.canceled', - defaultMessage: - 'Your subscription was canceled. The premium acces will end on: {e}' + defaultMessage: 'CANCELED' }, in_grace_period: { id: 'cboard.components.Settings.Subscribe.in_grace_period', - defaultMessage: - 'Your subscription is on grace period. Please fix your payment issues before the date: {e} ' + defaultMessage: 'GRACE PERIOD' }, proccesing: { id: 'cboard.components.Settings.Subscribe.processing', @@ -77,7 +75,7 @@ export default defineMessages({ }, expired: { id: 'cboard.components.Settings.Subscribe.expired', - defaultMessage: 'Your subscription expired on: {e}' + defaultMessage: 'EXPIRED' }, paused: { id: 'cboard.components.Settings.Subscribe.paused', From b5d466559953ac2ece4b40d3c83d52013cbcf016 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 8 Mar 2023 21:45:33 -0300 Subject: [PATCH 13/17] Delet unnecesary comments --- src/components/Settings/Subscribe/Subscribe.container.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/Settings/Subscribe/Subscribe.container.js b/src/components/Settings/Subscribe/Subscribe.container.js index 4af9197df..2dfb34553 100644 --- a/src/components/Settings/Subscribe/Subscribe.container.js +++ b/src/components/Settings/Subscribe/Subscribe.container.js @@ -36,18 +36,11 @@ export class SubscribeContainer extends PureComponent { }; componentDidMount() { - const { updateSubscriptionError, updateSubscription } = this.props; - if (isAndroid()) { window.CdvPurchase.store.when('subscription').updated(this.setProducts); this.props.comprobeSubscription(); } this.setProducts(); - // updateSubscription({ - // isSubscribed: true, - // expiryDate: new Date(), - // androidSubscriptionState: ACTIVE - // }); } setProducts = () => { From 13e25ba93468ca141540f3b18d270ac69e7c21f7 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Tue, 21 Mar 2023 18:10:58 -0300 Subject: [PATCH 14/17] Add refresh subscription button --- .../Settings/Subscribe/Subscribe.component.js | 6 +++++- .../Settings/Subscribe/Subscribe.messages.js | 2 +- .../Settings/Subscribe/SubscriptionInfo.js | 19 +++++++++++++++---- 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/Settings/Subscribe/Subscribe.component.js b/src/components/Settings/Subscribe/Subscribe.component.js index 28530eed1..96fbe9710 100644 --- a/src/components/Settings/Subscribe/Subscribe.component.js +++ b/src/components/Settings/Subscribe/Subscribe.component.js @@ -255,7 +255,11 @@ const Subscribe = ({ > {!subscription.isSubscribed && renderSubscriptionStatus()} - {!subscription.isSubscribed ? renderProducts() : } + {!subscription.isSubscribed ? ( + renderProducts() + ) : ( + + )} ); diff --git a/src/components/Settings/Subscribe/Subscribe.messages.js b/src/components/Settings/Subscribe/Subscribe.messages.js index 5a8916f0f..eb3bae704 100644 --- a/src/components/Settings/Subscribe/Subscribe.messages.js +++ b/src/components/Settings/Subscribe/Subscribe.messages.js @@ -91,7 +91,7 @@ export default defineMessages({ }, refresh: { id: 'cboard.components.Settings.Subscribe.refresh', - defaultMessage: 'REFRESH' + defaultMessage: 'Refresh' }, error: { id: 'cboard.components.Settings.Subscribe.error', diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js index 5a639548e..31b91e899 100644 --- a/src/components/Settings/Subscribe/SubscriptionInfo.js +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -3,8 +3,7 @@ import { connect } from 'react-redux'; import Button from '@material-ui/core/Button'; import { Typography } from '@material-ui/core'; - -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, injectIntl } from 'react-intl'; import messages from './Subscribe.messages'; import Chip from '@material-ui/core/Chip'; @@ -20,10 +19,15 @@ import { IN_GRACE_PERIOD } from '../../../providers/SubscriptionProvider/SubscriptionProvider.constants'; +import RefreshIcon from '@material-ui/icons/Refresh'; +import IconButton from '../../UI/IconButton'; + const subscriptionInfo = ({ product, expiryDate, - androidSubscriptionState + androidSubscriptionState, + onRefreshSubscription, + intl }) => { // const subscription = { // plan: 'Premium All Features', @@ -92,6 +96,12 @@ const subscriptionInfo = ({
+ + + @@ -120,4 +131,4 @@ const mapDispatchToProps = {}; export default connect( mapStateToProps, mapDispatchToProps -)(subscriptionInfo); +)(injectIntl(subscriptionInfo)); From d2acfa4a56c40af993734a055a9b28e27d8bd349 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Tue, 21 Mar 2023 18:11:23 -0300 Subject: [PATCH 15/17] Add prop types --- .../Settings/Subscribe/SubscriptionInfo.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js index 31b91e899..54d04666e 100644 --- a/src/components/Settings/Subscribe/SubscriptionInfo.js +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button'; import { Typography } from '@material-ui/core'; import { FormattedMessage, injectIntl } from 'react-intl'; import messages from './Subscribe.messages'; - +import PropTypes from 'prop-types'; import Chip from '@material-ui/core/Chip'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; @@ -22,6 +22,14 @@ import { import RefreshIcon from '@material-ui/icons/Refresh'; import IconButton from '../../UI/IconButton'; +const propTypes = { + product: PropTypes.object.isRequired, + expiryDate: PropTypes.string.isRequired, + androidSubscriptionState: PropTypes.string.isRequired, + onRefreshSubscription: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired +}; + const subscriptionInfo = ({ product, expiryDate, @@ -118,6 +126,8 @@ const subscriptionInfo = ({ ]; }; +subscriptionInfo.propTypes = propTypes; + const mapStateToProps = ({ subscription: { product, expiryDate, androidSubscriptionState } }) => ({ From a93d45e6b0f39d7cbf02955e7bc53e8b8acb6275 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 22 Mar 2023 10:36:17 -0300 Subject: [PATCH 16/17] Add messages on cboard json --- .../Settings/Subscribe/Subscribe.messages.js | 4 ++-- src/translations/src/cboard.json | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/Settings/Subscribe/Subscribe.messages.js b/src/components/Settings/Subscribe/Subscribe.messages.js index eb3bae704..b4c07ebff 100644 --- a/src/components/Settings/Subscribe/Subscribe.messages.js +++ b/src/components/Settings/Subscribe/Subscribe.messages.js @@ -117,7 +117,7 @@ export default defineMessages({ }, planAmount: { id: 'cboard.components.Settings.Subscribe.planAmount', - defaultMessage: 'Plan Amount:' + defaultMessage: 'Plan amount:' }, title: { id: 'cboard.components.Settings.Subscribe.title', @@ -125,7 +125,7 @@ export default defineMessages({ }, status: { id: 'cboard.components.Settings.Subscribe.status', - defaultMessage: 'Status' + defaultMessage: 'Status:' }, nextPayment: { id: 'cboard.components.Settings.Subscribe.nextPayment', diff --git a/src/translations/src/cboard.json b/src/translations/src/cboard.json index ad79513a6..c84b30f46 100644 --- a/src/translations/src/cboard.json +++ b/src/translations/src/cboard.json @@ -464,18 +464,26 @@ "cboard.components.Settings.Subscribe.sharePhrases": "Share phrases", "cboard.components.Settings.Subscribe.privateSupportChannel": "Private support channel", "cboard.components.Settings.Subscribe.voiceRecordingForTiles": "Voice recording for tiles", - "cboard.components.Settings.Subscribe.active": "You are already subscribed. Your next pay is on: {e}", - "cboard.components.Settings.Subscribe.canceled": "Your subscription was canceled. The premium acces will end on: {e}", - "cboard.components.Settings.Subscribe.in_grace_period": "Your subscription is on grace period. Please fix your payment issues before the date: {e} ", + "cboard.components.Settings.Subscribe.active": "ACTIVE", + "cboard.components.Settings.Subscribe.canceled": "CANCELED", + "cboard.components.Settings.Subscribe.in_grace_period": "GRACE PERIOD", "cboard.components.Settings.Subscribe.proccesing": "We are processing your subscription...", - "cboard.components.Settings.Subscribe.expired": "Your subscription expired on: {e}", + "cboard.components.Settings.Subscribe.expired": "EXPIRED", "cboard.components.Settings.Subscribe.paused": "Your subscription was paused on: {e}", "cboard.components.Settings.Subscribe.on_hold": "Your subscription expired on: {e}", "cboard.components.Settings.Subscribe.not_subscribed": "You are not subscribed. ", - "cboard.components.Settings.Subscribe.refresh": "REFRESH", + "cboard.components.Settings.Subscribe.refresh": "Refresh", "cboard.components.Settings.Subscribe.error": "Oops something went wrong. Please try again later", "cboard.components.Settings.Subscribe.empty_product": "There are no subscription available at this moment. Please try again later.", "cboard.components.Settings.Subscribe.on_trial_period": "You are on the 30 day free trial. After it ends, you will need to subscribe to get all features.", + "cboard.components.Settings.Subscribe.subscriptionInfo": "Subscription Info", + "cboard.components.Settings.Subscribe.manageSubscription": "Manage Subscription", + "cboard.components.Settings.Subscribe.planAmount": "Plan amount:", + "cboard.components.Settings.Subscribe.title": "Plan:", + "cboard.components.Settings.Subscribe.status": "Status:", + "cboard.components.Settings.Subscribe.nextPayment": "Next payment at:", + "cboard.components.Settings.Subscribe.premiumWillEnd": "The premium acces will end on:", + "cboard.components.Settings.Subscribe.fixPaymentIssue": "Fix your payment issues before the:", "cboard.components.Settings.Language.language": "Language", "cboard.components.Settings.Language.moreLanguages": "More Languages", "cboard.components.Settings.Language.close": "Close", From cddd242226928053c63186756b2ef35909fca0c7 Mon Sep 17 00:00:00 2001 From: Rodri Sanchez Date: Wed, 22 Mar 2023 15:22:17 -0300 Subject: [PATCH 17/17] Replace magic number with constants --- .../Settings/Subscribe/SubscriptionInfo.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/Settings/Subscribe/SubscriptionInfo.js b/src/components/Settings/Subscribe/SubscriptionInfo.js index 54d04666e..abde47920 100644 --- a/src/components/Settings/Subscribe/SubscriptionInfo.js +++ b/src/components/Settings/Subscribe/SubscriptionInfo.js @@ -30,6 +30,9 @@ const propTypes = { intl: PropTypes.object.isRequired }; +const LABEL = 0; +const VALUE = 1; + const subscriptionInfo = ({ product, expiryDate, @@ -77,24 +80,24 @@ const subscriptionInfo = ({
{Object.entries(subscription).map(row => ( - + - {row[0] !== 'paymentLabel' ? ( - + {row[LABEL] !== 'paymentLabel' ? ( + ) : ( )} - {row[0] === 'status' ? ( + {row[LABEL] === 'status' ? ( } + label={} size="small" color="primary" style={statusColor} /> ) : ( - row[1] + row[VALUE] )}