Merge branch 'master' of github.com-akanshaaa19:glific/glific-fronten…

…d into test-cases
glific · Apr 19, 2024 · 49732ee · 49732ee
2 parents fc8b763 + 4629b92
commit 49732ee
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "glific-frontend",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -17,7 +17,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@glific/flow-editor": "1.19.3-7",
+    "@glific/flow-editor": "1.19.3-8",
     "@lexical/react": "^0.13.1",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",

diff --git a/src/components/UI/Form/Input/Input.module.css b/src/components/UI/Form/Input/Input.module.css
@@ -87,4 +87,4 @@
   .Input {
     width: 100%;
   }
-}
+}
diff --git a/src/containers/Auth/Auth.tsx b/src/containers/Auth/Auth.tsx
@@ -9,7 +9,7 @@ import WhatsAppIcon from 'assets/images/icons/Social/Whatsapp.svg?react';
 import { termsOfUse } from 'containers/Organization/Organization';
 import { Button } from 'components/UI/Form/Button/Button';
 import GlificLogo from 'assets/images/logo/Logo.svg';
-// import { Promotion } from './Promotion/Promotion';
+import { Promotion } from './Promotion/Promotion';
 import styles from './Auth.module.css';
 import axios from 'axios';
 import { ORGANIZATION_NAME } from 'config';
@@ -258,8 +258,8 @@ export const Auth = ({
           </>
         ) : null}
       </div>
-      {/* commenting out the promotion section for now */}
-      {/* {mode === 'login' && <Promotion />} */}
+
+      {mode === 'login' && <Promotion />}
     </div>
   );
 };
diff --git a/src/containers/Auth/Promotion/Promotion.module.css b/src/containers/Auth/Promotion/Promotion.module.css
@@ -10,7 +10,7 @@
   width: 310px;
   right: 60px;
   bottom: 0;
-  padding-bottom: 10px;
+  padding: 10px 0;
   border: 4px solid #073f24;
   border-bottom: 0px;
 }
@@ -22,31 +22,34 @@
 .ContainerMin {
   composes: Container;
   height: 40px;
+  display: flex;
+  align-items: center;
+  justify-items: center;
 }
 
 .GiftCard {
   text-transform: uppercase;
   color: rgba(7, 63, 36, 1);
   font-size: 14px;
   font-weight: 500;
-  margin-top: 9px;
-  margin-left: 10px;
 }
 
 .AccordianIcon {
-  margin-left: auto;
-  margin-right: 16px;
-  margin-top: 10px;
   cursor: pointer;
 }
 
 .CardHeader {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 14px;
+  width: 100%;
+  padding: 0 8px;
 }
 
 .Image {
-  margin-right: 20px;
-  margin-left: 20px;
+  margin-right: 18px;
+  margin-left: 18px;
   margin-top: 8px;
   text-align: center;
   color: #073f24;
@@ -58,14 +61,17 @@
   top: 20px;
 }
 
+.Header {
+  display: flex;
+  align-items: center;
+}
+
 .Dot {
   height: 8px;
   width: 8px;
   background-color: rgba(221, 31, 31, 1);
   border-radius: 50%;
-  margin-left: 17px;
-  margin-top: 15px;
-  margin-right: 10px;
+  margin: 0 4px;
 }
 
 .HeaderText {
@@ -75,8 +81,6 @@
   width: 34px;
   letter-spacing: 0px;
   text-align: left;
-  line-height: 14px;
-  margin-top: 12px;
 }
 
 .BodyListText {

diff --git a/src/containers/Auth/Promotion/Promotion.tsx b/src/containers/Auth/Promotion/Promotion.tsx
@@ -9,11 +9,13 @@ export const Promotion = () => {
   return (
     <div className={minimized ? styles.ContainerMin : styles.ContainerMax}>
       <div className={styles.CardHeader}>
-        <div className={styles.Dot} />
-        <div className={styles.HeaderText}>NEW!</div>
+        <div className={styles.Header}>
+          <div className={styles.Dot} />
+          <div className={styles.HeaderText}>ALERT!</div>
+        </div>
         {minimized ? (
           <>
-            <div className={styles.GiftCard}>New Look Alert!</div>
+            <div className={styles.GiftCard}>Glific payment timelines</div>
             <MaximizeIcon
               className={styles.AccordianIcon}
               onClick={() => setMinimized(!minimized)}
@@ -26,25 +28,25 @@ export const Promotion = () => {
 
       {!minimized && (
         <>
-          <div className={styles.Image}>New Look Alert!</div>
+          <div className={styles.Image}>Glific payment timelines & late payment consequences</div>
 
           <div className={styles.Points}>
             <div className={styles.BodyListText}>
               <span>{1}</span>
               <div>
-                <strong>Big News:</strong> Glific gets a fresh interface starting March 12th! We've
-                improved our design for a better experience.
+                Glific will send invoice on 1st of every month and you will have 15-day payment
+                window.
               </div>
             </div>
             <div className={styles.BodyListText}>
               <span>2</span>
               <div>
-                <strong>What It Means:</strong> From March 12th, enjoy Glific's sleek, modern look,
-                making navigation smoother.
+                Starting May 1st, 2024, Failure to pay for two consecutive months leads to account
+                suspension, halting staff access and messaging bot functionality.
               </div>
             </div>
             <div className={styles.BodyListText}>
-              <div>Discover the new Glific. We're excited for you to see the updates!</div>
+              <div>Reach out to Glific team if you have questions/concerns.</div>
             </div>
           </div>
           {/* <a className={styles.Link} href={LINK} target="_blank" rel="noreferrer">

diff --git a/src/containers/Template/Form/HSM/HSM.test.tsx b/src/containers/Template/Form/HSM/HSM.test.tsx
@@ -160,7 +160,7 @@ describe('Add mode', () => {
       // expect an error
       expect(
         screen.getByText(
-          'Message and sample look different. Please check for any characters, extra spaces or new lines.'
+          'Message and sample look different. You have to replace variables eg. {{1}} with actual values enclosed in [ ] eg. Replace {{1}} with [Monica].'
         )
       ).toBeInTheDocument();
     });

diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx
@@ -30,30 +30,6 @@ import styles from './Template.module.css';
 
 const regexForShortcode = /^[a-z0-9_]+$/g;
 
-const HSMValidation = {
-  example: Yup.string()
-    .max(1024, 'Maximum 1024 characters are allowed')
-    .when('body', ([body], schema: any) =>
-      schema.test({
-        test: (exampleValue: any) => {
-          const finalmessageValue = body && body.replace(/\{\{([1-9]|1[0-9])\}\}/g, '[]');
-          const finalExampleValue = exampleValue && exampleValue.replace(/\[[^\]]*\]/g, '[]');
-          return finalExampleValue === finalmessageValue;
-        },
-        message:
-          'Message and sample look different. Please check for any characters, extra spaces or new lines.',
-      })
-    )
-    .required('Example is required.'),
-  category: Yup.object().nullable().required('Category is required.'),
-  shortcode: Yup.string()
-    .required('Element name is required.')
-    .matches(
-      regexForShortcode,
-      'Only lowercase alphanumeric characters and underscores are allowed.'
-    ),
-};
-
 const dialogMessage = ' It will stop showing when you are drafting a customized message.';
 
 const queries = {
@@ -398,6 +374,31 @@ const Template = ({
     }
   };
 
+  const HSMValidation = {
+    example: Yup.string()
+      .max(1024, t('Maximum 1024 characters are allowed'))
+      .when('body', ([body], schema: any) =>
+        schema.test({
+          test: (exampleValue: any) => {
+            const finalmessageValue = body && body.replace(/\{\{([1-9]|1[0-9])\}\}/g, '[]');
+            const finalExampleValue = exampleValue && exampleValue.replace(/\[[^\]]*\]/g, '[]');
+            return finalExampleValue === finalmessageValue;
+          },
+          message: t(
+            'Message and sample look different. You have to replace variables eg. {{1}} with actual values enclosed in [ ] eg. Replace {{1}} with [Monica].'
+          ),
+        })
+      )
+      .required('Example is required.'),
+    category: Yup.object().nullable().required(t('Category is required.')),
+    shortcode: Yup.string()
+      .required(t('Element name is required.'))
+      .matches(
+        regexForShortcode,
+        'Only lowercase alphanumeric characters and underscores are allowed.'
+      ),
+  };
+
   const validateURL = (value: string) => {
     if (value && type) {
       setValidatingURL(true);

diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json
@@ -465,5 +465,9 @@
   "No conversations found!": "No conversations found!",
   "Add group to collection": "Add group to collection",
   "Contact": "Contact",
-  "Remove Contact": "Remove Contact"
+  "Remove Contact": "Remove Contact",
+  "Message and sample look different. You have to replace variables eg. {{1}} with actual values enclosed in [ ] eg. Replace {{1}} with [Monica].": "Message and sample look different. You have to replace variables eg. {{1}} with actual values enclosed in [ ] eg. Replace {{1}} with [Monica].",
+  "Maximum 1024 characters are allowed": "Maximum 1024 characters are allowed",
+  "Element name is required.": "Element name is required.",
+  "Category is required.": "Category is required."
 }
diff --git a/src/i18n/hi/hi.json b/src/i18n/hi/hi.json
@@ -444,5 +444,9 @@
   "Your personal WhatsApp number": "आपका निजी WhatsApp नंबर",
   "Register with ": "Register with ",
   "Validating URL": "URL मान्य करना",
-  "Enter name, label, keyword": "नाम, लेबल, कीवर्ड दर्ज करें"
+  "Enter name, label, keyword": "नाम, लेबल, कीवर्ड दर्ज करें",
+  "Message and sample look different. You have to replace variables eg. {{1}} with actual values enclosed in [ ] eg. Replace {{1}} with [Monica].": "संदेश और नमूना अलग दिखते हैं. आपको वेरिएबल्स को बदलना होगा जैसे। {{1}} उदाहरण के लिए [ ] में संलग्न वास्तविक मानों के साथ। {{1}} को [मोनिका] से बदलें।",
+  "Maximum 1024 characters are allowed": "अधिकतम 1024 वर्णों की अनुमति है",
+  "Element name is required.": "तत्व का नाम आवश्यक है.",
+  "Category is required.": "श्रेणी आवश्यक है."
 }
diff --git a/yarn.lock b/yarn.lock
@@ -760,10 +760,10 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
   integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
 
-"@glific/[email protected]7":
-  version "1.19.3-7"
-  resolved "https://registry.yarnpkg.com/@glific/flow-editor/-/flow-editor-1.19.3-7.tgz#c60d84f954ed1a4669437fdd7a84648c188eba61"
-  integrity sha512-5fGLm5uTgEPsJmwZ3G4z37ORsD2itJJvU1rUkaYKKYSzhcR0eVKhet2IHxinrSJY0Mn5BB6loihFaO1jeBCFCw==
+"@glific/[email protected]8":
+  version "1.19.3-8"
+  resolved "https://registry.yarnpkg.com/@glific/flow-editor/-/flow-editor-1.19.3-8.tgz#2ee8395b16b55734232acb221f83836cded131b7"
+  integrity sha512-lHqAmlYGytS5fBHhCezyHqBP6l4HLnjRRuUuNF9ORYiSoZxUjMvy/8mYL2XcUEjUrvUz8VGbukKJpLfXXcesbw==
   dependencies:
     react "^16.8.6"
     react-dom "^16.8.6"
-Original file line number
+Diff line change
@@ Expand Up / @@ -87,4 +87,4 @@ @@
       .Input {
         width: 100%;
       }
-    }
+    }