From 52eabe3cd0b7cd0138f996df124cfdc6a7728e08 Mon Sep 17 00:00:00 2001
From: c00b3r <sanuyOKmaklaren0@gmail.com>
Date: Fri, 25 Apr 2025 16:17:02 +0500
Subject: [PATCH] feat: update footer and input tel mask

---
 src/components/Layout/Feedback.tsx | 37 ++++++++++++++++--------------
 src/components/Layout/Footer.tsx   |  8 +++----
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 5cecafe..469200f 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -46,15 +46,10 @@ interface IInput {
 export function FeedbackForm() {
   const [[phoneCode, country], setPhoneCodeAndCountry] = useState<
     [string, Country]
-  >(['+7', 'RU']);
+  >(['+971', 'AE']);
 
   const placeholder = useMemo(
-    () =>
-      getExampleNumber(country, examples)
-        ?.formatInternational()
-        .split(' ')
-        .slice(1)
-        .join(' '),
+    () => getExampleNumber(country, examples),
     [country]
   );
 
@@ -64,6 +59,18 @@ export function FeedbackForm() {
 
   const { register, handleSubmit, formState } = form;
 
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    // Remove all spaces and ensure we have the correct country code
+    const cleanValue = value.replaceAll(/ /g, '');
+    if (!cleanValue.startsWith('+971')) {
+      // If the value doesn't start with +971, force it
+      form.setValue('phone', '+971' + cleanValue.replace('+', ''));
+    } else {
+      form.setValue('phone', cleanValue);
+    }
+  };
+
   async function onSubmit(data: IInput) {
     await api.post('mail', { json: data }).json();
   }
@@ -105,16 +112,12 @@ export function FeedbackForm() {
                 <ReactInputMask
                   type="tel"
                   autoComplete="none"
-                  onChange={(e) => {
-                    form.setValue(
-                      'phone',
-                      phoneCode + e.target.value.replaceAll(/ /g, '')
-                    );
-                  }}
+                  onChange={handlePhoneChange}
                   id={'tel'}
                   maskChar={null}
-                  mask={'+7 ' + (placeholder?.replace(/\d/g, '9') ?? '')}
-                  placeholder={'+7 ' + placeholder}
+                  mask={'+971 59 999 9999'}
+                  placeholder={'+971 5X XXX XXXX'}
+                  value={form.watch('phone')}
                   className="placeholder:btnl placeholder:font-medium placeholder:select-none peer btnl w-full h-full transition-all bg-transparent rounded-none outline-none"
                 />
                 <div className="bottom-0 absolute w-full border-b border-[#37393B] peer-focus:border-white -mb-2" />
@@ -147,8 +150,8 @@ export function FeedbackForm() {
                 <CheckIcon className="text-white lg:w-[1.667vw] lg:h-[1.667vw] w-6 h-6" />
               </div>
               <p className="heading2 font-medium">
-                Мы получили заявку
-                <br />и скоро свяжемся с вами!
+                We received your request
+                <br />and will contact you soon!
               </p>
             </div>
           </div>
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index e7e1f92..5832219 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -17,22 +17,22 @@ export function Footer() {
     <footer className="lg:px-5 lg:pb-5 md:max-lg:px-4 md:max-lg:pb-4 px-[10px] pb-[10px] space-y-6 mb-0">
       <div className="max-md:flex-col lg:gap-[0.833vw] md:max-lg:gap-[1.042vw] flex gap-[1.111vw]">
         <Link
-          href={'tel:' + '8 800 770 00 67'.replaceAll(' ', '')}
+          href={'tel:' + '+971 58 506 0097'.replaceAll(' ', '')}
           className="lg:p-[1.667vw] p-6 flex flex-col justify-between max-md:gap-y-10 bg-[linear-gradient(to_top_left,#7A7A7A50,transparent)] lg:rounded-[1.111vw] rounded-2xl lg:aspect-[696/248] lg:w-[48.333vw] md:max-lg:w-[47.656vw] hover:bg-[#37393B99] bg-transparent transition-colors"
         >
           <p className="text-[#7A7A7A] text1 font-medium">{t('call')}</p>
           <div className="lg:line2 md:max-lg:heading1 line2 flex items-center font-medium">
-            8 800 770 00 67
+            +971 58 506 0097
             <ArrowMoreIcon className="text-white lg:w-[5.556vw] lg:h-[5.556vw] md:max-lg:w-[4.167vw] md:max-lg:h-[4.167vw] w-[10vw] h-[10vw]" />
           </div>
         </Link>
         <Link
-          href={'mailto:' + 'info@graff.tech'}
+          href={'mailto:' + 'sam@graff.tech'}
           className="lg:p-[1.667vw] p-6 flex flex-col justify-between max-md:gap-y-10 bg-[linear-gradient(to_top_left,#7A7A7A50,transparent)] lg:rounded-[1.111vw] rounded-2xl lg:aspect-[624/248] lg:w-[43.333vw] md:max-lg:w-[47.656vw] hover:bg-[#37393B99] bg-transparent transition-colors"
         >
           <p className="text-[#7A7A7A] text1 font-medium">{t('write')}</p>
           <div className="lg:line2 md:max-lg:heading1 line2 flex items-center font-medium">
-            info@graff.tech
+            sam@graff.tech
             <ArrowMoreIcon className="text-white lg:w-[5.556vw] lg:h-[5.556vw] md:max-lg:w-[4.167vw] md:max-lg:h-[4.167vw] w-[10vw] h-[10vw]" />
           </div>
         </Link>