Skip to content

Commit

Permalink
Merge pull request #1428 from RodriSanchez1/premium/RefactorSubscribe…
Browse files Browse the repository at this point in the history 
…Component

Premium / Refactor subscribe component
  • Loading branch information
@martinbedouret
martinbedouret authored Mar 27, 2023
2 parents be603a4 + 942de65 commit d82542a
Show file tree
Hide file tree
Showing 3 changed files with 219 additions and 197 deletions.
206 changes: 10 additions & 196 deletions src/components/Settings/Subscribe/Subscribe.component.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,14 @@
import React from 'react';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';

import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
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 FullScreenDialog from '../../UI/FullScreenDialog';
import messages from './Subscribe.messages';
import './Subscribe.css';

import {
INCLUDED_FEATURES,
EMPTY_PRODUCT,
ERROR,
ON_TRIAL_PERIOD
} from './Subscribe.constants';
import { formatDuration, formatTitle } from './Subscribe.helpers';
import { isAndroid } from '../../../cordova-util';
import { CircularProgress } from '@material-ui/core';

import { Link } from 'react-router-dom';
import RefreshIcon from '@material-ui/icons/Refresh';

import {
EXPIRED,
NOT_SUBSCRIBED,
PROCCESING,
ON_HOLD
} from '../../../providers/SubscriptionProvider/SubscriptionProvider.constants';
import SubscriptionInfo from './SubscriptionInfo';
import SubscriptionPlans from './SubscriptionPlans';

const propTypes = {
/**
Expand All @@ -48,7 +18,7 @@ const propTypes = {
/**
* Callback fired when clicking the subscribe button
*/
subscribe: PropTypes.func.isRequired,
onSubscribe: PropTypes.func.isRequired,
/**
* flag for user
*/
Expand Down Expand Up @@ -76,7 +46,7 @@ const defaultProps = {
const Subscribe = ({
onClose,
isLogged,
subscribe,
onSubscribe,
name,
email,
location: { country, countryCode },
Expand All @@ -85,166 +55,6 @@ const Subscribe = ({
subscription,
onRefreshSubscription
}) => {
const renderIncludedFeatures = () => {
return INCLUDED_FEATURES.map(feature => {
return [
<ListItem key={feature}>
<ListItemIcon>
<CheckCircleIcon />
</ListItemIcon>
<ListItemText
primary={<FormattedMessage {...messages[feature]} />}
secondary={null}
/>
</ListItem>
];
});
};
const renderProducts = () => {
const canPurchase =
subscription.androidSubscriptionState === NOT_SUBSCRIBED ||
subscription.androidSubscriptionState === EXPIRED ||
subscription.androidSubscriptionState === ON_HOLD;
return [
<Grid
container
spacing={0}
alignItems="center"
justifyContent="space-around"
>
{products.map(product => {
return product.offers.map(offer => {
return [
<Grid
key={offer.id}
item
xs={12}
sm={6}
style={{ padding: '5px', maxWidth: 328 }}
>
<Card style={{ minWidth: 275 }} variant="outlined">
<CardContent>
<Typography
sx={{ fontSize: 19 }}
color="secondary"
gutterBottom
>
{formatTitle(product.title)}
</Typography>
<Typography variant="h3" component="div">
{offer.pricingPhases[0].price} /
{formatDuration(offer.pricingPhases[0].billingPeriod)}
</Typography>
<Button
variant="contained"
fullWidth={true}
color="primary"
{...(!isLogged
? { component: Link, to: '/login-signup' }
: { onClick: subscribe(product, offer) })}
disabled={!canPurchase}
>
<FormattedMessage {...messages.subscribe} />
</Button>
<Typography sx={{ mb: 1.5 }} color="secondary">
<br />
<br />
<FormattedMessage {...messages.includedFeatures} />
</Typography>
<List disablePadding style={{ padding: '5px' }}>
{renderIncludedFeatures()}
</List>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Grid>
];
});
})}
</Grid>
];
};

const renderSubscriptionStatus = () => {
const {
androidSubscriptionState,
expiryDate,
error,
isOnTrialPeriod,
isSubscribed
} = subscription;

const subscriptionStatus = (function() {
if (isAndroid()) {
if (error.showError) return ERROR;
if (
isOnTrialPeriod &&
!isSubscribed &&
androidSubscriptionState !== PROCCESING
)
return ON_TRIAL_PERIOD;
if (products.length || androidSubscriptionState !== NOT_SUBSCRIBED)
return androidSubscriptionState;
return EMPTY_PRODUCT;
}
return NOT_SUBSCRIBED;
})();

const alertProps = {
active: 'success',
canceled: 'warning',
in_grace_period: 'warning',
proccesing: 'info',
not_subscribed: 'info',
error: 'error',
empty_product: 'warning',
on_trial_period: 'info',

on_hold: 'warning', //TODO
paused: 'info', //TODO
expired: 'warning' //TODO
};

const expiryDateFormated = expiryDate
? new Date(expiryDate).toLocaleString()
: '';

return [
<Alert
variant="filled"
severity={alertProps[subscriptionStatus]}
className="Subscribe__Alert"
icon={
subscriptionStatus === PROCCESING ? (
<CircularProgress size={20} />
) : (
''
)
}
action={
![ERROR, EMPTY_PRODUCT, ON_TRIAL_PERIOD].includes(
subscriptionStatus
) && (
<Button
color="inherit"
size="small"
onClick={onRefreshSubscription}
>
<RefreshIcon />
</Button>
)
}
>
<FormattedMessage
{...messages[subscriptionStatus]}
values={{ e: `${expiryDateFormated}` }}
/>
</Alert>
];
};

return (
<div className="Subscribe">
<FullScreenDialog
Expand All @@ -253,10 +63,14 @@ const Subscribe = ({
onClose={onClose}
// fullWidth
>
{!subscription.isSubscribed && renderSubscriptionStatus()}

{!subscription.isSubscribed ? (
renderProducts()
<SubscriptionPlans
subscription={subscription}
products={products}
onRefreshSubscription={onRefreshSubscription}
isLogged={isLogged}
onSubscribe={onSubscribe}
/>
) : (
<SubscriptionInfo onRefreshSubscription={onRefreshSubscription} />
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Settings/Subscribe/Subscribe.container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export class SubscribeContainer extends PureComponent {
<Subscribe
onClose={history.goBack}
isLogged={this.props.isLogged}
subscribe={this.handleSubscribe}
onSubscribe={this.handleSubscribe}
name={this.state.name}
email={this.state.email}
location={location}
Expand Down
Loading

0 comments on commit d82542a

Please sign in to comment.