beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #110 from ente-io/add-new-pricing-plan

Browse source 
Add new pricing plan
This commit is contained in:
Abhinav-grd 2021-08-01 16:51:21 +05:30 committed by GitHub
parent f323cd2d26 2265535966
commit 9b079bd7a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 44 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/pages/gallery/PlanSelector.tsx
View file

@ -16,6 +16,7 @@ import {
hasStripeSubscription,
hasPaidSubscription,
isOnFreePlan,
planForSubscription,
} from 'utils/billingUtil';
import { reverseString } from 'utils/common';
import { SetDialogMessage } from 'components/MessageDialog';
@ -25,7 +26,7 @@ import { DeadCenter, SetLoading } from 'pages/gallery';
export const PlanIcon = styled.div<{ selected: boolean }>`
border-radius: 20px;
width: 250px;
width: 220px;
border: 2px solid #333;
padding: 30px;
margin: 10px;
@ -55,7 +56,7 @@ export const PlanIcon = styled.div<{ selected: boolean }>`
}
&:hover {
transform: scale(1.2);
transform: scale(1.1);
background-color: #ffffff11;
}
@ -76,7 +77,7 @@ enum PLAN_PERIOD {
}
function PlanSelector(props: Props) {
const subscription: Subscription = getUserSubscription();
const plans = getPlans();
const [plans, setPlans] = useState(getPlans());
const [planPeriod, setPlanPeriod] = useState<PLAN_PERIOD>(PLAN_PERIOD.YEAR);
const togglePeriod = () => {
setPlanPeriod((prevPeriod) => (prevPeriod === PLAN_PERIOD.MONTH ?
@ -84,13 +85,19 @@ function PlanSelector(props: Props) {
PLAN_PERIOD.MONTH));
};
useEffect(() => {
if (!plans && props.modalView) {
const main = async () => {
props.setLoading(true);
await billingService.updatePlans();
props.setLoading(false);
};
main();
if ( props.modalView) {
if (!plans) {
const main = async () => {
props.setLoading(true);
await billingService.updatePlans();
props.setLoading(false);
};
main();
}
const planNotListed= plans.filter((plan)=>isUserSubscribedPlan(plan, subscription)).length===0;
if (!isOnFreePlan(subscription) && planNotListed) {
setPlans([...plans, planForSubscription(subscription)]);
}
}
}, [props.modalView]);
@ -148,14 +155,15 @@ function PlanSelector(props: Props) {
key={plan.stripeID}
className="subscription-plan-selector"
selected={isUserSubscribedPlan(plan, subscription)}
onClick={async () => (await onPlanSelect(plan))}
>
<div>
<span
style={{
color: '#ECECEC',
fontWeight: 900,
fontSize: '72px',
lineHeight: '72px',
fontSize: '40px',
lineHeight: '40px',
}}
>
{convertBytesToGBs(plan.storage, 0)}
@ -180,12 +188,11 @@ function PlanSelector(props: Props) {
<Button
variant="outline-success"
block
style={{ marginTop: '30px' }}
style={{ marginTop: '20px', fontSize: '14px', display: 'flex', justifyContent: 'center' }}
disabled={isUserSubscribedPlan(plan, subscription)}
onClick={async () => (await onPlanSelect(plan))}
>
{constants.CHOOSE_PLAN_BTN}
<ArrowEast style={{ marginLeft: '10px' }} />
<ArrowEast style={{ marginLeft: '5px' }} />
</Button>
</PlanIcon>
));
@ -217,7 +224,7 @@ function PlanSelector(props: Props) {
<div style={{ display: 'flex' }}>
<span
className="bold-text"
style={{ fontSize: '20px' }}
style={{ fontSize: '16px' }}
>
{constants.MONTHLY}
</span>
@ -225,13 +232,13 @@ function PlanSelector(props: Props) {
<Form.Switch
checked={planPeriod === PLAN_PERIOD.YEAR}
id="plan-period-toggler"
style={{ margin: '-4px 0 20px 15px' }}
style={{ margin: '-4px 0 20px 15px', fontSize: '10px' }}
className="custom-switch-md"
onChange={togglePeriod}
/>
<span
className="bold-text"
style={{ fontSize: '20px' }}
style={{ fontSize: '16px' }}
>
{constants.YEARLY}
</span>
@ -243,7 +250,7 @@ function PlanSelector(props: Props) {
justifyContent: 'space-around',
flexWrap: 'wrap',
minHeight: '212px',
margin: '24px 0',
margin: '5px 0',
}}
>
{plans && PlanIcons}

4
src/pages/_app.tsx
View file

@ -129,13 +129,15 @@ const GlobalStyles = createGlobalStyle`
border-radius:15px;
background-color:#202020 !important;
color:#aaa;
width:auto;
margin:auto;
}
.modal-dialog{
margin:5% auto;
width:90%;
}
.modal-xl{
max-width:960px!important;
max-width:80% !important;
}
.pswp-custom {
opacity: 0.75;

2
src/pages/gallery/index.tsx
View file

@ -119,7 +119,7 @@ export default function Gallery() {
const [selected, setSelected] = useState<selectedState>({ count: 0 });
const [dialogMessage, setDialogMessage] = useState<MessageAttributes>();
const [dialogView, setDialogView] = useState(false);
const [planModalView, setPlanModalView] = useState(false);
const [planModalView, setPlanModalView] = useState(true);
const [loading, setLoading] = useState(false);
const [collectionSelectorAttributes, setCollectionSelectorAttributes] = useState<CollectionSelectorAttributes>(null);
const [collectionSelectorView, setCollectionSelectorView] = useState(false);

4
src/services/billingService.ts
View file

@ -26,6 +26,8 @@ export interface Subscription {
attributes: {
isCancelled: boolean;
};
price:string;
period:string;
}
export interface Plan {
id: string;
@ -64,7 +66,7 @@ class billingService {
public async updatePlans() {
try {
const response = await HTTPService.get(`${ENDPOINT}/billing/plans`);
const response = await HTTPService.get(`${ENDPOINT}/billing/plans/v2`);
const { plans } = response.data;
setData(LS_KEYS.PLANS, plans);
} catch (e) {

11
src/utils/billingUtil.ts
View file

@ -250,3 +250,14 @@ export async function checkSubscriptionPurchase(
router.push('gallery', undefined, { shallow: true });
}
}
export function planForSubscription(subscription:Subscription) {
return { id: subscription.productID,
storage: subscription.storage,
price: subscription.price,
period: subscription.period,
stripeID: subscription.productID,
iosID: subscription.productID,
androidID: subscription.productID,
};
}