@capillarytech/creatives-library 8.0.207 → 8.0.208

package/config/app.js

@@ -20,7 +20,8 @@ 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: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/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.207",
+  "version": "8.0.208",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -264,6 +264,7 @@ export const getUserData = () => {
 
 export const createTemplate = ({template}) => {
   const url = `${API_ENDPOINT}/templates/SMS`;
+  console.log("creating template",template);
   return request(url, getAPICallObject('POST', template));
 };
 
@@ -346,6 +347,7 @@ export const getAllTemplates = async ({channel, queryParams = {}}) => {
 
 export const deleteTemplate = ({channel, id}) => {
   const url = `${API_ENDPOINT}/templates/${id}/${channel}`;
+  console.log("deleting template", url);
   return request(url, getAPICallObject('DELETE'));
   //return API.deleteResource(url);
 };

package/v2Containers/CreativesContainer/SlideBoxContent.js

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

package/v2Containers/Whatsapp/constants.js

@@ -63,7 +63,7 @@ export const mediaTypeOptions = ({host, templateCategory}) => {
       tagColor: CAP_PURPLE03,
       tagTextColor: CAP_PURPLE02,
     },
-    ...(host === HOST_TWILIO
+    ...((host === HOST_TWILIO || (host === HOST_VALUE_FIRST && templateCategory === WHATSAPP_CATEGORIES.authentication))
       ? []
       : [
         {
@@ -80,7 +80,7 @@ export const mediaTypeOptions = ({host, templateCategory}) => {
           tagColor: CAP_GREEN02,
           tagTextColor: CAP_GREEN01,
         },
-        ...(templateCategory === WHATSAPP_CATEGORIES.marketing && (host === HOST_GUPSHUP || host === HOST_KARIX)
+        ...(templateCategory === WHATSAPP_CATEGORIES.marketing && CAROUSEL_SUPPORTING_HOSTS.includes(host)
           ? [
             {
               key: 'CAROUSEL',
@@ -104,6 +104,25 @@ 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',
@@ -333,6 +352,7 @@ export const INITIAL_QUICK_REPLY_DATA = [
   },
 ];
 
+
 export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
 export const ALLOWED_EXTENSIONS_VIDEO_REGEX = (/\.(mp4)$/i);
 export const ALLOWED_EXTENSIONS_DOCUMENT_REGEX = (/\.(pdf)$/i);
@@ -346,6 +366,9 @@ 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 CAROUSEL_SUPPORTING_HOSTS = [HOST_GUPSHUP, HOST_VALUE_FIRST, HOST_KARIX];
 
 export const SIZE_UNITS = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 export const DOCUMENT_FORMAT = 'PDF';
@@ -685,6 +708,7 @@ 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,6 +55,7 @@ import {
   WHATSAPP,
   TWILIO_CATEGORY_OPTIONS,
   KARIX_GUPSHUP_CATEGORY_OPTIONS,
+  VALUE_FIRST_CATEGORY_OPTIONS,
   LANGUAGE_OPTIONS,
   WHATSAPP_STATUSES,
   TAG,
@@ -98,6 +99,7 @@ import {
   HAPTIC_CATEGORY_OPTIONS,
   CORRECT_TEMPLATE_FORMAT_URL,
   CATEGORY_OPTIONS_MAP,
+  HOST_VALUE_FIRST,
   IMAGE,
   VIDEO,
   URL,
@@ -1691,7 +1693,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 
   const createApprovalHandler = () => {
     setSpin(true);
-    actions.createWhatsappTemplate(createPayload(), (resp, errorMessage) => {
+    const payload = createPayload();
+    actions.createWhatsappTemplate(payload, (resp, errorMessage) => {
       actionCallback({ resp, errorMessage });
       if (!errorMessage) {
         onCreateComplete();

package/v2Containers/Whatsapp/tests/index.test.js

@@ -726,48 +726,123 @@ describe('Creatives Whatsapp test2/>', () => {
   });
 });
 
-// --- UNIT TESTS FOR mediaTypeOptions ---
+// --- UNIT TESTS FOR mediaTypeOptions and CAROUSEL_SUPPORTING_HOSTS ---
 describe('mediaTypeOptions', () => {
-  it('should include CAROUSEL when category is MARKETING and host is HOST_GUPSHUP', () => {
-    const options = mediaTypeOptions({
+  it('should include CAROUSEL when category is MARKETING and host is in CAROUSEL_SUPPORTING_HOSTS', () => {
+    // Test HOST_GUPSHUP
+    const optionsGupshup = mediaTypeOptions({
       host: HOST_GUPSHUP,
       templateCategory: WHATSAPP_CATEGORIES.marketing,
     });
-    const hasCarousel = options.some(
+    const hasCarouselGupshup = optionsGupshup.some(
       (opt) => Array.isArray(opt)
         ? opt.some((o) => o.key === 'CAROUSEL')
         : opt.key === 'CAROUSEL'
-    ) || options.flat().some((o) => o.key === 'CAROUSEL');
-    expect(hasCarousel).toBe(true);
+    ) || optionsGupshup.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselGupshup).toBe(true);
+
+    // Test HOST_VALUE_FIRST
+    const optionsValueFirst = mediaTypeOptions({
+      host: 'valuefirstwhatsappbulk',
+      templateCategory: WHATSAPP_CATEGORIES.marketing,
+    });
+    const hasCarouselValueFirst = optionsValueFirst.some(
+      (opt) => Array.isArray(opt)
+        ? opt.some((o) => o.key === 'CAROUSEL')
+        : opt.key === 'CAROUSEL'
+    ) || optionsValueFirst.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselValueFirst).toBe(true);
+
+    // Test HOST_KARIX
+    const optionsKarix = mediaTypeOptions({
+      host: HOST_KARIX,
+      templateCategory: WHATSAPP_CATEGORIES.marketing,
+    });
+    const hasCarouselKarix = optionsKarix.some(
+      (opt) => Array.isArray(opt)
+        ? opt.some((o) => o.key === 'CAROUSEL')
+        : opt.key === 'CAROUSEL'
+    ) || optionsKarix.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselKarix).toBe(true);
   });
 
-  it('should NOT include CAROUSEL when category is MARKETING and host is NOT HOST_GUPSHUP', () => {
-    const options = mediaTypeOptions({
-      host: 'karixwhatsappbulk',
+  it('should NOT include CAROUSEL when category is MARKETING but host is NOT in CAROUSEL_SUPPORTING_HOSTS', () => {
+    // Test HOST_TWILIO
+    const optionsTwilio = mediaTypeOptions({
+      host: HOST_TWILIO,
       templateCategory: WHATSAPP_CATEGORIES.marketing,
     });
-    const hasCarousel = options.some(
+    const hasCarouselTwilio = optionsTwilio.some(
       (opt) => Array.isArray(opt)
         ? opt.some((o) => o.key === 'CAROUSEL')
         : opt.key === 'CAROUSEL'
-    ) || options.flat().some((o) => o.key === 'CAROUSEL');
-    expect(hasCarousel).toBe(true);
+    ) || optionsTwilio.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselTwilio).toBe(false);
+
+    // Test HOST_ICS
+    const optionsIcs = mediaTypeOptions({
+      host: 'icswababulk',
+      templateCategory: WHATSAPP_CATEGORIES.marketing,
+    });
+    const hasCarouselIcs = optionsIcs.some(
+      (opt) => Array.isArray(opt)
+        ? opt.some((o) => o.key === 'CAROUSEL')
+        : opt.key === 'CAROUSEL'
+    ) || optionsIcs.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselIcs).toBe(false);
+
+    // Test HOST_HAPTIC
+    const optionsHaptic = mediaTypeOptions({
+      host: 'hapticwhatsappbulk',
+      templateCategory: WHATSAPP_CATEGORIES.marketing,
+    });
+    const hasCarouselHaptic = optionsHaptic.some(
+      (opt) => Array.isArray(opt)
+        ? opt.some((o) => o.key === 'CAROUSEL')
+        : opt.key === 'CAROUSEL'
+    ) || optionsHaptic.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselHaptic).toBe(false);
   });
 
-  it('should NOT include CAROUSEL when category is NOT MARKETING and host is HOST_GUPSHUP', () => {
-    const options = mediaTypeOptions({
+  it('should NOT include CAROUSEL when category is NOT MARKETING even if host is in CAROUSEL_SUPPORTING_HOSTS', () => {
+    // Test HOST_GUPSHUP with authentication category
+    const optionsGupshupAuth = mediaTypeOptions({
       host: HOST_GUPSHUP,
+      templateCategory: WHATSAPP_CATEGORIES.authentication,
+    });
+    const hasCarouselGupshupAuth = optionsGupshupAuth.some(
+      (opt) => Array.isArray(opt)
+        ? opt.some((o) => o.key === 'CAROUSEL')
+        : opt.key === 'CAROUSEL'
+    ) || optionsGupshupAuth.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselGupshupAuth).toBe(false);
+
+    // Test HOST_VALUE_FIRST with utility category
+    const optionsValueFirstUtility = mediaTypeOptions({
+      host: 'valuefirstwhatsappbulk',
       templateCategory: WHATSAPP_CATEGORIES.utility,
     });
-    const hasCarousel = options.some(
+    const hasCarouselValueFirstUtility = optionsValueFirstUtility.some(
       (opt) => Array.isArray(opt)
         ? opt.some((o) => o.key === 'CAROUSEL')
         : opt.key === 'CAROUSEL'
-    ) || options.flat().some((o) => o.key === 'CAROUSEL');
-    expect(hasCarousel).toBe(false);
+    ) || optionsValueFirstUtility.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselValueFirstUtility).toBe(false);
+
+    // Test HOST_KARIX with utility category
+    const optionsKarixUtility = mediaTypeOptions({
+      host: HOST_KARIX,
+      templateCategory: WHATSAPP_CATEGORIES.utility,
+    });
+    const hasCarouselKarixUtility = optionsKarixUtility.some(
+      (opt) => Array.isArray(opt)
+        ? opt.some((o) => o.key === 'CAROUSEL')
+        : opt.key === 'CAROUSEL'
+    ) || optionsKarixUtility.flat().some((o) => o.key === 'CAROUSEL');
+    expect(hasCarouselKarixUtility).toBe(false);
   });
 
-  it('should NOT include CAROUSEL when category is NOT MARKETING and host is NOT HOST_GUPSHUP', () => {
+  it('should NOT include CAROUSEL when category is NOT MARKETING and host is NOT in CAROUSEL_SUPPORTING_HOSTS', () => {
     const options = mediaTypeOptions({
       host: HOST_TWILIO,
       templateCategory: WHATSAPP_CATEGORIES.utility,
@@ -779,4 +854,371 @@ describe('mediaTypeOptions', () => {
     ) || options.flat().some((o) => o.key === 'CAROUSEL');
     expect(hasCarousel).toBe(false);
   });
+
+  it('should always include TEXT media type as first option', () => {
+    const options = mediaTypeOptions({
+      host: HOST_GUPSHUP,
+      templateCategory: WHATSAPP_CATEGORIES.marketing,
+    });
+    expect(options[0].key).toBe('TEXT');
+    expect(options[0].value).toBe('TEXT');
+  });
+
+  it('should include IMAGE, VIDEO, DOCUMENT for non-Twilio hosts', () => {
+    const options = mediaTypeOptions({
+      host: HOST_GUPSHUP,
+      templateCategory: WHATSAPP_CATEGORIES.marketing,
+    });
+    const keys = options.map(opt => opt.key);
+    expect(keys).toContain('IMAGE');
+    expect(keys).toContain('VIDEO');
+    expect(keys).toContain('DOCUMENT');
+  });
+
+  it('should only include TEXT for Twilio host', () => {
+    const options = mediaTypeOptions({
+      host: HOST_TWILIO,
+      templateCategory: WHATSAPP_CATEGORIES.marketing,
+    });
+    expect(options).toHaveLength(1);
+    expect(options[0].key).toBe('TEXT');
+  });
+});
+
+// --- UNIT TESTS FOR CAROUSEL_SUPPORTING_HOSTS constant ---
+describe('CAROUSEL_SUPPORTING_HOSTS constant', () => {
+  it('should include required hosts that support carousel (order/size agnostic)', () => {
+    const { CAROUSEL_SUPPORTING_HOSTS } = require('../constants');
+    expect(Array.isArray(CAROUSEL_SUPPORTING_HOSTS)).toBe(true);
+    expect(CAROUSEL_SUPPORTING_HOSTS).toEqual(
+      expect.arrayContaining(['gupshupwhatsappbulk','valuefirstwhatsappbulk','karixwhatsappbulk'])
+    );
+  });
+
+  it('should include HOST_GUPSHUP, HOST_VALUE_FIRST, and HOST_KARIX', () => {
+    const { CAROUSEL_SUPPORTING_HOSTS } = require('../constants');
+    expect(CAROUSEL_SUPPORTING_HOSTS).toContain('gupshupwhatsappbulk');
+    expect(CAROUSEL_SUPPORTING_HOSTS).toContain('valuefirstwhatsappbulk');
+    expect(CAROUSEL_SUPPORTING_HOSTS).toContain('karixwhatsappbulk');
+  });
+
+  it('should not include HOST_TWILIO, HOST_ICS, or HOST_HAPTIC', () => {
+    const { CAROUSEL_SUPPORTING_HOSTS } = require('../constants');
+    expect(CAROUSEL_SUPPORTING_HOSTS).not.toContain('twiliowhatsapptrans');
+    expect(CAROUSEL_SUPPORTING_HOSTS).not.toContain('icswababulk');
+    expect(CAROUSEL_SUPPORTING_HOSTS).not.toContain('hapticwhatsappbulk');
+  });
+});
+
+// --- UNIT TESTS FOR VALUE_FIRST HOST SPECIFIC FLOWS ---
+describe('ValueFirst Host Specific Tests', () => {
+  const valueFirstAccountData = {
+    selectedWhatsappAccount: {
+      name: 'ValueFirst Test Account',
+      sourceAccountIdentifier: 'VF123456789',
+      configs: { accessToken: 'vf_test_token' },
+      hostName: 'valuefirstwhatsappbulk',
+    },
+  };
+
+  const { VALUE_FIRST_CATEGORY_OPTIONS, HOST_VALUE_FIRST } = require('../constants');
+
+  describe('ValueFirst Category Options', () => {
+    it('should have correct category options for ValueFirst', () => {
+      expect(VALUE_FIRST_CATEGORY_OPTIONS).toHaveLength(2);
+      expect(VALUE_FIRST_CATEGORY_OPTIONS[0].value).toBe('MARKETING');
+      expect(VALUE_FIRST_CATEGORY_OPTIONS[1].value).toBe('AUTHENTICATION');
+    });
+
+    it('should not include utility category for ValueFirst', () => {
+      const categoryValues = VALUE_FIRST_CATEGORY_OPTIONS.map(opt => opt.value);
+      expect(categoryValues).not.toContain('UTILITY');
+      expect(categoryValues).not.toContain('ALERT_UPDATE');
+      expect(categoryValues).not.toContain('ACCOUNT_UPDATE');
+    });
+  });
+
+  describe('ValueFirst Media Type Options', () => {
+    it('should include all media types except Twilio restrictions for ValueFirst', () => {
+      const options = mediaTypeOptions({
+        host: HOST_VALUE_FIRST,
+        templateCategory: WHATSAPP_CATEGORIES.marketing,
+      });
+      
+      const keys = options.map(opt => opt.key);
+      expect(keys).toContain('TEXT');
+      expect(keys).toContain('IMAGE');
+      expect(keys).toContain('VIDEO');
+      expect(keys).toContain('DOCUMENT');
+      expect(keys).toContain('CAROUSEL');
+    });
+
+    it('should include CAROUSEL for ValueFirst with MARKETING category', () => {
+      const options = mediaTypeOptions({
+        host: HOST_VALUE_FIRST,
+        templateCategory: WHATSAPP_CATEGORIES.marketing,
+      });
+      
+      const hasCarousel = options.some(
+        (opt) => Array.isArray(opt)
+          ? opt.some((o) => o.key === 'CAROUSEL')
+          : opt.key === 'CAROUSEL'
+      ) || options.flat().some((o) => o.key === 'CAROUSEL');
+      
+      expect(hasCarousel).toBe(true);
+    });
+
+    it('should NOT include CAROUSEL for ValueFirst with AUTHENTICATION category', () => {
+      const options = mediaTypeOptions({
+        host: HOST_VALUE_FIRST,
+        templateCategory: WHATSAPP_CATEGORIES.authentication,
+      });
+      
+      const hasCarousel = options.some(
+        (opt) => Array.isArray(opt)
+          ? opt.some((o) => o.key === 'CAROUSEL')
+          : opt.key === 'CAROUSEL'
+      ) || options.flat().some((o) => o.key === 'CAROUSEL');
+      
+      expect(hasCarousel).toBe(false);
+    });
+
+    it('should have correct media type structure for ValueFirst', () => {
+      const options = mediaTypeOptions({
+        host: HOST_VALUE_FIRST,
+        templateCategory: WHATSAPP_CATEGORIES.marketing,
+      });
+      
+      // Check TEXT option
+      expect(options[0]).toEqual({
+        key: 'TEXT',
+        value: 'TEXT',
+        label: expect.any(Object),
+        tagColor: expect.any(String),
+        tagTextColor: expect.any(String),
+      });
+      
+      // Check IMAGE option
+      const imageOption = options.find(opt => opt.key === 'IMAGE');
+      expect(imageOption).toEqual({
+        key: 'IMAGE',
+        value: 'IMAGE',
+        label: expect.any(Object),
+        tagColor: expect.any(String),
+        tagTextColor: expect.any(String),
+      });
+      
+      // Check CAROUSEL option
+      const carouselOption = options.find(opt => opt.key === 'CAROUSEL');
+      expect(carouselOption).toEqual({
+        key: 'CAROUSEL',
+        value: 'CAROUSEL',
+        label: expect.any(Object),
+        tagColor: expect.any(String),
+        tagTextColor: expect.any(String),
+      });
+    });
+  });
+
+  describe('ValueFirst Component Integration', () => {
+    let renderedComponent;
+    
+    const renderHelper = (props = {}, isFullMode = false, accountData = valueFirstAccountData) => {
+      renderedComponent = mountWithIntl(
+        <Provider store={store}>
+          <Whatsapp
+            {...props}
+            isFullMode={isFullMode}
+            accountData={accountData}
+            actions={{
+              createWhatsappTemplate: jest.fn(),
+              getFormData: jest.fn(),
+              clearCreateResponse: jest.fn(),
+              getTemplateDetails: jest.fn(),
+              resetEditTemplate: jest.fn(),
+              fetchSchemaForEntity: jest.fn(),
+              getMetaTags: jest.fn(),
+              resetMetaTags: jest.fn(),
+            }}
+            globalActions={{
+              fetchSchemaForEntity: jest.fn(),
+            }}
+            handleClose={jest.fn()}
+            onCreateComplete={jest.fn()}
+            intl={{ formatMessage: jest.fn() }}
+            location={mockData.location}
+            getDefaultTags={jest.fn()}
+            supportedTags={[]}
+            metaEntities={[]}
+            injectedTags={[]}
+            loadingTags={false}
+            selectedOfferDetails={{}}
+            currentOrgDetails={{}}
+            eventContextTags={[]}
+            metaDataStatus=""
+          />
+        </Provider>,
+      );
+    };
+
+    it('should render ValueFirst account correctly', () => {
+      renderHelper({}, true, valueFirstAccountData);
+      expect(renderedComponent.exists()).toBe(true);
+    });
+
+    it('should show correct category options for ValueFirst', () => {
+      renderHelper({}, true, valueFirstAccountData);
+      
+      const categorySelect = renderedComponent.find('CapSelect#select-whatsapp-category');
+      expect(categorySelect.exists()).toBe(true);
+      
+      // Check if ValueFirst categories are available
+      const categoryOptions = categorySelect.props().options;
+      const categoryValues = categoryOptions.map(opt => opt.value);
+      
+      expect(categoryValues).toContain('MARKETING');
+      expect(categoryValues).toContain('AUTHENTICATION');
+      expect(categoryValues).not.toContain('UTILITY');
+    });
+
+    it('should show CAROUSEL media type for ValueFirst with MARKETING category', () => {
+      renderHelper({}, true, valueFirstAccountData);
+      
+      // Set category to MARKETING
+      renderedComponent
+        .find('CapSelect#select-whatsapp-category')
+        .props()
+        .onChange(WHATSAPP_CATEGORIES.marketing);
+      
+      renderedComponent.update();
+      
+      // Verify the enabling condition directly using constants
+      const { CAROUSEL_SUPPORTING_HOSTS } = require('../constants');
+      const isAllowed = CAROUSEL_SUPPORTING_HOSTS.includes('valuefirstwhatsappbulk') && WHATSAPP_CATEGORIES.marketing === 'MARKETING';
+      expect(isAllowed).toBe(true);
+    });
+
+    it('should NOT show CAROUSEL media type for ValueFirst with AUTHENTICATION category', () => {
+      renderHelper({}, true, valueFirstAccountData);
+      
+      // Set category to AUTHENTICATION
+      renderedComponent
+        .find('CapSelect#select-whatsapp-category')
+        .props()
+        .onChange(WHATSAPP_CATEGORIES.authentication);
+      
+      renderedComponent.update();
+      
+      // Verify disabling condition directly using constants
+      const { CAROUSEL_SUPPORTING_HOSTS } = require('../constants');
+      const isAllowed = CAROUSEL_SUPPORTING_HOSTS.includes('valuefirstwhatsappbulk') && WHATSAPP_CATEGORIES.authentication === 'MARKETING';
+      expect(isAllowed).toBe(false);
+    });
+
+    it('should handle ValueFirst template creation flow', () => {
+      renderHelper({}, true, valueFirstAccountData);
+      
+      // Set template name
+      const nameInput = renderedComponent.find('#whatsapp_template_name_input').at(3);
+      nameInput.simulate('change', { target: { value: 'valuefirst_test_template' } });
+      
+      // Set category to MARKETING
+      renderedComponent
+        .find('CapSelect#select-whatsapp-category')
+        .props()
+        .onChange(WHATSAPP_CATEGORIES.marketing);
+      
+      renderedComponent.update();
+      
+      // Verify the component renders without errors
+      expect(renderedComponent.exists()).toBe(true);
+      
+      // Test that ValueFirst supports carousel through mediaTypeOptions
+      const { mediaTypeOptions } = require('../constants');
+      const options = mediaTypeOptions({
+        host: 'valuefirstwhatsappbulk',
+        templateCategory: WHATSAPP_CATEGORIES.marketing,
+      });
+      
+      const keys = options.map(opt => opt.key);
+      expect(keys).toContain('CAROUSEL');
+    });
+
+    it('should handle ValueFirst authentication template flow', () => {
+      renderHelper({}, true, valueFirstAccountData);
+      
+      // Set category to AUTHENTICATION
+      renderedComponent
+        .find('CapSelect#select-whatsapp-category')
+        .props()
+        .onChange(WHATSAPP_CATEGORIES.authentication);
+      
+      renderedComponent.update();
+      
+      // Set template name
+      const nameInput = renderedComponent.find('#whatsapp_template_name_input').at(3);
+      nameInput.simulate('change', { target: { value: 'valuefirst_auth_template' } });
+      
+      // Verify the component renders without errors
+      expect(renderedComponent.exists()).toBe(true);
+      
+      // Test that ValueFirst does not support carousel for authentication
+      const { mediaTypeOptions } = require('../constants');
+      const options = mediaTypeOptions({
+        host: 'valuefirstwhatsappbulk',
+        templateCategory: WHATSAPP_CATEGORIES.authentication,
+      });
+      
+      const keys = options.map(opt => opt.key);
+      expect(keys).not.toContain('CAROUSEL');
+    });
+  });
+
+  describe('ValueFirst Edge Cases', () => {
+    it('should handle undefined host gracefully', () => {
+      const options = mediaTypeOptions({
+        host: undefined,
+        templateCategory: WHATSAPP_CATEGORIES.marketing,
+      });
+      
+      expect(Array.isArray(options)).toBe(true);
+      expect(options.length).toBeGreaterThan(0);
+    });
+
+    it('should handle null host gracefully', () => {
+      const options = mediaTypeOptions({
+        host: null,
+        templateCategory: WHATSAPP_CATEGORIES.marketing,
+      });
+      
+      expect(Array.isArray(options)).toBe(true);
+      expect(options.length).toBeGreaterThan(0);
+    });
+
+    it('should handle empty string host gracefully', () => {
+      const options = mediaTypeOptions({
+        host: '',
+        templateCategory: WHATSAPP_CATEGORIES.marketing,
+      });
+      
+      expect(Array.isArray(options)).toBe(true);
+      expect(options.length).toBeGreaterThan(0);
+    });
+
+    it('should handle case sensitivity correctly', () => {
+      const options = mediaTypeOptions({
+        host: 'VALUEFIRSTWHATSAPPBULK', // uppercase
+        templateCategory: WHATSAPP_CATEGORIES.marketing,
+      });
+      
+      const hasCarousel = options.some(
+        (opt) => Array.isArray(opt)
+          ? opt.some((o) => o.key === 'CAROUSEL')
+          : opt.key === 'CAROUSEL'
+      ) || options.flat().some((o) => o.key === 'CAROUSEL');
+      
+      // Should not include carousel because case doesn't match
+      expect(hasCarousel).toBe(false);
+    });
+  });
 });