Extend plan

src/components/ServiceItem.tsx

@@ -14,6 +14,7 @@ type Props = {
     isDisabled?: boolean,
     isQuikAccess?: boolean,
     onMoreClick?: () => void,
+    subscriptionId?: string,
 }
 
 const ServiceItem: FC<Props> = (props: Props) => {
@@ -53,10 +54,10 @@ const ServiceItem: FC<Props> = (props: Props) => {
             }
 
 
-            <div className='mt-4 flex-1 flex items-end'>
+            <div className='mt-4 flex-1 flex gap-2 items-end'>
                 <Link target={props.isLinkPanel && !props.isDisabled ? '_blank' : ''} to={props.isDisabled ? '#' : props.isLinkPanel ? item.link : Pages.services.detail + item.slug}>
                     <Button
-                        className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                        className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                     >
                         <div className='flex gap-2 whitespace-nowrap'>
                             {
@@ -69,6 +70,20 @@ const ServiceItem: FC<Props> = (props: Props) => {
                         </div>
                     </Button>
                 </Link>
+
+                {
+                    props.subscriptionId &&
+                    <Link to={Pages.services.detail + item.slug + '?id=' + props.subscriptionId}>
+                        <Button
+                            className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                        >
+                            <div className='flex gap-2 whitespace-nowrap'>
+                                {t('service.extend')}
+                                <ArrowLeft color='black' size={16} />
+                            </div>
+                        </Button>
+                    </Link>
+                }
             </div>
         </div>
     )