fix hidden free plan + show remain days

src/components/ServiceItem.tsx

@@ -5,6 +5,8 @@ import { ArrowLeft, More } from 'iconsax-react'
 import Button from './Button'
 import { useTranslation } from 'react-i18next'
 import { ItemServiceType } from '../pages/service/types/ServiecTypes'
+import moment from 'moment-jalaali'
+import { NumberFormat } from '../config/func'
 
 type Props = {
     item: ItemServiceType,
@@ -15,6 +17,7 @@ type Props = {
     isQuikAccess?: boolean,
     onMoreClick?: () => void,
     subscriptionId?: string,
+    endDate?: string,
 }
 
 const ServiceItem: FC<Props> = (props: Props) => {
@@ -22,6 +25,34 @@ const ServiceItem: FC<Props> = (props: Props) => {
     const { t } = useTranslation('global')
     const { item } = props
 
+    const getRemainingDays = (endDate: string): number => {
+        const now = moment()
+        const end = moment(endDate)
+        const diff = end.diff(now, 'days')
+        return diff
+    }
+
+    const getRemainingDaysColor = (days: number): string => {
+        if (days < 0) return 'text-red-600'
+        if (days <= 7) return 'text-red-500'
+        if (days <= 30) return 'text-orange-500'
+        return 'text-green-600'
+    }
+
+    const getRemainingDaysText = (endDate: string): string => {
+        const days = getRemainingDays(endDate)
+        if (days < 0) {
+            return `${NumberFormat(Math.abs(days))} روز گذشته`
+        }
+        if (days === 0) {
+            return 'امروز آخرین روز'
+        }
+        if (days === 1) {
+            return '۱ روز باقی مانده'
+        }
+        return `${NumberFormat(days)} روز باقی مانده`
+    }
+
     return (
         <div className={`flex-1 relative flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className} ${props.isDisabled ? 'opacity-50' : ''}`}>
             {
@@ -44,8 +75,16 @@ const ServiceItem: FC<Props> = (props: Props) => {
                             {props.businessName}
                         </div>
                     }
+                    {
+                        props.isLinkPanel && props.endDate &&
+                        <div className={`mt-1 text-[11px] ${getRemainingDaysColor(getRemainingDays(props.endDate))}`}>
+                            {getRemainingDaysText(props.endDate)}
+                        </div>
+                    }
                 </div>
+
             </div>
+
             {
                 !props.isLinkPanel &&
                 <div className='mt-4 text-xs'>