updated sidebar and plan selector to manage plans
This commit is contained in:
parent
5351c4e671
commit
6ced65fb50
|
@ -83,25 +83,16 @@ export default function Sidebar(props: Props) {
|
||||||
<p>{constants.SUBSCRIPTION_EXPIRED}</p>
|
<p>{constants.SUBSCRIPTION_EXPIRED}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{subscriptionService.hasActivePaidPlan() ? (
|
|
||||||
<Button
|
|
||||||
variant="success"
|
|
||||||
size="sm"
|
|
||||||
onClick={() =>
|
|
||||||
subscriptionService.redirectToCustomerPortal()
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{constants.MANAGE}
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
<Button
|
||||||
variant="success"
|
variant="success"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => props.setPlanModalView(true)}
|
onClick={() => props.setPlanModalView(true)}
|
||||||
>
|
>
|
||||||
{constants.SUBSCRIBE}
|
{subscriptionService.hasActivePaidPlan()
|
||||||
|
? constants.MANAGE
|
||||||
|
: constants.SUBSCRIBE}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div style={{ outline: 'none', marginTop: '30px' }}>
|
<div style={{ outline: 'none', marginTop: '30px' }}>
|
||||||
<h5 style={{ marginBottom: '12px' }}>
|
<h5 style={{ marginBottom: '12px' }}>
|
||||||
|
|
|
@ -2,15 +2,20 @@ import React, { useState } from 'react';
|
||||||
import { Modal, Spinner } from 'react-bootstrap';
|
import { Modal, Spinner } from 'react-bootstrap';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import subscriptionService, { Plan } from 'services/subscriptionService';
|
import subscriptionService, {
|
||||||
|
Plan,
|
||||||
|
Subscription,
|
||||||
|
} from 'services/subscriptionService';
|
||||||
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||||
|
|
||||||
export const PlanIcon = styled.div`
|
export const PlanIcon = styled.div<{ selected: boolean }>`
|
||||||
height: 192px;
|
height: 192px;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
border: 1px solid #404040;
|
border: 1px solid #404040;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
cursor: pointer;
|
cursor: ${(props) => (props.selected ? 'not-allowed' : 'pointer')};
|
||||||
|
background: ${(props) => props.selected && '#404040'};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const LoaderOverlay = styled.div`
|
const LoaderOverlay = styled.div`
|
||||||
|
@ -28,16 +33,35 @@ interface Props {
|
||||||
plans: Plan[];
|
plans: Plan[];
|
||||||
modalView: boolean;
|
modalView: boolean;
|
||||||
closeModal: any;
|
closeModal: any;
|
||||||
|
setBannerErrorCode;
|
||||||
}
|
}
|
||||||
function PlanSelector(props: Props) {
|
function PlanSelector(props: Props) {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
const subscription: Subscription = getData(LS_KEYS.SUBSCRIPTION);
|
||||||
|
const selectPlan = async (plan) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
if (subscriptionService.hasActivePaidPlan()) {
|
||||||
|
if (plan.androidID === subscription.productID) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await subscriptionService.updateSubscription(plan.stripeID);
|
||||||
|
} else {
|
||||||
|
await subscriptionService.buySubscription(plan.stripeID);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
props.setBannerErrorCode(err.message);
|
||||||
|
setLoading(false);
|
||||||
|
props.closeModal();
|
||||||
|
}
|
||||||
|
};
|
||||||
const PlanIcons: JSX.Element[] = props.plans?.map((plan) => (
|
const PlanIcons: JSX.Element[] = props.plans?.map((plan) => (
|
||||||
<PlanIcon
|
<PlanIcon
|
||||||
key={plan.stripeID}
|
key={plan.stripeID}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setLoading(true);
|
selectPlan(plan);
|
||||||
subscriptionService.buySubscription(plan.stripeID);
|
|
||||||
}}
|
}}
|
||||||
|
selected={plan.androidID === subscription.productID}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
|
@ -63,6 +87,18 @@ function PlanSelector(props: Props) {
|
||||||
>
|
>
|
||||||
{`${plan.price} / ${constants.MONTH}`}
|
{`${plan.price} / ${constants.MONTH}`}
|
||||||
</div>
|
</div>
|
||||||
|
{plan.androidID === subscription.productID && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: '#ECECEC',
|
||||||
|
lineHeight: '24px',
|
||||||
|
fontSize: '24px',
|
||||||
|
marginTop: '20px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
current plan
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</PlanIcon>
|
</PlanIcon>
|
||||||
));
|
));
|
||||||
return (
|
return (
|
||||||
|
@ -74,7 +110,9 @@ function PlanSelector(props: Props) {
|
||||||
>
|
>
|
||||||
<Modal.Header closeButton>
|
<Modal.Header closeButton>
|
||||||
<Modal.Title style={{ marginLeft: '12px' }}>
|
<Modal.Title style={{ marginLeft: '12px' }}>
|
||||||
{constants.CHOOSE_PLAN}
|
{subscriptionService.hasActivePaidPlan()
|
||||||
|
? constants.MANAGE_PLAN
|
||||||
|
: constants.CHOOSE_PLAN}
|
||||||
</Modal.Title>
|
</Modal.Title>
|
||||||
</Modal.Header>
|
</Modal.Header>
|
||||||
<Modal.Body
|
<Modal.Body
|
||||||
|
@ -82,10 +120,11 @@ function PlanSelector(props: Props) {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
|
minHeight: '150px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{PlanIcons}
|
{PlanIcons}
|
||||||
{loading && (
|
{(!props.plans || loading) && (
|
||||||
<LoaderOverlay>
|
<LoaderOverlay>
|
||||||
<Spinner animation="border" />
|
<Spinner animation="border" />
|
||||||
</LoaderOverlay>
|
</LoaderOverlay>
|
||||||
|
|
|
@ -370,6 +370,7 @@ export default function Gallery(props: Props) {
|
||||||
plans={plans}
|
plans={plans}
|
||||||
modalView={props.planModalView}
|
modalView={props.planModalView}
|
||||||
closeModal={() => props.setPlanModalView(false)}
|
closeModal={() => props.setPlanModalView(false)}
|
||||||
|
setBannerErrorCode={setBannerErrorCode}
|
||||||
/>
|
/>
|
||||||
<Collections
|
<Collections
|
||||||
collections={collections}
|
collections={collections}
|
||||||
|
|
|
@ -139,6 +139,7 @@ const englishConstants = {
|
||||||
CHANGE: 'change',
|
CHANGE: 'change',
|
||||||
CHANGE_EMAIL: 'change email ?',
|
CHANGE_EMAIL: 'change email ?',
|
||||||
CHOOSE_PLAN: 'choose your subscription plan',
|
CHOOSE_PLAN: 'choose your subscription plan',
|
||||||
|
MANAGE_PLAN: 'manage your subscription plan',
|
||||||
MONTH: 'month',
|
MONTH: 'month',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue