From 92b65d5b59839f02b0adae0e434036e55cd0231b Mon Sep 17 00:00:00 2001 From: sina_sajjadi Date: Sun, 12 Jan 2025 08:24:57 +0330 Subject: [PATCH] feat: enhance subscription components with active subscription status and improved layout --- .../widgets/subscription/subscription.tsx | 43 ++++++++++++------- src/pages/subscriptions/active-section.tsx | 17 ++++++-- src/pages/subscriptions/plans-section.tsx | 6 +-- 3 files changed, 45 insertions(+), 21 deletions(-) diff --git a/src/components/dashboard/widgets/subscription/subscription.tsx b/src/components/dashboard/widgets/subscription/subscription.tsx index 799ccbd..1a5315d 100644 --- a/src/components/dashboard/widgets/subscription/subscription.tsx +++ b/src/components/dashboard/widgets/subscription/subscription.tsx @@ -1,32 +1,45 @@ // components/Subscription.tsx +import { useGetActiveSubscription } from '@/data/subscription'; import Image from 'next/image'; import React from 'react'; import { useTranslation } from 'react-i18next'; const Subscription: React.FC = () => { const { t } = useTranslation('common'); // Specify the namespace if using multiple + const { data: activeData, isLoading: isActiveLoading } = + useGetActiveSubscription(); + console.log(activeData); + return (
-

+ {activeData?.status === 'no_subscription' && ( +

+ You dont have active subscription +

+ )} + {!(activeData?.status === 'no_subscription') &&

{/* {t('text-7day-subscription')} */} - You have a 7-day free subscription. -

-
- -

5 days left

-
+ {activeData?.subscription?.title} + } + {activeData?.days_left && ( +
+

{activeData?.days_left} days left

+
+ )}
{/*
*/} -
{/* Use relative positioning for next/image with fill */} - subscription plan -
+
+ {' '} + {/* Use relative positioning for next/image with fill */} + subscription plan +
{/*
*/}
); diff --git a/src/pages/subscriptions/active-section.tsx b/src/pages/subscriptions/active-section.tsx index 56195d9..bc51aa7 100644 --- a/src/pages/subscriptions/active-section.tsx +++ b/src/pages/subscriptions/active-section.tsx @@ -3,6 +3,7 @@ import { useGetActiveSubscription } from '@/data/subscription'; import { FaStar } from 'react-icons/fa'; import Image from 'next/image'; import background from '../../../public/image/Frame 1000005757.webp'; +import { RiErrorWarningFill } from 'react-icons/ri'; const ActiveSubscriptionSection: React.FC = () => { const { data: activeData, isLoading: isActiveLoading } = @@ -25,9 +26,19 @@ const ActiveSubscriptionSection: React.FC = () => { return
Loading...
; } + if (activeData?.status === 'no_subscription') { + return ( +
+
+ +

You dont have active subscription

+
+
+ ); + } return ( -
-
+
+
{ subscription type
-
+

Start Your Plan

diff --git a/src/pages/subscriptions/plans-section.tsx b/src/pages/subscriptions/plans-section.tsx index 0366d56..768af8f 100644 --- a/src/pages/subscriptions/plans-section.tsx +++ b/src/pages/subscriptions/plans-section.tsx @@ -66,12 +66,12 @@ const PlansSection: React.FC = () => { Change your current workspace plan

-
+

Support

-
+
{allSubscriptions?.results.map((item) => (
@@ -109,7 +109,7 @@ const PlansSection: React.FC = () => {

Features of All Subscriptions

-
+