From c2ee21a34567f37b23d3df7d1359a7d41427310f Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Mon, 27 Nov 2023 15:01:50 +0800
Subject: [PATCH] Added frontend validation to the offers add/edit modals in
 AdminX

---
 .../settings/growth/offers/AddOfferModal.tsx    |  8 +++++++-
 .../settings/growth/offers/EditOfferModal.tsx   | 17 +++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
index 6ce6e94379..92957e0f0a 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx
@@ -131,15 +131,21 @@ const Sidebar: React.FC<SidebarProps> = ({tierOptions,
         return durationOptions;
     };
     const filteredDurationOptions = getFilteredDurationOptions();
+
+    const [nameLength, setNameLength] = useState(0);
+    const nameLengthColor = nameLength > 40 ? 'text-red' : 'text-green';
+
     return (
         <div className='pt-7'>
             <Form>
                 <TextField
-                    hint='Visible to members on Stripe Checkout page.'
+                    hint={<div className='flex justify-between'><span>Visible to members on Stripe Checkout page</span><strong><span className={`${nameLengthColor}`}>{nameLength}</span> / 40</strong></div>}
+                    maxLength={40}
                     placeholder='Black Friday'
                     title='Name'
                     onChange={(e) => {
                         handleNameInput(e);
+                        setNameLength(e.target.value.length);
                     }}
                 />
                 <section className='mt-4'>
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx
index c32e8470ad..1276830fbf 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx
@@ -31,6 +31,15 @@ const Sidebar: React.FC<{
             const handleError = useHandleError();
             const {mutateAsync: editOffer} = useEditOffer();
 
+            const [nameLength, setNameLength] = useState(offer?.name.length || 0);
+            const nameLengthColor = nameLength > 40 ? 'text-red' : 'text-green';
+
+            useEffect(() => {
+                if (offer?.name) {
+                    setNameLength(offer?.name.length);
+                }
+            }, [offer?.name]);
+
             const offerUrl = `${getHomepageUrl(siteData!)}${offer?.code}`;
             const handleCopyClick = async () => {
                 try {
@@ -122,12 +131,16 @@ const Sidebar: React.FC<{
                             <div className='flex flex-col gap-6'>
                                 <TextField
                                     error={Boolean(errors.name)}
-                                    hint={errors.name || 'Visible to members on Stripe Checkout page'}
+                                    hint={errors.name || <div className='flex justify-between'><span>Visible to members on Stripe Checkout page</span><strong><span className={`${nameLengthColor}`}>{nameLength}</span> / 40</strong></div>}
+                                    maxLength={40}
                                     placeholder='Black Friday'
                                     title='Name'
                                     value={offer?.name}
                                     onBlur={validate}
-                                    onChange={e => updateOffer({name: e.target.value})}
+                                    onChange={(e) => {
+                                        setNameLength(e.target.value.length);
+                                        updateOffer({name: e.target.value});
+                                    }}
                                     onKeyDown={() => clearError('name')}
                                 />
                                 <div className='flex flex-col gap-1.5'>