gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AW-47-duplicateSubscriptionPlans

Browse Source
This commit is contained in:
Денис Катаев 2024-04-25 14:35:22 +00:00 committed by Daniil Chemerkin
parent 04254c4a83
commit 0920d84843
1 changed files with 55 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/palmistry/step-subscription-plan/step-subscription-plan.tsx
View File

@ -1,21 +1,21 @@
import React from 'react';
import React, { useMemo } from "react";
import { useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import useSteps, { Step } from '@/hooks/palmistry/use-steps';
import Button from '@/components/palmistry/button/button';
import EmailHeader from '@/components/palmistry/email-header/email-header';
import useSteps, { Step } from "@/hooks/palmistry/use-steps";
import Button from "@/components/palmistry/button/button";
import EmailHeader from "@/components/palmistry/email-header/email-header";
import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
import { actions } from "@/store";
import { useApi } from "@/api";
const bestPlanId = 'stripe.15';
const bestPlanId = "stripe.15";
const getFormattedPrice = (plan: ISubscriptionPlan) => {
return (plan.trial!.price_cents / 100).toFixed(2);
}
};
export default function StepSubscriptionPlan() {
const steps = useSteps();
@ -23,11 +23,14 @@ export default function StepSubscriptionPlan() {
const api = useApi();
const { i18n } = useTranslation();
const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
const allowedPlans = useMemo(() => ["stripe.37"], []);
const storedEmail = steps.getStoredValue(Step.Email);
const [subscriptionPlan, setSubscriptionPlan] = React.useState('');
const [subscriptionPlans, setSubscriptionPlans] = React.useState<ISubscriptionPlan[]>([]);
const [subscriptionPlan, setSubscriptionPlan] = React.useState("");
const [subscriptionPlans, setSubscriptionPlans] = React.useState<
ISubscriptionPlan[]
>([]);
const [email, setEmail] = React.useState(steps.getStoredValue(Step.Email));
const locale = i18n.language;
@ -42,7 +45,10 @@ export default function StepSubscriptionPlan() {
(async () => {
const { sub_plans } = await api.getSubscriptionPlans({ locale });
const plans = sub_plans
.filter((plan: ISubscriptionPlan) => plan.provider === "stripe")
.filter(
(plan: ISubscriptionPlan) =>
plan.provider === "stripe" && !plan.name.includes("(test)")
)
.sort((a, b) => {
if (!a.trial || !b.trial) {
return 0;
@ -55,13 +61,19 @@ export default function StepSubscriptionPlan() {
}
return 0;
});
setSubscriptionPlans(plans.filter((plan) => plan.trial?.price_cents));
setSubscriptionPlans(
plans.filter(
(plan) => plan.trial?.price_cents || allowedPlans.includes(plan.id)
)
);
})();
}, [api, locale]);
}, [allowedPlans, api, locale]);
React.useEffect(() => {
if (subscriptionPlan) {
const targetSubPlan = subscriptionPlans.find((sub_plan) => sub_plan.id === subscriptionPlan);
const targetSubPlan = subscriptionPlans.find(
(sub_plan) => sub_plan.id === subscriptionPlan
);
if (targetSubPlan) {
dispatch(actions.payment.update({ activeSubPlan: targetSubPlan }));
@ -70,7 +82,7 @@ export default function StepSubscriptionPlan() {
}, [subscriptionPlan]);
React.useEffect(() => {
setEmail(storedEmail || '');
setEmail(storedEmail || "");
}, [storedEmail]);
const onNext = () => {
@ -80,15 +92,21 @@ export default function StepSubscriptionPlan() {
return (
<>
<EmailHeader email={email}/>
<EmailHeader email={email} />
<div className="palmistry-container__title">
We've helped millions of people to reveal the destiny of their love life and what the future holds for them and
their families.
We've helped millions of people to reveal the destiny of their love life
and what the future holds for them and their families.
</div>
<div className="palmistry-container__image">
<svg width="153" height="133" viewBox="0 0 153 133" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
width="153"
height="133"
viewBox="0 0 153 133"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_16903_24136)">
<rect width="153" height="133" fill=""></rect>
<path
@ -131,7 +149,11 @@ export default function StepSubscriptionPlan() {
{subscriptionPlans.map((plan) => (
<div
key={plan.id}
className={`palmistry-container__plan ${subscriptionPlan === plan.id ? 'palmistry-container__plan_active' : ''}`}
className={`palmistry-container__plan ${
subscriptionPlan === plan.id
? "palmistry-container__plan_active"
: ""
}`}
onClick={() => setSubscriptionPlan(plan.id)}
>
<h3>${getFormattedPrice(plan)}</h3>
@ -139,11 +161,23 @@ export default function StepSubscriptionPlan() {
))}
</div>
<span className={`palmistry-container__subscription-text ${subscriptionPlan === bestPlanId ? 'palmistry-container__subscription-text_active' : ''}`}>
It costs us $13.21 to compensate our AURA employees for the trial, but please choose the amount you are comfortable with.
<span
className={`palmistry-container__subscription-text ${
subscriptionPlan === bestPlanId
? "palmistry-container__subscription-text_active"
: ""
}`}
>
It costs us $13.21 to compensate our AURA employees for the trial, but
please choose the amount you are comfortable with.
</span>
<Button className="palmistry-container__button" type="button" onClick={onNext} active>
<Button
className="palmistry-container__button"
type="button"
onClick={onNext}
active
>
Continue
</Button>
</>