@capillarytech/creatives-library 7.11.13 → 7.11.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.11.13",
+  "version": "7.11.15",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -7,6 +7,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import whatsppMsg from '../Whatsapp/messages';
+import { LANGUAGE_OPTIONS } from '../Whatsapp/constants'
 import globalMessages from '../Cap/messages'
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { NO_COMMUNICATION, FTP, WHATSAPP } from '../App/constants';
@@ -43,10 +44,11 @@ export function SlideBoxHeader(props) {
   const {
     whatsappTemplateName,
     whatsappTemplateCategory,
+    whatsappTemplateLanguageCode,
   } = templateData || {};
   const whatsappName = whatsappTemplateName || templateData?.name;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
-
+  const whatsappLanguageCode = whatsappTemplateLanguageCode || get(templateData, `versions.base.content.whatsapp.languages[0].language`, '');
 
   const getChannelLabel = (currentChannel = '') => {
     const labels = {
@@ -103,7 +105,7 @@ export function SlideBoxHeader(props) {
                 {renderWhatsappData("label2", formatString(whatsappCategory))}
                 {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
                 {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.languageLabel} />)}
-                {renderWhatsappData("label2", <FormattedMessage {...whatsppMsg.templateLanguageEnglish} />)}
+                {renderWhatsappData("label2", LANGUAGE_OPTIONS?.find(option => option.value === whatsappLanguageCode)?.label)}
               </>)
           }
         prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap

@@ -190,7 +190,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
         >
           <FormattedMessage
             defaultMessage="English"
-            id="creatives.containersV2.Whatsapp.templateLanguageEnglish"
+            id="creatives.containersV2.Whatsapp.english"
             values={Object {}}
           />
         </SlideBoxHeader__StyledLabel>

package/v2Containers/Templates/index.js

@@ -662,6 +662,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             const { name = '', versions = {} } = whatsappSelectedTemplateData;
             creativesParams.whatsappTemplateName = name;
             creativesParams.whatsappTemplateCategory = get(versions, `base.content.whatsapp.category`, '');
+            creativesParams.whatsappTemplateLanguageCode = get(versions, `base.content.whatsapp.languages[0].language`, '');
           }
         }
         creativesParams.type = this.state.channel.toUpperCase();

package/v2Containers/Whatsapp/constants.js

@@ -129,3 +129,290 @@ export const WHATSAPP_MEDIA_TYPES = {
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
 };
+
+export const LANGUAGE_OPTIONS = [
+  {
+    value: 'af',
+    label: <FormattedMessage {...messages.afrikaans} />,
+  },
+  {
+    value: 'sq',
+    label: <FormattedMessage {...messages.albanian} />,
+  },
+  {
+    value: 'ar',
+    label: <FormattedMessage {...messages.arabic} />,
+  },
+  {
+    value: 'az',
+    label: <FormattedMessage {...messages.azerbaijani} />,
+  },
+  {
+    value: 'bn',
+    label: <FormattedMessage {...messages.bengali} />,
+  },
+  {
+    value: 'bg',
+    label: <FormattedMessage {...messages.bulgarian} />,
+  },
+  {
+    value: 'ca',
+    label: <FormattedMessage {...messages.catalan} />,
+  },
+  {
+    value: 'zh_CN',
+    label: <FormattedMessage {...messages.chineseCHN} />,
+  },
+  {
+    value: 'zh_HK',
+    label: <FormattedMessage {...messages.chineseHKG} />,
+  },
+  {
+    value: 'zh_TW',
+    label: <FormattedMessage {...messages.chineseTAI} />,
+  },
+  {
+    value: 'hr',
+    label: <FormattedMessage {...messages.croatian} />,
+  },
+  {
+    value: 'cs',
+    label: <FormattedMessage {...messages.czech} />,
+  },
+  {
+    value: 'da',
+    label: <FormattedMessage {...messages.danish} />,
+  },
+  {
+    value: 'nl',
+    label: <FormattedMessage {...messages.dutch} />,
+  },
+  {
+    value: 'en',
+    label: <FormattedMessage {...messages.english} />,
+  },
+  {
+    value: 'en_GB',
+    label: <FormattedMessage {...messages.englishUK} />,
+  },
+  {
+    value: 'en_US',
+    label: <FormattedMessage {...messages.englishUS} />,
+  },
+  {
+    value: 'et',
+    label: <FormattedMessage {...messages.estonian} />,
+  },
+  {
+    value: 'fil',
+    label: <FormattedMessage {...messages.filipino} />,
+  },
+  {
+    value: 'fi',
+    label: <FormattedMessage {...messages.finnish} />,
+  },
+  {
+    value: 'fr',
+    label: <FormattedMessage {...messages.french} />,
+  },
+  {
+    value: 'ka',
+    label: <FormattedMessage {...messages.georgian} />,
+  },
+  {
+    value: 'de',
+    label: <FormattedMessage {...messages.german} />,
+  },
+  {
+    value: 'el',
+    label: <FormattedMessage {...messages.greek} />,
+  },
+  {
+    value: 'gu',
+    label: <FormattedMessage {...messages.gujarati} />,
+  },
+  {
+    value: 'ha',
+    label: <FormattedMessage {...messages.hausa} />,
+  },
+  {
+    value: 'he',
+    label: <FormattedMessage {...messages.hebrew} />,
+  },
+  {
+    value: 'hi',
+    label: <FormattedMessage {...messages.hindi} />,
+  },
+  {
+    value: 'hu',
+    label: <FormattedMessage {...messages.hungarian} />,
+  },
+  {
+    value: 'id',
+    label: <FormattedMessage {...messages.indonesian} />,
+  },
+  {
+    value: 'ga',
+    label: <FormattedMessage {...messages.irish} />,
+  },
+  {
+    value: 'it',
+    label: <FormattedMessage {...messages.italian} />,
+  },
+  {
+    value: 'ja',
+    label: <FormattedMessage {...messages.japanese} />,
+  },
+  {
+    value: 'kn',
+    label: <FormattedMessage {...messages.kannada} />,
+  },
+  {
+    value: 'kk',
+    label: <FormattedMessage {...messages.kazakh} />,
+  },
+  {
+    value: 'rw_RW',
+    label: <FormattedMessage {...messages.kinyarwanda} />,
+  },
+  {
+    value: 'ko',
+    label: <FormattedMessage {...messages.korean} />,
+  },
+  {
+    value: 'ky_KG',
+    label: <FormattedMessage {...messages.kyrgyz} />,
+  },
+  {
+    value: 'lo',
+    label: <FormattedMessage {...messages.lao} />,
+  },
+  {
+    value: 'lv',
+    label: <FormattedMessage {...messages.latvian} />,
+  },
+  {
+    value: 'lt',
+    label: <FormattedMessage {...messages.lithuanian} />,
+  },
+  {
+    value: 'mk',
+    label: <FormattedMessage {...messages.macedonian} />,
+  },
+  {
+    value: 'ms',
+    label: <FormattedMessage {...messages.malay} />,
+  },
+  {
+    value: 'ml',
+    label: <FormattedMessage {...messages.malayalam} />,
+  },
+  {
+    value: 'mr',
+    label: <FormattedMessage {...messages.marathi} />,
+  },
+  {
+    value: 'nb',
+    label: <FormattedMessage {...messages.norwegian} />,
+  },
+  {
+    value: 'fa',
+    label: <FormattedMessage {...messages.persian} />,
+  },
+  {
+    value: 'pl',
+    label: <FormattedMessage {...messages.polish} />,
+  },
+  {
+    value: 'pt_BR',
+    label: <FormattedMessage {...messages.portugueseBR} />,
+  },
+  {
+    value: 'pt_PT',
+    label: <FormattedMessage {...messages.portuguesePOR} />,
+  },
+  {
+    value: 'pa',
+    label: <FormattedMessage {...messages.punjabi} />,
+  },
+  {
+    value: 'ro',
+    label: <FormattedMessage {...messages.romanian} />,
+  },
+  {
+    value: 'ru',
+    label: <FormattedMessage {...messages.russian} />,
+  },
+  {
+    value: 'sr',
+    label: <FormattedMessage {...messages.serbian} />,
+  },
+  {
+    value: 'sk',
+    label: <FormattedMessage {...messages.slovak} />,
+  },
+  {
+    value: 'sl',
+    label: <FormattedMessage {...messages.slovenian} />,
+  },
+  {
+    value: 'es',
+    label: <FormattedMessage {...messages.spanish} />,
+  },
+  {
+    value: 'es_AR',
+    label: <FormattedMessage {...messages.spanishARG} />,
+  },
+  {
+    value: 'es_ES',
+    label: <FormattedMessage {...messages.spanishSPA} />,
+  },
+  {
+    value: 'es_MX',
+    label: <FormattedMessage {...messages.spanishMEX} />,
+  },
+  {
+    value: 'sw',
+    label: <FormattedMessage {...messages.swahili} />,
+  },
+  {
+    value: 'sv',
+    label: <FormattedMessage {...messages.swedish} />,
+  },
+  {
+    value: 'ta',
+    label: <FormattedMessage {...messages.tamil} />,
+  },
+  {
+    value: 'te',
+    label: <FormattedMessage {...messages.telugu} />,
+  },
+  {
+    value: 'th',
+    label: <FormattedMessage {...messages.thai} />,
+  },
+  {
+    value: 'tr',
+    label: <FormattedMessage {...messages.turkish} />,
+  },
+  {
+    value: 'uk',
+    label: <FormattedMessage {...messages.ukrainian} />,
+  },
+  {
+    value: 'ur',
+    label: <FormattedMessage {...messages.urdu} />,
+  },
+  {
+    value: 'uz',
+    label: <FormattedMessage {...messages.uzbek} />,
+  },
+  {
+    value: 'vi',
+    label: <FormattedMessage {...messages.vietnamese} />,
+  },
+  {
+    value: 'zu',
+    label: <FormattedMessage {...messages.zulu} />,
+  },
+];

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%;
   }