Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Premium / Refactor subscribe component #1428

Merged
merged 7 commits into from
Mar 27, 2023
Merged

Premium / Refactor subscribe component #1428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f447817
Create SubscriptionPlans component
RodriSanchez1 Mar 23, 2023
228b713
Comment Learn More btn
RodriSanchez1 Mar 23, 2023
cfc48f5
Rename onSubscribe function
RodriSanchez1 Mar 23, 2023
c666fbd
Remove css propertis from typography
RodriSanchez1 Mar 23, 2023
317aa4f
Define proptypes
RodriSanchez1 Mar 24, 2023
905f8e9
Refactor canPurchase definition
RodriSanchez1 Mar 24, 2023
942de65
Fix codacy static
RodriSanchez1 Mar 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 10 additions & 196 deletions src/components/Settings/Subscribe/Subscribe.component.js
View file
Open in desktop
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
Open in desktop
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