@capillarytech/creatives-library 7.12.3 → 7.12.5

package/v2Containers/Whatsapp/index.js

@@ -41,6 +41,7 @@ import {
   TEMPLATE_MESSAGE_MAX_LENGTH,
   WHATSAPP,
   CATEGORY_OPTIONS,
+  LANGUAGE_OPTIONS,
   WHATSAPP_STATUSES,
   TAG,
   EMBEDDED,
@@ -89,6 +90,9 @@ export const Whatsapp = (props) => {
   const [templateCategory, setTemplateCategory] = useState(
     formatMessage(messages.select),
   );
+  const [templateLanguage, setTemplateLanguage] = useState(
+    formatMessage(messages.select),
+  );
   const [templateMessage, setTemplateMessage] = useState('');
   const [templateMessageError, setTemplateMessageError] = useState(false);
   const [addedVarCount, setAddedVarCount] = useState(0);
@@ -172,10 +176,12 @@ export const Whatsapp = (props) => {
         category = '',
         status = WHATSAPP_STATUSES.unsubmitted,
         rejection_reason = null,
+        languages = [],
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
       setTemplateRejectionReason(rejection_reason);
+      setTemplateLanguage(languages[0]?.language);
       computeTempMsgArray();
     }
   }, [editData.templateDetails || templateData]);
@@ -440,6 +446,10 @@ export const Whatsapp = (props) => {
     setTemplateCategory(value);
   };
 
+  const onTemplateLanguageChange = (value) => {
+    setTemplateLanguage(value);
+  };
+
   const onAddVar = () => {
     const validVarArr = templateMessage.match(validVarRegex) || [];
     const tempMsg = `${templateMessage}{{${validVarArr.length + 1}}}`;
@@ -503,18 +513,14 @@ export const Whatsapp = (props) => {
     return errorMessage;
   };
 
-  const getPayloadContent = () => (
-    (isEditFlow && !isFullMode)
-    ? `${updatedSmsEditor.join('')}\n${formatMessage(
-        messages.templateMessageUnsubscribeText,
-      )}`
-    : `${templateMessage}\n${formatMessage(
-        messages.modifiedUnsubscribeText,
-      {
-        value: `{{${addedVarCount + 1}}}`,
-      },
-      )}`
-  );
+  const getPayloadContent = () =>
+    isEditFlow && !isFullMode
+      ? `${updatedSmsEditor.join('')}\n${formatMessage(
+          messages.templateMessageUnsubscribeText,
+        )}`
+      : `${templateMessage}\n${formatMessage(messages.modifiedUnsubscribeText, {
+          value: `{{${addedVarCount + 1}}}`,
+        })}`;
 
   const createPayload = () => ({
     name: templateName,
@@ -525,7 +531,7 @@ export const Whatsapp = (props) => {
             category: templateCategory,
             languages: [
               {
-                language: 'en',
+                language: templateLanguage,
                 content: getPayloadContent(),
               },
             ],
@@ -590,8 +596,12 @@ export const Whatsapp = (props) => {
     if (templateName.trim() === '' || templateNameError) {
       return true;
     }
-    //if template category is not selected
-    if (templateCategory === 'Select') {
+    //if template category or language is not selected
+    if (
+      [templateCategory, templateLanguage].includes(
+        formatMessage(messages.select),
+      )
+    ) {
       return true;
     }
     //if template message is not entered
@@ -624,7 +634,7 @@ export const Whatsapp = (props) => {
         }
       />
       <CapInput
-        id={`whatsapp_template_name_input`}
+        id="whatsapp_template_name_input"
         onChange={onTemplateNameChange}
         errorMessage={templateNameError}
         placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
@@ -635,18 +645,18 @@ export const Whatsapp = (props) => {
       {/* template category */}
       {renderLabel('templateCategoryLabel')}
       <CapSelect
-        id={'select-whatsapp-category'}
+        id="select-whatsapp-category"
         options={templateCategoryOptions || []}
         onChange={onTemplateCategoryChange}
         value={templateCategory}
       />
       {/* template language */}
       {renderLabel('messageLanguageLabel')}
-      <CapInput
-        id={`whatsapp_template_language_input`}
-        defaultValue={'English'}
-        size="default"
-        disabled
+      <CapSelect
+        id="select-whatsapp-language"
+        options={LANGUAGE_OPTIONS || []}
+        onChange={onTemplateLanguageChange}
+        value={templateLanguage}
       />
       {/* template mdeia type */}
       {renderLabel('mediaLabel')}
@@ -682,7 +692,9 @@ export const Whatsapp = (props) => {
             type="flat"
             isAddBtn
             onClick={onAddVar}
-            disabled={(addedVarCount >= 19 || templateMessageError) && templateMessage}
+            disabled={
+              (addedVarCount >= 19 || templateMessageError) && templateMessage
+            }
           >
             {formatMessage(messages.addVar)}
           </CapButton>

package/v2Containers/Whatsapp/index.scss

@@ -1,4 +1,4 @@
-@import "~@capillarytech/cap-ui-library/styles/_variables";
+@import '~@capillarytech/cap-ui-library/styles/_variables';
 
 .cap-whatsapp-creatives {
   .whatsapp-render-heading {
@@ -52,7 +52,8 @@
     margin-right: $CAP_SPACE_16;
     width: 95%;
   }
-  #select-whatsapp-category {
+  #select-whatsapp-category,
+  #select-whatsapp-language {
     width: 100%;
   }
 

package/v2Containers/Whatsapp/messages.js

@@ -228,4 +228,288 @@ export default defineMessages({
     id: `${prefix}.useTwoBracketsOnly`,
     defaultMessage: 'Use two brackets on each side to declare a variable',
   },
+  afrikaans: {
+    id: `${prefix}.afrikaans`,
+    defaultMessage: 'Afrikaans',
+  },
+  albanian: {
+    id: `${prefix}.albanian`,
+    defaultMessage: 'Albanian',
+  },
+  arabic: {
+    id: `${prefix}.arabic`,
+    defaultMessage: 'Arabic',
+  },
+  azerbaijani: {
+    id: `${prefix}.azerbaijani`,
+    defaultMessage: 'Azerbaijani',
+  },
+  bengali: {
+    id: `${prefix}.bengali`,
+    defaultMessage: 'Bengali',
+  },
+  bulgarian: {
+    id: `${prefix}.bulgarian`,
+    defaultMessage: 'Bulgarian',
+  },
+  catalan: {
+    id: `${prefix}.catalan`,
+    defaultMessage: 'Catalan',
+  },
+  chineseCHN: {
+    id: `${prefix}.chineseCHN`,
+    defaultMessage: 'Chinese (CHN)',
+  },
+  chineseHKG: {
+    id: `${prefix}.chineseHKG`,
+    defaultMessage: 'Chinese (HKG)',
+  },
+  chineseTAI: {
+    id: `${prefix}.chineseTAI`,
+    defaultMessage: 'Chinese (TAI)',
+  },
+  croatian: {
+    id: `${prefix}.croatian`,
+    defaultMessage: 'Croatian',
+  },
+  czech: {
+    id: `${prefix}.czech`,
+    defaultMessage: 'Czech',
+  },
+  danish: {
+    id: `${prefix}.danish`,
+    defaultMessage: 'Danish',
+  },
+  dutch: {
+    id: `${prefix}.dutch`,
+    defaultMessage: 'Dutch',
+  },
+  english: {
+    id: `${prefix}.english`,
+    defaultMessage: 'English',
+  },
+  englishUK: {
+    id: `${prefix}.englishUK`,
+    defaultMessage: 'English (UK)',
+  },
+  englishUS: {
+    id: `${prefix}.englishUS`,
+    defaultMessage: 'English (US)',
+  },
+  estonian: {
+    id: `${prefix}.estonian`,
+    defaultMessage: 'Estonian',
+  },
+  filipino: {
+    id: `${prefix}.filipino`,
+    defaultMessage: 'Filipino',
+  },
+  finnish: {
+    id: `${prefix}.finnish`,
+    defaultMessage: 'Finnish',
+  },
+  french: {
+    id: `${prefix}.french`,
+    defaultMessage: 'French',
+  },
+  georgian: {
+    id: `${prefix}.georgian`,
+    defaultMessage: 'Georgian',
+  },
+  german: {
+    id: `${prefix}.german`,
+    defaultMessage: 'German',
+  },
+  greek: {
+    id: `${prefix}.greek`,
+    defaultMessage: 'Greek',
+  },
+  gujarati: {
+    id: `${prefix}.gujarati`,
+    defaultMessage: 'Gujarati',
+  },
+  hausa: {
+    id: `${prefix}.hausa`,
+    defaultMessage: 'Hausa',
+  },
+  hebrew: {
+    id: `${prefix}.hebrew`,
+    defaultMessage: 'Hebrew',
+  },
+  hindi: {
+    id: `${prefix}.hindi`,
+    defaultMessage: 'Hindi',
+  },
+  hungarian: {
+    id: `${prefix}.hungarian`,
+    defaultMessage: 'Hungarian',
+  },
+  indonesian: {
+    id: `${prefix}.indonesian`,
+    defaultMessage: 'Indonesian',
+  },
+  irish: {
+    id: `${prefix}.irish`,
+    defaultMessage: 'Irish',
+  },
+  italian: {
+    id: `${prefix}.italian`,
+    defaultMessage: 'Italian',
+  },
+  japanese: {
+    id: `${prefix}.japanese`,
+    defaultMessage: 'Japanese',
+  },
+  kannada: {
+    id: `${prefix}.kannada`,
+    defaultMessage: 'Kannada',
+  },
+  kazakh: {
+    id: `${prefix}.kazakh`,
+    defaultMessage: 'Kazakh',
+  },
+  kinyarwanda: {
+    id: `${prefix}.kinyarwanda`,
+    defaultMessage: 'Kinyarwanda',
+  },
+  korean: {
+    id: `${prefix}.korean`,
+    defaultMessage: 'Korean',
+  },
+  kyrgyz: {
+    id: `${prefix}.kyrgyz`,
+    defaultMessage: 'Kyrgyz (Kyrgyzstan)',
+  },
+  lao: {
+    id: `${prefix}.lao`,
+    defaultMessage: 'Lao',
+  },
+  latvian: {
+    id: `${prefix}.latvian`,
+    defaultMessage: 'Latvian',
+  },
+  lithuanian: {
+    id: `${prefix}.lithuanian`,
+    defaultMessage: 'Lithuanian',
+  },
+  macedonian: {
+    id: `${prefix}.macedonian`,
+    defaultMessage: 'Macedonian',
+  },
+  malay: {
+    id: `${prefix}.malay`,
+    defaultMessage: 'Malay',
+  },
+  malayalam: {
+    id: `${prefix}.malayalam`,
+    defaultMessage: 'Malayalam',
+  },
+  marathi: {
+    id: `${prefix}.marathi`,
+    defaultMessage: 'Marathi',
+  },
+  norwegian: {
+    id: `${prefix}.norwegian`,
+    defaultMessage: 'Norwegian',
+  },
+  persian: {
+    id: `${prefix}.persian`,
+    defaultMessage: 'Persian',
+  },
+  polish: {
+    id: `${prefix}.polish`,
+    defaultMessage: 'Polish',
+  },
+  portugueseBR: {
+    id: `${prefix}.portugueseBR`,
+    defaultMessage: 'Portuguese (BR)',
+  },
+  portuguesePOR: {
+    id: `${prefix}.portuguesePOR`,
+    defaultMessage: 'Portuguese (POR)',
+  },
+  punjabi: {
+    id: `${prefix}.punjabi`,
+    defaultMessage: 'Punjabi',
+  },
+  romanian: {
+    id: `${prefix}.romanian`,
+    defaultMessage: 'Romanian',
+  },
+  russian: {
+    id: `${prefix}.russian`,
+    defaultMessage: 'Russian',
+  },
+  serbian: {
+    id: `${prefix}.serbian`,
+    defaultMessage: 'Serbian',
+  },
+  slovak: {
+    id: `${prefix}.slovak`,
+    defaultMessage: 'Slovak',
+  },
+  slovenian: {
+    id: `${prefix}.slovenian`,
+    defaultMessage: 'Slovenian',
+  },
+  spanish: {
+    id: `${prefix}.spanish`,
+    defaultMessage: 'Spanish',
+  },
+  spanishARG: {
+    id: `${prefix}.spanishARG`,
+    defaultMessage: 'Spanish (ARG)',
+  },
+  spanishSPA: {
+    id: `${prefix}.spanishSPA`,
+    defaultMessage: 'Spanish (SPA)',
+  },
+  spanishMEX: {
+    id: `${prefix}.spanishMEX`,
+    defaultMessage: 'Spanish (MEX)',
+  },
+  swahili: {
+    id: `${prefix}.swahili`,
+    defaultMessage: 'Swahili',
+  },
+  swedish: {
+    id: `${prefix}.swedish`,
+    defaultMessage: 'Swedish',
+  },
+  tamil: {
+    id: `${prefix}.tamil`,
+    defaultMessage: 'Tamil',
+  },
+  telugu: {
+    id: `${prefix}.telugu`,
+    defaultMessage: 'Telugu',
+  },
+  thai: {
+    id: `${prefix}.thai`,
+    defaultMessage: 'Thai',
+  },
+  turkish: {
+    id: `${prefix}.turkish`,
+    defaultMessage: 'Turkish',
+  },
+  ukrainian: {
+    id: `${prefix}.ukrainian`,
+    defaultMessage: 'Ukrainian',
+  },
+  urdu: {
+    id: `${prefix}.urdu`,
+    defaultMessage: 'Urdu',
+  },
+  uzbek: {
+    id: `${prefix}.uzbek`,
+    defaultMessage: 'Uzbek',
+  },
+  vietnamese: {
+    id: `${prefix}.vietnamese`,
+    defaultMessage: 'Vietnamese',
+  },
+  zulu: {
+    id: `${prefix}.zulu`,
+    defaultMessage: 'Zulu',
+  },
 });