@capillarytech/creatives-library 8.0.198 → 8.0.199

package/config/app.js

@@ -20,8 +20,7 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    // api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
-    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
+    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

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

package/services/api.js

@@ -264,7 +264,6 @@ export const getUserData = () => {
 
 export const createTemplate = ({template}) => {
   const url = `${API_ENDPOINT}/templates/SMS`;
-  console.log("creating template",template);
   return request(url, getAPICallObject('POST', template));
 };
 

package/v2Components/CapImageUpload/constants.js

@@ -3,4 +3,5 @@ export const MAX_SUPPORTED_IMAGE_SIZE = {
   RCS: 2,
   INAPP: 5,
   WHATSAPP: 5,
+  MOBILEPUSH: 2,
 };

package/v2Components/CapImageUpload/index.js

@@ -27,6 +27,7 @@ import {
 } from "../../v2Containers/CreativesContainer/constants";
 
 import messages from './messages';
+import { MOBILEPUSH } from '../CapVideoUpload/constants';
 function CapImageUpload(props) {
   const {
     intl,
@@ -327,7 +328,7 @@ function CapImageUpload(props) {
             getImageSizeLabel()
           )
         )}
-        {[VIBER, INAPP].includes(channel) && getImageSizeLabel()}
+        {[VIBER, INAPP, MOBILEPUSH].includes(channel) && getImageSizeLabel()}
         <CapHeadingSpan type="label2" className="image-format">
           {channel === INAPP ? <FormattedMessage {...messages.format2} /> : <FormattedMessage {...messages.format} />}
         </CapHeadingSpan>

package/v2Components/CapMpushCTA/index.js

@@ -230,16 +230,16 @@ export const CapMpushCTA = (props) => {
             if (isSaved) {
                 renderArray.push(
                     <CapRow
-                        className="cap-inapp-saved-cta"
+                        className="cap-mpush-saved-cta"
                         align="middle"
                         type="flex"
                     >
-                        <CapRow className="inapp-cta-row">
+                        <CapRow className="mpush-cta-row">
                             <CapColumn>
-                                <CapIcon size="s" type={'launch'} className="btn-icon" />
+                                <CapIcon size="s" type={'launch'} />
                             </CapColumn>
                             <CapColumn className="btn-text">
-                                <CapLabel type="label2" className="inapp-saved-cta-button-text">
+                                <CapLabel type="label2" className="mpush-saved-cta-button-text">
                                     {text}
                                 </CapLabel>
                             </CapColumn>
@@ -257,7 +257,7 @@ export const CapMpushCTA = (props) => {
                         {(
                             <CapRow className="cta-action-grp">
                                 <CapColumn
-                                    className="inapp-saved-cta-edit-icon"
+                                    className="mpush-saved-cta-edit-icon"
                                     onClick={() => isSavedCta(index, false)}
                                 >
                                     <CapIcon size="s" type="edit" className="cta-action" />
@@ -272,8 +272,8 @@ export const CapMpushCTA = (props) => {
             } else {
                 renderArray.push(
                     <CapRow
-                        className="cap-inapp-cta"
-                        id={`cap-inapp-cta-${index}`}
+                        className="cap-mpush-cta"
+                        id={`cap-mpush-cta-${index}`}
                     >
                         <CapColumn>
                             <CapHeading type="h4" className="cta-label">
@@ -295,7 +295,7 @@ export const CapMpushCTA = (props) => {
                                     {formatMessage(messages.ctaType)}
                                 </CapHeading>
                                 <CapSelect.CapCustomSelect
-                                    id="inapp-cta-type"
+                                    id="mpush-cta-type"
                                     key="mpush-cta-type"
                                     options={CTA_OPTIONS || []}
                                     onChange={(value) => onUrlTypeChange(value, index)}
@@ -304,11 +304,11 @@ export const CapMpushCTA = (props) => {
                             </CapRow>
                             {urlType === DEEP_LINK && (
                                 <CapRow style={{ width: '70%' }}>
-                                    <CapHeading type="h4">
+                                    <CapHeading type="h4" className="cta-deep-link-label">
                                         {formatMessage(messages.urlDeepLink)}
                                     </CapHeading>
                                     <CapSelect.CapCustomSelect
-                                        id="inapp-deep-link-type"
+                                        id="mpush-deep-link-type"
                                         key="mpush-deep-link-type"
                                         placeholder={formatMessage(messages.ctaDeepLinkOptionsPlaceholder)}
                                         options={deepLink || []}
@@ -319,7 +319,7 @@ export const CapMpushCTA = (props) => {
                             )}
                             {urlType === EXTERNAL_URL && (
                                 <CapTagListWithInput
-                                    inputId="inapp-cta-external-link"
+                                    inputId="mpush-cta-external-link"
                                     inputValue={localUrlValues[index] || ''}
                                     inputOnChange={onUrlChange}
                                     inputPlaceholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
@@ -328,8 +328,7 @@ export const CapMpushCTA = (props) => {
                                     inputErrorMessage={urlError}
                                     headingText={formatMessage(messages.urlExternalLink)}
                                     headingStyle={{ marginTop: '3%', marginRight: '50%'}}
-                                    containerStyle={{ width: '70%' }}
-                                    // tagListStyle={{ display: "flex" }}
+                                    containerStyle={{ width: '70%', marginTop: '-0.625rem' }}
                                     moduleFilterEnabled={location?.query?.type !== "embedded"}
                                     onTagSelect={onButtonTagSelect}
                                     onContextChange={handleOnTagsContextChange}
@@ -357,8 +356,8 @@ export const CapMpushCTA = (props) => {
                                     })()}
                                 </CapLabel>
                                 <CapInput
-                                    id="inapp-deep-link-keys"
-                                    className="inapp-deep-link-keys"
+                                    id="mpush-deep-link-keys"
+                                    className="mpush-deep-link-keys"
                                     onChange={onDeepLinkKeysChange}
                                     placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') })}
                                     value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
@@ -368,7 +367,7 @@ export const CapMpushCTA = (props) => {
                                 />
                             </CapRow>
                         )}
-                        <CapRow className="inapp-cta-save-delete-btn">
+                        <CapRow className="mpush-cta-save-delete-btn">
                             <CapTooltip
                                 title={
                                     ctaSaveDisabled(index)
@@ -381,7 +380,7 @@ export const CapMpushCTA = (props) => {
                                     <CapButton
                                         onClick={() => isSavedCta(index, true)}
                                         disabled={ctaSaveDisabled(index)}
-                                        className="inapp-cta-save-btn"
+                                        className="mpush-cta-save-btn"
                                     >
                                         {formatMessage(globalMessages.save)}
                                     </CapButton>
@@ -389,7 +388,7 @@ export const CapMpushCTA = (props) => {
                             </CapTooltip>
                             <CapButton
                                 onClick={() => deleteHandler(index)}
-                                className="inapp-cta-delete-btn"
+                                className="mpush-cta-delete-btn"
                                 type="secondary"
                             >
                                 {formatMessage(globalMessages.delete)}

package/v2Components/CapMpushCTA/index.scss

@@ -1,17 +1,13 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
-.cap-inapp-cta {
-    margin-top: $CAP_SPACE_16;
-    margin-left: 1.6rem;
+.cap-mpush-cta {
     padding: $CAP_SPACE_16 $CAP_SPACE_24;
     border: 1px solid $CAP_G06;
     border-radius: $CAP_SPACE_04;
 
     .mpush-cta-buttons {
-        margin-top: $CAP_SPACE_12;
         display: flex;
         flex-direction: row;
-        align-items: flex-end;
         justify-content: space-between;
 
         .mpush-render-btn-length {
@@ -20,46 +16,51 @@
             margin-left: 52%;
             margin-bottom: $CAP_SPACE_12;
         }
+
+        .cta-deep-link-label {
+            margin-bottom: 0.625rem;
+        }
     }
 
-    #inapp-deep-link-type {
+    #mpush-deep-link-type {
         width: 100%;
         margin-top: $CAP_SPACE_12;
     }
 
-    .inapp-cta-external-link {
+    .mpush-cta-external-link {
         margin-top: $CAP_SPACE_12;
     }
 
-    .inapp-cta-save-delete-btn {
+    .mpush-cta-save-delete-btn {
         margin-top: $CAP_SPACE_16;
 
-        .inapp-cta-save-btn {
+        .mpush-cta-save-btn {
             margin-right: $CAP_SPACE_04;
         }
-        .inapp-cta-delete-btn {
+        .mpush-cta-delete-btn {
             margin-left: $CAP_SPACE_04;
         }
     }
+
+    .cta-deep-link-keys-value {
+        margin: $CAP_SPACE_08 0;
+    }
     
 }
 
-.cap-inapp-saved-cta {
+.cap-mpush-saved-cta {
     border: solid 1px $CAP_G06;
-    margin-left: $CAP_SPACE_20;
     display: flex;
     justify-content: space-between;
     padding: $CAP_SPACE_08 $CAP_SPACE_12;
     border-radius: $CAP_SPACE_04;
-    margin-top: $CAP_SPACE_12;
     height: $CAP_SPACE_40;
 
-    .inapp-saved-cta-button-text {
+    .mpush-saved-cta-button-text {
         font-weight: 500;
-        padding-left: $CAP_SPACE_16;
     }
 
-    .inapp-saved-cta-edit-icon {
+    .mpush-saved-cta-edit-icon {
         margin-left: 4.286rem;
     }
 }
@@ -77,7 +78,7 @@
 .cta-action {
     cursor: pointer;
 }
-.inapp-cta-row {
+.mpush-cta-row {
     display: flex;
     align-items: center;
 }
@@ -89,7 +90,4 @@
 }
 .btn-text {
     margin-left: $CAP_SPACE_08;
-}
-.btn-icon {
-    color: $CAP_G06;
 }

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -600,7 +600,7 @@
       .body-image{
         img{
           max-width: 18.75rem;
-          max-height: 90px;
+          max-height: 13.75rem;
           margin-left: 1.571rem;
           display: block;
         }
@@ -671,8 +671,7 @@
       font-weight: 600;
       padding: $CAP_SPACE_04 $CAP_SPACE_08 $CAP_SPACE_04 $CAP_SPACE_08;
       display: flex;
-      // align-items: center;
-      // justify-content: space-between;
+      justify-content: space-between;
       .app-icon{
         width: $CAP_SPACE_12;
         height: $CAP_SPACE_12;
@@ -687,7 +686,7 @@
       .app-header-right{
         display: flex;
         align-items: center;
-        font-size: 10px;
+        margin-left: 7.8125rem;
         span{
           font-weight: 200;
         }
@@ -719,8 +718,8 @@
       background-color: #ffffff;
       height: auto;
       padding: 0.571rem;
-      padding-left: 1.571rem;
       display: flex;
+      justify-content: space-between;
       flex-direction: row;
       gap: $CAP_SPACE_08;
       .action{
@@ -810,7 +809,7 @@
   // Mobile Push Carousel Styles
   .mobile-push-carousel-container {
     background-color: $CAP_WHITE;
-    padding-left: 1.375rem; // 22px
+    padding-left: 1.375rem;
   }
 }
 
@@ -868,7 +867,7 @@
       top: 14%;
       left: 29%;
       width: 42%;
-      height: 275px;
+      height: 17.1875rem;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
@@ -881,7 +880,7 @@
       }
 
       &.sms{
-        height: 290px;
+        height: 18.125rem;
         width: 40%;
         top: 16%;
         .sms-icon{

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -392,9 +392,7 @@ export function SlideBoxContent(props) {
         };
       }
       default:
-        {
         return get(templateDataObject, `versions.base.content`);
-        }
     }
   };
 

package/v2Containers/MobilePushNew/components/CtaButtons.js

@@ -111,8 +111,8 @@ const CtaButtons = ({
 
   return (
     <>
-      <CapRow>
-        <CapHeading type="h4">
+      <CapRow className="mpush-cta-buttons">
+        <CapHeading type="h3">
           <FormattedMessage {...messages.buttons} />
         </CapHeading>
         {!isPrimaryButtonSaved && !shouldShowPrimaryCTA && (

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -165,7 +165,7 @@ const PlatformContentFields = ({
       <CapRow className="content-fields">
         <CapRow className="creatives-mpush-title">
           <CapColumn className="mpush-title-main">
-            <CapHeading type="h4" className="mpush-title">
+            <CapHeading type="h3" className="mpush-title">
               <FormattedMessage {...messages.title} />
             </CapHeading>
             {getTagList(0)}
@@ -189,12 +189,12 @@ const PlatformContentFields = ({
 
         <CapRow className="creatives-mpush-message">
           <CapColumn className="mpush-message-main">
-            <CapHeading type="h4" className="mpush-message">
+            <CapHeading type="h3" className="mpush-message">
               <FormattedMessage {...messages.message} />
             </CapHeading>
             {getTagList(1)}
           </CapColumn>
-          <CapInput
+          <CapInput.TextArea
             id={`mobile-push-message-name-input-${deviceType}`}
             onChange={onMessageChange}
             placeholder={formatMessage(messages.messagePlaceholder)}
@@ -208,11 +208,12 @@ const PlatformContentFields = ({
                 </CapError>
               )
             }
+            autosize={{ minRows: 3, maxRows: 5 }}
           />
         </CapRow>
         <CapDivider />
         <CapRow className="creatives-mpush-media">
-          <CapHeading type="h4" className="mpush-media-type">
+          <CapHeading type="h3" className="mpush-media-type">
             <FormattedMessage {...messages.mediaType} />
           </CapHeading>
           <CapSelect.CapCustomSelect
@@ -238,7 +239,7 @@ const PlatformContentFields = ({
             <CapDivider />
             <CapRow className="creatives-mpush-actions">
               <CapRow className="mpush-actions-main">
-                <CapHeading type="h4" className="mpush-actions">
+                <CapHeading type="h3" className="mpush-actions">
                   <FormattedMessage {...messages.buttonsAndLinks} />
                 </CapHeading>
                 <CapLabel className="optional-text">

package/v2Containers/MobilePushNew/components/tests/CtaButtons.test.js

@@ -388,7 +388,7 @@ describe('CtaButtons', () => {
     it('should render heading with correct type', () => {
       renderComponent();
       
-      expect(screen.getByTestId('cap-heading')).toHaveAttribute('data-heading-type', 'h4');
+      expect(screen.getByTestId('cap-heading')).toHaveAttribute('data-heading-type', 'h3');
     });
 
     it('should render button headings with correct type', () => {

package/v2Containers/MobilePushNew/components/tests/PlatformContentFields.test.js

@@ -10,14 +10,28 @@ import {
 // Simple mock components
 jest.mock("@capillarytech/cap-ui-library/CapRow", () => ({ children }) => <div>{children}</div>);
 jest.mock("@capillarytech/cap-ui-library/CapColumn", () => ({ children }) => <div>{children}</div>);
-jest.mock("@capillarytech/cap-ui-library/CapInput", () => ({
-  value, onChange, errorMessage, error, ...props
-}) => (
-  <div>
-    <input value={value || ""} onChange={onChange} error={error} {...props} />
-    {(errorMessage || error) && <div data-testid="error-message">{errorMessage || error}</div>}
-  </div>
-));
+jest.mock("@capillarytech/cap-ui-library/CapInput", () => {
+  const MockCapInput = ({ value, onChange, errorMessage, error, ...props }) => (
+    <div>
+      <input value={value || ""} onChange={onChange} error={error} {...props} />
+      {(errorMessage || error) && <div data-testid="error-message">{errorMessage || error}</div>}
+    </div>
+  );
+  
+  MockCapInput.TextArea = ({ value, onChange, errorMessage, error, ...props }) => (
+    <div>
+      <textarea 
+        value={value || ""} 
+        onChange={onChange} 
+        data-testid="message-textarea"
+        {...props}
+      />
+      {(errorMessage || error) && <div data-testid="error-message">{errorMessage || error}</div>}
+    </div>
+  );
+  
+  return MockCapInput;
+});
 jest.mock("@capillarytech/cap-ui-library/CapHeading", () => ({ children }) => <div>{children}</div>);
 jest.mock("@capillarytech/cap-ui-library/CapError", () => ({ children }) => <div data-testid="cap-error">{children}</div>);
 jest.mock("@capillarytech/cap-ui-library/CapDivider", () => () => <div data-testid="divider" />);
@@ -84,6 +98,7 @@ jest.mock("../../messages", () => ({
   deepLinkKeys: { id: "deepLinkKeys", defaultMessage: "Deep Link Keys" },
   deepLinkKeysPlaceholder: { id: "deepLinkKeysPlaceholder", defaultMessage: "Enter {key}" },
   deepLinkKeysRequired: { id: "deepLinkKeysRequired", defaultMessage: "Deep link keys are required" },
+  addLabels: { id: "addLabels", defaultMessage: "Add labels" },
 }));
 
 // Mock constants
@@ -118,6 +133,7 @@ describe("PlatformContentFields", () => {
       title: "",
       message: "",
       externalLink: "",
+      deepLinkKeys: "",
     },
     handlers: {
       handleTitleChange: jest.fn(),
@@ -126,6 +142,7 @@ describe("PlatformContentFields", () => {
       handleActionOnClickChange: jest.fn(),
       handleLinkTypeChange: jest.fn(),
       handleDeepLinkChange: jest.fn(),
+      handleDeepLinkKeysChange: jest.fn(),
       handleExternalLinkChange: jest.fn(),
       onTagSelect: jest.fn(),
       handleOnTagsContextChange: jest.fn(),
@@ -145,10 +162,15 @@ describe("PlatformContentFields", () => {
         { value: "link2", label: "Link 2" },
       ],
       deepLinkValue: "link1",
+      deepLinkKeysValue: [],
       externalLinkValue: "https://example.com",
     },
     sameContent: false,
     formatMessage: jest.fn((msg) => msg.defaultMessage),
+    location: { query: {} },
+    tags: ["tag1", "tag2"],
+    injectedTags: [],
+    selectedOfferDetails: null,
   };
 
   const renderComponent = (props = {}) => render(
@@ -174,9 +196,10 @@ describe("PlatformContentFields", () => {
     });
 
     it("should render message input with correct value", () => {
-      const { container } = renderComponent();
-      const messageInput = container.querySelector('input[value="Test Message"]');
+      const { getByTestId } = renderComponent();
+      const messageInput = getByTestId("message-textarea");
       expect(messageInput).toBeInTheDocument();
+      expect(messageInput.value).toBe("Test Message");
     });
 
     it("should render MediaUploaders component", () => {
@@ -217,8 +240,8 @@ describe("PlatformContentFields", () => {
 
   describe("Message Field", () => {
     it("should call message change handler", () => {
-      const { container } = renderComponent();
-      const messageInput = container.querySelector('input[value="Test Message"]');
+      const { getByTestId } = renderComponent();
+      const messageInput = getByTestId("message-textarea");
 
       fireEvent.change(messageInput, { target: { value: "New Message" } });
 

package/v2Containers/MobilePushNew/constants.js

@@ -41,10 +41,10 @@ export const GET_MOBILEPUSH_TEMPLATES_LIST_FAILURE = 'app/v2Containers/WeChat/MP
 export const MAPP_SDK = 'MAPP_SDK';
 
 export const MEDIA_TYPES_OPTIONS = [
-  { label: "NONE", value: "NONE" },
-  { label: "IMAGE", value: "IMAGE" },
-  { label: "VIDEO", value: "VIDEO" },
-  { label: "CAROUSEL", value: "CAROUSEL" },
+  { label: "None", value: "NONE" },
+  { label: "Image", value: "IMAGE" },
+  { label: "Video", value: "VIDEO" },
+  { label: "Carousel", value: "CAROUSEL" },
 ];
 
 export const MOBILE_PUSH_CHANNEL = "MOBILEPUSH";

package/v2Containers/MobilePushNew/index.js

@@ -92,6 +92,7 @@ import messages from "./messages";
 import { EXTERNAL_URL } from "../CreativesContainer/constants";
 import createMobilePushPayloadWithIntl from "../../utils/createMobilePushPayload";
 import { MOBILEPUSH } from "../../v2Components/CapVideoUpload/constants";
+import { StyledCapTab } from "./style";
 
 // Helper function to extract deep link keys from URL where value equals key
 const extractDeepLinkKeys = (deepLinkValue) => {
@@ -2893,7 +2894,7 @@ const MobilePushNew = ({
             </CapCheckbox>
           )}
           <CapRow className="platform-header">
-            <CapTab
+            <StyledCapTab
               className="platform-tabs"
               activeKey={activeTab}
               onChange={setActiveTab}

package/v2Containers/MobilePushNew/index.scss

@@ -1,5 +1,4 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables';
-
 .header-row {
   margin-bottom: $CAP_SPACE_24;
 }
@@ -89,9 +88,10 @@
 .mpush-title,
 .mpush-message,
 .mpush-media-type {
-  font-weight: 500;
+  font-weight: $FONT_WEIGHT_MEDIUM;
   color: #333;
   margin: 0;
+  gap: $CAP_SPACE_04;
 }
 
 .add-labels,
@@ -185,7 +185,7 @@
 }
 
 .notification-title {
-  font-weight: 500;
+  font-weight: $FONT_WEIGHT_MEDIUM;
   margin-bottom: $CAP_SPACE_08;
   color: #333;
 }
@@ -215,7 +215,7 @@
 }
 
 #add-primary-btn-heading #add-secondary-btn-heading {
-  font-weight: 500;
+  font-weight: $FONT_WEIGHT_MEDIUM;
   color: #1890ff;
 }
 
@@ -336,4 +336,26 @@
 
 .save-section {
   margin-bottom: $CAP_SPACE_12;
+}
+
+.mpush-media-type {
+  margin-bottom: $CAP_SPACE_08;
+}
+
+.mpush-cta-buttons {
+  padding: $CAP_SPACE_20 0;
+
+  #add-primary-button,
+  #add-secondary-button {
+    color: $FONT_COLOR_05;
+  }
+  
+  #add-primary-btn-heading, 
+  #add-secondary-btn-heading {
+    gap: $CAP_SPACE_04;
+    color: $FONT_COLOR_05;
+    font-weight: $FONT_WEIGHT_MEDIUM;
+    margin-left: $CAP_SPACE_04;
+    margin-bottom: $CAP_SPACE_04;
+  }
 }

package/v2Containers/MobilePushNew/style.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import CapTab from "@capillarytech/cap-ui-library/CapTab";
+
+export const StyledCapTab = styled(CapTab)`
+  .ant-tabs-tabpane {
+    border: none;
+  }
+  .ant-tabs-tabpane-active {
+    border: none;
+  }
+`;

package/v2Containers/Templates/_templates.scss

@@ -587,7 +587,7 @@
       font-weight: 600;
     }
     .actions{
-      background-color: #EEEEEE;
+      background-color: $CAP_WHITE;
       height: 32px;
       padding: 4px;
       .action{
@@ -649,7 +649,7 @@
       text-align: center;
       .action{
         font-size: 12px;
-        color: #000000;
+        color: $CAP_BLUE01;
         font-weight: 600;
         text-align: center;
         margin-left: 8px;

package/v2Containers/Whatsapp/constants.js

@@ -80,7 +80,7 @@ export const mediaTypeOptions = ({host, templateCategory}) => {
           tagColor: CAP_GREEN02,
           tagTextColor: CAP_GREEN01,
         },
-        ...(templateCategory === WHATSAPP_CATEGORIES.marketing && ((host === HOST_GUPSHUP || host === HOST_VALUE_FIRST) || host === HOST_KARIX)
+        ...(templateCategory === WHATSAPP_CATEGORIES.marketing && (host === HOST_GUPSHUP || host === HOST_KARIX)
           ? [
             {
               key: 'CAROUSEL',
@@ -104,25 +104,6 @@ export const mediaTypeOptions = ({host, templateCategory}) => {
   ];
 };
 
-export const VALUE_FIRST_CATEGORY_OPTIONS = [
-  {
-    key: 'marketing',
-    value: WHATSAPP_CATEGORIES.marketing,
-    label: <FormattedMessage {...messages.marketing} />,
-    tooltipLabel: <FormattedMessage {...messages.marketingTooltip} />,
-    tagColor: CAP_ORANGE01,
-    tagTextColor: CAP_ORANGE,
-  },
-  {
-    key: 'authentication',
-    value: WHATSAPP_CATEGORIES.authentication,
-    label: <FormattedMessage {...messages.authentication} />,
-    tooltipLabel: <FormattedMessage {...messages.authenticationTooltip} />,
-    tagColor: CAP_GREEN02,
-    tagTextColor: CAP_GREEN01,
-  },
-];
-
 export const KARIX_GUPSHUP_CATEGORY_OPTIONS = [
   {
     key: 'utility',
@@ -365,7 +346,6 @@ export const HOST_KARIX = 'karixwhatsappbulk';
 export const HOST_GUPSHUP = 'gupshupwhatsappbulk';
 export const HOST_ICS = 'icswababulk';
 export const HOST_HAPTIC = 'hapticwhatsappbulk';
-export const HOST_VALUE_FIRST = 'valuefirstwhatsappbulk';
 
 export const SIZE_UNITS = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 export const DOCUMENT_FORMAT = 'PDF';
@@ -705,7 +685,6 @@ export const CATEGORY_OPTIONS_MAP = {
   [HOST_GUPSHUP]: KARIX_GUPSHUP_CATEGORY_OPTIONS,
   [HOST_ICS]: ICS_CATEGORY_OPTIONS,
   [HOST_HAPTIC]: HAPTIC_CATEGORY_OPTIONS,
-  [HOST_VALUE_FIRST]: VALUE_FIRST_CATEGORY_OPTIONS,
 };
 
 export const REQUEST = "REQUEST";

package/v2Containers/Whatsapp/index.js

@@ -55,7 +55,6 @@ import {
   WHATSAPP,
   TWILIO_CATEGORY_OPTIONS,
   KARIX_GUPSHUP_CATEGORY_OPTIONS,
-  VALUE_FIRST_CATEGORY_OPTIONS,
   LANGUAGE_OPTIONS,
   WHATSAPP_STATUSES,
   TAG,
@@ -99,7 +98,6 @@ import {
   HAPTIC_CATEGORY_OPTIONS,
   CORRECT_TEMPLATE_FORMAT_URL,
   CATEGORY_OPTIONS_MAP,
-  HOST_VALUE_FIRST,
   IMAGE,
   VIDEO,
   URL,
@@ -268,7 +266,6 @@ export const Whatsapp = (props) => {
   const isMediaTypeCarousel = templateMediaType === WHATSAPP_MEDIA_TYPES.CAROUSEL;
   const isHostIsNotTwilio = host !== HOST_TWILIO;
   const isHaptic = host === HOST_HAPTIC;
-  const isHostValueFirst = host === HOST_VALUE_FIRST;
   const WhatsappFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -836,11 +833,6 @@ export const Whatsapp = (props) => {
     label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
   }));
 
-  const valueFirstCategoryOptions = VALUE_FIRST_CATEGORY_OPTIONS.map((option) => ({
-    value: option.value,
-    label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
-  }));
-
 const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.authentication);
   const onChangeButtonType = ({ target: { value } }) => {
     setButtonType(value);
@@ -1341,8 +1333,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   const getCategoryOptions = (host) => {
-    console.log('host', host);
-    console.log('CATEGORY_OPTIONS_MAP', CATEGORY_OPTIONS_MAP);
    return CATEGORY_OPTIONS_MAP[host] || [];
   }
 
@@ -1587,7 +1577,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 	}
 
   const createPayload = () => {
-    console.log('in create payload');
     let mediaParams = {};
     const { whatsappVideoSrc = '', whatsappVideoPreviewImg = '' } = whatsappVideoSrcAndPreview;
     switch (templateMediaType) {
@@ -1698,9 +1687,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 
   const createApprovalHandler = () => {
     setSpin(true);
-    const payload = createPayload();
-    console.log('payload', payload);
-    actions.createWhatsappTemplate(payload, (resp, errorMessage) => {
+    actions.createWhatsappTemplate(createPayload(), (resp, errorMessage) => {
       actionCallback({ resp, errorMessage });
       if (!errorMessage) {
         onCreateComplete();
@@ -2558,8 +2545,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   const renderedEditMessage = (messageData, type, carousel) => {
-    console.log("tagsWsapp----> messageData", messageData);
-    console.log("tagsWsapp----> type", type);
     const renderArray = [];
     if (messageData && messageData?.length !== 0) {
       let varCount = 0;
@@ -2578,9 +2563,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             break;
         }
         if (elem.match(validRegex)?.length > 0) {
-          console.log("tagsWsapp----> if condition ; elem", elem);
           varCount += 1;
-          console.log("tagsWsapp----> if condition ; varCount", varCount);
           renderArray.push(
             <TextArea
               id={`${elem}_${index}`}
@@ -2596,7 +2579,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             />
           );
         } else {
-          console.log("tagsWsapp----> outer else condition ; elem", elem);
           renderArray.push(
             <CapHeading
               key={`${elem}_${index}`}
@@ -2717,7 +2699,6 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             </CapHeading>
           }
           suffix={
-            // console.log("location", location);
             templateStatus === WHATSAPP_STATUSES.approved && !isAuthenticationTemplate && (
               <TagList
                 label={formatMessage(globalMessages.addLabels)}