+
Subscribe
diff --git a/packages/webapp/src/containers/Subscriptions/component/withSubscriptionPlanMapper.tsx b/packages/webapp/src/containers/Subscriptions/component/withSubscriptionPlanMapper.tsx
new file mode 100644
index 000000000..b0cd58938
--- /dev/null
+++ b/packages/webapp/src/containers/Subscriptions/component/withSubscriptionPlanMapper.tsx
@@ -0,0 +1,52 @@
+// @ts-nocheck
+import React from 'react';
+
+
+interface WithSubscriptionPlanProps {
+ plan: any;
+ onSubscribe?: (variantId: number) => void;
+}
+
+interface MappedSubscriptionPlanProps {
+ slug: string;
+ label: string;
+ description: string;
+ features: any[];
+ featured: boolean;
+ monthlyPrice: string;
+ monthlyPriceLabel: string;
+ annuallyPrice: string;
+ annuallyPriceLabel: string;
+ monthlyVariantId: number;
+ annuallyVariantId: number;
+ onSubscribe?: (variantId: number) => void;
+}
+
+export const withSubscriptionPlanMapper = <
+ P extends MappedSubscriptionPlanProps,
+>(
+ WrappedComponent: React.ComponentType,
+) => {
+ return function WithSubscriptionPlanMapper(
+ props: WithSubscriptionPlanProps &
+ Omit,
+ ) {
+ const { plan, onSubscribe, ...restProps } = props;
+
+ const mappedProps: MappedSubscriptionPlanProps = {
+ slug: plan.slug,
+ label: plan.name,
+ description: plan.description,
+ features: plan.features,
+ featured: plan.featured,
+ monthlyPrice: plan.monthlyPrice,
+ monthlyPriceLabel: plan.monthlyPriceLabel,
+ annuallyPrice: plan.annuallyPrice,
+ annuallyPriceLabel: plan.annuallyPriceLabel,
+ monthlyVariantId: plan.monthlyVariantId,
+ annuallyVariantId: plan.annuallyVariantId,
+ onSubscribe,
+ };
+ return ;
+ };
+};
diff --git a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx
index 7c99e17e8..85d0361e8 100644
--- a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx
+++ b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx
@@ -1,34 +1,11 @@
// @ts-nocheck
import * as R from 'ramda';
-import { Callout, Classes, Intent } from '@blueprintjs/core';
-import { AppToaster, Box } from '@/components';
-import { SubscriptionPlans } from '@/containers/Setup/SetupSubscription/SubscriptionPlans';
+import { Callout, Classes } from '@blueprintjs/core';
+import { Box } from '@/components';
import { SubscriptionPlansPeriodSwitcher } from '@/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher';
-import { useChangeSubscriptionPlan } from '@/hooks/query/subscription';
-import withDrawerActions from '@/containers/Drawer/withDrawerActions';
-import { DRAWERS } from '@/constants/drawers';
-
-function ChangeSubscriptionPlanContent({ closeDrawer }) {
- const { mutateAsync: changeSubscriptionPlan } = useChangeSubscriptionPlan();
-
- // Handle the subscribe button click.
- const handleSubscribe = (variantId: number) => {
- changeSubscriptionPlan({ variant_id: variantId })
- .then(() => {
- closeDrawer(DRAWERS.CHANGE_SUBSCARIPTION_PLAN);
- AppToaster.show({
- intent: Intent.SUCCESS,
- message: 'The subscription plan has been changed successfully.',
- });
- })
- .catch(() => {
- AppToaster.show({
- intent: Intent.DANGER,
- message: 'Something went wrong.',
- });
- });
- };
+import { ChangeSubscriptionPlans } from './ChangeSubscriptionPlans';
+export default function ChangeSubscriptionPlanContent() {
return (
-
+
);
}
-
-export default R.compose(withDrawerActions)(ChangeSubscriptionPlanContent);
diff --git a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlans.tsx b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlans.tsx
new file mode 100644
index 000000000..1edc6d7cf
--- /dev/null
+++ b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlans.tsx
@@ -0,0 +1,72 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster, Group } from '@/components';
+import { SubscriptionPlan } from '../../component/SubscriptionPlan';
+import { SubscriptionPlansPeriod } from '@/store/plans/plans.reducer';
+import { useSubscriptionPlans } from '@/hooks/constants/useSubscriptionPlans';
+import { useChangeSubscriptionPlan } from '@/hooks/query/subscription';
+import { withSubscriptionPlanMapper } from '../../component/withSubscriptionPlanMapper';
+import { withPlans } from '../../withPlans';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
+
+export function ChangeSubscriptionPlans() {
+ const subscriptionPlans = useSubscriptionPlans();
+
+ return (
+
+ {subscriptionPlans.map((plan, index) => (
+
+ ))}
+
+ );
+}
+
+export const SubscriptionPlanMapped = R.compose(
+ withSubscriptionPlanMapper,
+ withDrawerActions,
+ withPlans(({ plansPeriod }) => ({ plansPeriod })),
+)(
+ ({
+ openDrawer,
+ closeDrawer,
+ monthlyVariantId,
+ annuallyVariantId,
+ plansPeriod,
+ ...props
+ }) => {
+ const { mutateAsync: changeSubscriptionPlan, isLoading } =
+ useChangeSubscriptionPlan();
+
+ // Handles the subscribe button click.
+ const handleSubscribe = () => {
+ const variantId =
+ plansPeriod === SubscriptionPlansPeriod.Monthly
+ ? monthlyVariantId
+ : annuallyVariantId;
+
+ changeSubscriptionPlan({ variant_id: variantId })
+ .then(() => {
+ closeDrawer(DRAWERS.CHANGE_SUBSCARIPTION_PLAN);
+ AppToaster.show({
+ message: 'The subscription plan has been changed.',
+ intent: Intent.SUCCESS,
+ });
+ })
+ .catch((error) => {
+ AppToaster.show({
+ message: 'Something went wrong.',
+ intent: Intent.DANGER,
+ });
+ });
+ };
+ return (
+
+ );
+ },
+);
diff --git a/packages/webapp/src/hooks/constants/useSubscriptionPlans.tsx b/packages/webapp/src/hooks/constants/useSubscriptionPlans.tsx
new file mode 100644
index 000000000..3beb2a34b
--- /dev/null
+++ b/packages/webapp/src/hooks/constants/useSubscriptionPlans.tsx
@@ -0,0 +1,5 @@
+import { SubscriptionPlans } from '@/constants/subscriptionModels';
+
+export const useSubscriptionPlans = () => {
+ return SubscriptionPlans;
+};
diff --git a/packages/webapp/src/hooks/query/subscription.tsx b/packages/webapp/src/hooks/query/subscription.tsx
index 9050aca1d..d3d0ebc4e 100644
--- a/packages/webapp/src/hooks/query/subscription.tsx
+++ b/packages/webapp/src/hooks/query/subscription.tsx
@@ -92,7 +92,7 @@ export function useResumeMainSubscription(
}
interface ChangeMainSubscriptionPlanValues {
- variantId: string;
+ variant_id: string;
}
interface ChangeMainSubscriptionPlanResponse {}