refactor(subscriptions): fix appearce icon, enchance form, refactor and update db schema

Author: DavideTarditi

apps/api/src/api/v1/controllers/subscription.controller.ts

@@ -18,7 +18,7 @@ export class SubscriptionController {
                     req.file,
                     `${req.user.id}/subscription/${parsedSubscription.title}`
                 )
-                parsedSubscription.icon = filePath
+                parsedSubscription.appearance_logo_icon = filePath
             }
 
             const subscription = await prisma.subscriptions.create({
@@ -52,7 +52,7 @@ export class SubscriptionController {
                     req.file,
                     `${req.user.id}/subscription/${parsedSubscription.title}`
                 )
-                parsedSubscription.icon = filePath
+                parsedSubscription.appearance_logo_icon = filePath
             }
 
             const subscription = await prisma.subscriptions.update({

apps/app/app/(admin)/subscriptions/view.tsx

@@ -146,8 +146,8 @@ export default function SubscriptionsView() {
                     <div className='flex flex-col items-center space-y-8 justify-center h-[300px]'>
                         <Landmark />
                         <div className='flex flex-col items-center space-y-2 justify-center'>
-                            <h4>{t('bankAccounts.empty.title')}</h4>
-                            <p>{t('bankAccounts.empty.subtitle')}</p>
+                            <h4>{t('subscriptions.empty.title')}</h4>
+                            <p>{t('subscriptions.empty.subtitle')}</p>
                         </div>
                     </div>
                 )}
@@ -156,7 +156,7 @@ export default function SubscriptionsView() {
             {itemToDelete && (
                 <DeleteModal
                     title={itemToDelete.title}
-                    description={t('bankAccounts.modal.deleteDescription')}
+                    description={t('subscriptions.modal.deleteDescription')}
                     open={true}
                     closeDialog={() => setItemToDelete(null)}
                     loading={loading}

apps/app/components/dialog/BankAccountDialog.tsx

@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl'
 import { Modal } from '../modal/form'
 import { useRef, useState } from 'react'
-import { IBankAccount } from '@poveroh/types'
+import { AppearanceMode, IBankAccount } from '@poveroh/types'
 import { toast } from '@poveroh/ui/components/sonner'
 import { useBankAccount } from '@/hooks/useBankAccount'
 import { BankAccountForm } from '../form/BankAccountForm'
@@ -67,7 +67,7 @@ export function BankAccountDialog(props: DialogProps) {
             open={props.open}
             title={title}
             icon={props.initialData?.logo_icon}
-            iconMode='icon'
+            iconMode={AppearanceMode.ICON}
             handleOpenChange={props.closeDialog}
             loading={loading}
             inEditingMode={props.inEditingMode}

apps/app/components/dialog/CategoryDialog.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { toast } from '@poveroh/ui/components/sonner'
-import { ICategory } from '@poveroh/types'
+import { AppearanceMode, ICategory } from '@poveroh/types'
 import { Modal } from '../modal/form'
 import { CategoryForm } from '../form/CategoryForm'
 import { useCategory } from '@/hooks/useCategory'
@@ -68,7 +68,7 @@ export function CategoryDialog(props: DialogProps) {
             open={props.open}
             title={title}
             icon={props.initialData?.logo_icon}
-            iconMode='icon'
+            iconMode={AppearanceMode.ICON}
             handleOpenChange={props.closeDialog}
             loading={loading}
             inEditingMode={props.inEditingMode}

apps/app/components/dialog/SubcategoryDialog.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { toast } from '@poveroh/ui/components/sonner'
-import { ISubcategory } from '@poveroh/types'
+import { AppearanceMode, ISubcategory } from '@poveroh/types'
 import { Modal } from '../modal/form'
 import { SubcategoryForm } from '../form/SubcategoryForm'
 import { useCategory } from '@/hooks/useCategory'
@@ -67,7 +67,7 @@ export function SubcategoryDialog(props: DialogProps) {
             open={props.open}
             title={title}
             icon={props.initialData?.logo_icon}
-            iconMode='icon'
+            iconMode={AppearanceMode.ICON}
             handleOpenChange={props.closeDialog}
             loading={loading}
             inEditingMode={props.inEditingMode}

apps/app/components/dialog/SubscriptionDialog.tsx

@@ -1,14 +1,13 @@
 import { useTranslations } from 'next-intl'
 import { Modal } from '../modal/form'
 import { useRef, useState } from 'react'
-import { Currencies, CyclePeriod, IBrand, ISubscription, RememberPeriod } from '@poveroh/types'
+import { AppearanceMode, Currencies, CyclePeriod, IBrand, ISubscription, RememberPeriod } from '@poveroh/types'
 import { toast } from '@poveroh/ui/components/sonner'
 import { useSubscriptions } from '@/hooks/useSubscriptions'
 import { SubscriptionForm } from '../form/SubscriptionsForm'
 import { SubscriptionsSelector } from '../form/SubscriptionsSelector'
 import { Button } from '@poveroh/ui/components/button'
 import { DialogFooter } from '@poveroh/ui/components/dialog'
-import { iconList } from '../icon'
 
 type DialogProps = {
     open: boolean
@@ -79,8 +78,8 @@ export function SubscriptionDialog(props: DialogProps) {
             description: '',
             amount: 0,
             currency: Currencies.USD,
-            logo: brand.logo,
-            icon: iconList[0] as string,
+            appearance_mode: AppearanceMode.LOGO,
+            appearance_logo_icon: brand.logo,
             first_payment: new Date().toISOString(),
             cycle_number: '1',
             cycle_period: CyclePeriod.MONTH,
@@ -97,8 +96,8 @@ export function SubscriptionDialog(props: DialogProps) {
         <Modal
             open={props.open}
             title={title}
-            icon={localSubscription?.logo}
-            iconMode='img'
+            icon={localSubscription?.appearance_logo_icon}
+            iconMode={localSubscription?.appearance_mode}
             iconCircled={true}
             handleOpenChange={props.closeDialog}
             loading={loading}

apps/app/components/form/SubscriptionsForm.tsx

@@ -6,7 +6,7 @@ import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslations } from 'next-intl'
 
-import { Currencies, CyclePeriod, ISubscription, RememberPeriod } from '@poveroh/types'
+import { AppearanceMode, Currencies, CyclePeriod, ISubscription, RememberPeriod } from '@poveroh/types'
 
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@poveroh/ui/components/form'
 import { Input } from '@poveroh/ui/components/input'
@@ -42,28 +42,41 @@ export const SubscriptionForm = forwardRef(
             description: '',
             amount: 0,
             currency: Currencies.EUR,
-            logo: '',
-            icon: iconList[0] as string,
+            appearance_mode: AppearanceMode.ICON,
+            appearance_logo_icon: iconList[0] as string,
             first_payment: new Date().toISOString().split('T')[0],
             cycle_number: '1',
             cycle_period: CyclePeriod.MONTH,
             remember_period: RememberPeriod.THREE_DAYS,
             bank_account_id: ''
         }
 
-        const formSchema = z.object({
-            title: z.string().nonempty(t('messages.errors.required')),
-            description: z.string().optional(),
-            amount: z.number().min(0),
-            currency: z.nativeEnum(Currencies),
-            logo: z.string().url().optional().or(z.literal('')),
-            icon: z.string(),
-            first_payment: z.string(),
-            cycle_number: z.string(),
-            cycle_period: z.nativeEnum(CyclePeriod),
-            remember_period: z.nativeEnum(RememberPeriod).optional(),
-            bank_account_id: z.string().nonempty(t('messages.errors.required'))
-        })
+        const formSchema = z
+            .object({
+                title: z.string().nonempty(t('messages.errors.required')),
+                description: z.string().optional(),
+                amount: z.number().min(0),
+                currency: z.nativeEnum(Currencies),
+                appearance_mode: z.nativeEnum(AppearanceMode),
+                appearance_logo_icon: z.string().nonempty(t('messages.errors.required')),
+                first_payment: z.string(),
+                cycle_number: z.string(),
+                cycle_period: z.nativeEnum(CyclePeriod),
+                remember_period: z.nativeEnum(RememberPeriod).optional(),
+                bank_account_id: z.string().nonempty(t('messages.errors.required'))
+            })
+            .refine(
+                data => {
+                    if (data.appearance_mode === AppearanceMode.LOGO) {
+                        return z.string().safeParse(data.appearance_logo_icon).success
+                    }
+                    return true
+                },
+                {
+                    message: t('messages.errors.url'),
+                    path: ['appearance_logo_icon']
+                }
+            )
 
         const form = useForm<z.infer<typeof formSchema>>({
             resolver: zodResolver(formSchema),
@@ -77,8 +90,8 @@ export const SubscriptionForm = forwardRef(
         }))
 
         useEffect(() => {
-            console.debug('Form errors:', form.formState.errors)
-        }, [form.formState.errors])
+            console.log(!fromTemplate)
+        })
 
         const handleLocalSubmit = async (values: z.infer<typeof formSchema>) => {
             try {
@@ -258,7 +271,7 @@ export const SubscriptionForm = forwardRef(
                             )}
                         />
 
-                        {!fromTemplate && (
+                        {(!fromTemplate || initialData?.appearance_mode == AppearanceMode.ICON) && (
                             <div className='flex flex-col space-y-4'>
                                 <FormItem>
                                     <FormLabel mandatory={!inEditingMode}>{t('form.icon.label')}</FormLabel>
@@ -275,7 +288,7 @@ export const SubscriptionForm = forwardRef(
                                                                         className={`box-border p-1 cursor-pointer flex justify-center items-center rounded-md h-[30px] w-[30px]
                                                                                         ${icon === x ? 'bg-white text-black border border-hr' : ''}`}
                                                                         onClick={() => {
-                                                                            form.setValue('icon', x)
+                                                                            form.setValue('appearance_logo_icon', x)
                                                                             setIcon(x)
                                                                         }}
                                                                     >

apps/app/components/item/SubscriptionsItem.tsx

@@ -1,5 +1,5 @@
 import { BrandIcon } from '../icon/BrandIcon'
-import { IBankAccount, ISubscription } from '@poveroh/types'
+import { AppearanceMode, IBankAccount, ISubscription } from '@poveroh/types'
 import { OptionsPopover } from '../navbar/OptionsPopoverr'
 import DynamicIcon from '../icon/DynamicIcon'
 import icons from 'currency-icons'
@@ -33,10 +33,15 @@ export function SubscriptionItem({ subscription, openDelete, openEdit }: Subscri
             <div className='flex flex-row items-center space-x-5'>
                 <div className='flex items-center justify-center h-[40px] w-[40px]'>
                     {(() => {
-                        if (subscription.logo) {
-                            return <BrandIcon icon={subscription.logo} />
+                        if (subscription.appearance_mode == AppearanceMode.LOGO) {
+                            return <BrandIcon circled icon={subscription.appearance_logo_icon} />
                         } else {
-                            return <DynamicIcon name={subscription?.icon || 'landmark'} className='h-[30px] w-[30px]' />
+                            return (
+                                <DynamicIcon
+                                    name={subscription?.appearance_logo_icon || 'landmark'}
+                                    className='h-[30px] w-[30px]'
+                                />
+                            )
                         }
                     })()}
                 </div>

apps/app/components/modal/form.tsx

@@ -8,13 +8,14 @@ import PerfectScrollbar from 'react-perfect-scrollbar'
 import 'react-perfect-scrollbar/dist/css/styles.css'
 import { cn } from '@poveroh/ui/lib/utils'
 import { ReactElement } from 'react'
+import { AppearanceMode } from '@poveroh/types'
 
 type ModalProps = {
     open: boolean
     title: string
     description?: string
     icon?: string
-    iconMode?: 'icon' | 'img'
+    iconMode?: AppearanceMode
     iconCircled?: boolean
     children: React.ReactNode
     showFooter?: boolean
@@ -31,7 +32,7 @@ export function Modal({ showFooter = true, ...props }: ModalProps) {
                 <DialogHeader>
                     <div className='flex flex-row items-center space-x-3'>
                         {props.icon &&
-                            (props.iconMode === 'img' ? (
+                            (props.iconMode === AppearanceMode.LOGO ? (
                                 <BrandIcon circled={props.iconCircled} icon={props.icon} size='xl'></BrandIcon>
                             ) : (
                                 <DynamicIcon key={props.icon} name={props.icon} />

apps/app/hooks/useSubscriptions.ts

@@ -64,15 +64,12 @@ export const useSubscriptions = () => {
         }
     }
 
-    const getNextExecutionText = (
-        subscription: ISubscription,
-        fromDate: Date = new Date() // 🆕 now is configurable
-    ) => {
+    const getNextExecutionText = (subscription: ISubscription, fromDate: Date = new Date()) => {
         const now = fromDate
         let next = new Date(subscription.first_payment)
 
         const cycle_number = Number(subscription.cycle_number)
-        // Ensure next is in the future
+
         while (next < now) {
             switch (subscription.cycle_period) {
                 case CyclePeriod.DAY: