@capillarytech/creatives-library 8.0.90 → 8.0.91

package/v2Components/CapWhatsappCarouselButton/tests/index.test.js

@@ -0,0 +1,237 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '../../../utils/test-utils';
+import { CapWhatsappCarouselButton } from '../index';
+import { 
+  INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+  INITIAL_CAROUSEL_URL_DATA 
+} from '../constant';
+import { HOST_TWILIO } from "../../../v2Containers/Whatsapp/constants";
+
+const setCarouselData = jest.fn();
+
+const initializeComponent = (
+  carouselData = [],
+  isEditFlow = false,
+  hostName = HOST_TWILIO,
+  carouselIndex = 0
+) => {
+  const Component = injectIntl(CapWhatsappCarouselButton);
+  return render(
+    <Component
+      carouselData={carouselData}
+      setCarouselData={setCarouselData}
+      carouselIndex={carouselIndex}
+      hostName={hostName}
+      isEditFlow={isEditFlow}
+      tags={[]}
+      injectedTags={{}}
+      selectedOfferDetails={[]}
+    />,
+  );
+};
+
+describe('CapWhatsappCarouselButton', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders initial phone number button type', () => {
+    initializeComponent([{
+      buttons: [INITIAL_CAROUSEL_PHONE_NUMBER_DATA]
+    }]);
+    
+    expect(screen.getByText('Button type')).toBeInTheDocument();
+    expect(screen.getByText('Button text')).toBeInTheDocument();
+    expect(screen.getAllByText('Phone number')).toHaveLength(2);
+    expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+  });
+
+  it('handles button text change', () => {
+    initializeComponent([{
+      buttons: [INITIAL_CAROUSEL_PHONE_NUMBER_DATA]
+    }]);
+
+    const buttonTextInput = screen.getByPlaceholderText('Enter button text');
+    fireEvent.change(buttonTextInput, { target: { value: 'Call now' } });
+
+    expect(setCarouselData).toHaveBeenCalledWith([{
+      buttons: [{
+        ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+        text: 'Call now'
+      }]
+    }]);
+  });
+
+  it('handles phone number change', () => {
+    initializeComponent([{
+      buttons: [INITIAL_CAROUSEL_PHONE_NUMBER_DATA]
+    }]);
+
+    const phoneInput = screen.getByPlaceholderText('Enter phone number');
+    fireEvent.change(phoneInput, { target: { value: '9112345678' } });
+    expect(screen.getByText('Phone')).toBeInTheDocument();
+  });
+
+  it('handles URL type button with static URL', () => {
+    initializeComponent([{
+      buttons: [INITIAL_CAROUSEL_URL_DATA]
+    }]);
+
+    const urlInput = screen.getByPlaceholderText('Enter website URL');
+    fireEvent.change(urlInput, { 
+      target: { value: 'https://www.example.com' }
+    });
+
+    expect(setCarouselData).toHaveBeenCalled();
+  });
+
+  it('handles URL type button with dynamic URL', () => {
+    const urlData = {
+      ...INITIAL_CAROUSEL_URL_DATA,
+      urlType: 'DYNAMIC_URL'
+    };
+    
+    initializeComponent([{
+      buttons: [urlData]
+    }]);
+
+    const urlInput = screen.getByPlaceholderText('Enter URL, variable is added by default');
+    fireEvent.change(urlInput, { 
+      target: { value: 'https://www.example.com/{{1}}' }
+    });
+
+    expect(setCarouselData).toHaveBeenCalled();
+  });
+
+  it('shows saved button state', () => {
+    initializeComponent([{
+      buttons: [{
+        ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+        text: 'Call us',
+        phone_number: '9112345678',
+        isSaved: true
+      }]
+    }]);
+
+    expect(screen.getByText('Call us')).toBeInTheDocument();
+    expect(screen.getByText('9112345678')).toBeInTheDocument();
+  });
+
+  it('handles add button click', () => {
+    initializeComponent([{
+      buttons: [{
+        ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+        text: 'Call us',
+        phone_number: '9112345678',
+        isSaved: true
+      }]
+    }]);
+
+    const addButton = screen.getByRole('button', { name: /add button/i });
+    fireEvent.click(addButton);
+
+    expect(setCarouselData).toHaveBeenCalled();
+  });
+
+  it('handles delete button click', () => {
+    initializeComponent([{
+      buttons: [
+        {
+          ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+          text: 'Call us',
+          phone_number: '9112345678',
+          isSaved: true
+        },
+        {
+          ...INITIAL_CAROUSEL_URL_DATA,
+          text: 'Visit us',
+          url: 'https://example.com',
+          isSaved: true
+        }
+      ]
+    }]);
+
+    const deleteButton = screen.getAllByRole('button', { 
+      class: 'ant-btn cap-button-v2 flat-btn whatsapp-carousel-delete-icon-btn ant-btn-flat'
+    });
+    fireEvent.click(deleteButton[0]);
+
+    expect(setCarouselData).toHaveBeenCalledTimes(1);
+  });
+
+  // Additional test case for delete button disabled state
+  it('delete button should be disabled when only one button exists', () => {
+    initializeComponent([{
+      buttons: [
+        {
+          ...INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+          text: 'Call us',
+          phone_number: '9112345678',
+          isSaved: true
+        }
+      ]
+    }]);
+
+    const deleteButton = screen.getAllByRole('button', { 
+      class: 'ant-btn cap-button-v2 flat-btn whatsapp-carousel-delete-icon-btn ant-btn-flat'
+    });
+    
+    expect(deleteButton[0]).toBeDisabled();
+  });
+
+  it('handles edit mode', () => {
+    initializeComponent([{
+      buttons: [{
+        ...INITIAL_CAROUSEL_URL_DATA,
+        text: 'Visit us',
+        url: 'https://example.com/{{1}}',
+        urlType: 'DYNAMIC_URL',
+        isSaved: true,
+        isEditFlow: true,
+      }]
+    }]);
+
+    expect(screen.getByText('Visit us')).toBeInTheDocument();
+    expect(screen.getByText('https://example.com/{{1}}')).toBeInTheDocument();
+  });
+
+  it('validates invalid button text', () => {
+    initializeComponent([{
+      buttons: [INITIAL_CAROUSEL_PHONE_NUMBER_DATA]
+    }]);
+
+    const buttonTextInput = screen.getByPlaceholderText('Enter button text');
+    fireEvent.change(buttonTextInput, { target: { value: '!@#$' } });
+
+    expect(setCarouselData).toHaveBeenCalledWith(expect.arrayContaining([
+      expect.objectContaining({
+        buttons: expect.arrayContaining([
+          expect.objectContaining({
+            textError: expect.any(String)
+          })
+        ])
+      })
+    ]));
+  });
+
+  it('validates invalid URL', () => {
+    initializeComponent([{
+      buttons: [INITIAL_CAROUSEL_URL_DATA]
+    }]);
+
+    const urlInput = screen.getByPlaceholderText('Enter website URL');
+    fireEvent.change(urlInput, { target: { value: 'invalid-url' } });
+
+    expect(setCarouselData).toHaveBeenCalledWith(expect.arrayContaining([
+      expect.objectContaining({
+        buttons: expect.arrayContaining([
+          expect.objectContaining({
+            urlError: expect.any(String)
+          })
+        ])
+      })
+    ]));
+  });
+});

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -567,6 +567,10 @@
         font-size: 10px;
         font-family: 'open-sans';
       }
+      &.message-pop-carousel {
+        position: relative; 
+        margin-right: $CAP_SPACE_04;
+      }
     }
   }
   .android-push-message-Container, .iphone-push-message-Container{
@@ -747,6 +751,11 @@
       width: 153px;
     }
   }
+
+  .msg-container-carousel {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .align-center {

package/v2Components/TemplatePreview/assets/images/empty_image_preview.svg

@@ -0,0 +1,4 @@
+<svg width="258" height="140" viewBox="0 0 258 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="258" height="140" rx="4" fill="#F4F5F7"/>
+<path d="M122 79C121.45 79 120.979 78.8042 120.588 78.4125C120.196 78.0208 120 77.55 120 77V63C120 62.45 120.196 61.9792 120.588 61.5875C120.979 61.1958 121.45 61 122 61H136C136.55 61 137.021 61.1958 137.413 61.5875C137.804 61.9792 138 62.45 138 63V77C138 77.55 137.804 78.0208 137.413 78.4125C137.021 78.8042 136.55 79 136 79H122ZM122 77H136V63H122V77ZM124 75H134C134.2 75 134.35 74.9083 134.45 74.725C134.55 74.5417 134.533 74.3667 134.4 74.2L131.65 70.525C131.55 70.3917 131.417 70.325 131.25 70.325C131.083 70.325 130.95 70.3917 130.85 70.525L128.25 74L126.4 71.525C126.3 71.3917 126.167 71.325 126 71.325C125.833 71.325 125.7 71.3917 125.6 71.525L123.6 74.2C123.467 74.3667 123.45 74.5417 123.55 74.725C123.65 74.9083 123.8 75 124 75Z" fill="#5E6C84"/>
+</svg>

package/v2Components/TemplatePreview/assets/images/empty_video_preview.svg

@@ -0,0 +1,4 @@
+<svg width="258" height="140" viewBox="0 0 258 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="258" height="140" rx="4" fill="#F4F5F7"/>
+<path d="M123.025 74H130.975C131.192 74 131.346 73.9083 131.438 73.725C131.529 73.5417 131.508 73.3667 131.375 73.2L128.95 70.025C128.9 69.9583 128.842 69.9083 128.775 69.875C128.708 69.8417 128.633 69.825 128.55 69.825C128.467 69.825 128.392 69.8417 128.325 69.875C128.258 69.9083 128.2 69.9583 128.15 70.025L126.65 71.975C126.6 72.0417 126.542 72.0917 126.475 72.125C126.408 72.1583 126.333 72.175 126.25 72.175C126.167 72.175 126.092 72.1583 126.025 72.125C125.958 72.0917 125.9 72.0417 125.85 71.975L125.1 71C125.05 70.9333 124.992 70.8875 124.925 70.8625C124.858 70.8375 124.783 70.825 124.7 70.825C124.617 70.825 124.542 70.8375 124.475 70.8625C124.408 70.8875 124.35 70.9333 124.3 71L122.625 73.2C122.492 73.3667 122.471 73.5417 122.562 73.725C122.654 73.9083 122.808 74 123.025 74ZM121 78C120.45 78 119.979 77.8042 119.588 77.4125C119.196 77.0208 119 76.55 119 76V64C119 63.45 119.196 62.9792 119.588 62.5875C119.979 62.1958 120.45 62 121 62H133C133.55 62 134.021 62.1958 134.413 62.5875C134.804 62.9792 135 63.45 135 64V68.5L138.15 65.35C138.317 65.1833 138.5 65.1417 138.7 65.225C138.9 65.3083 139 65.4667 139 65.7V74.3C139 74.5333 138.9 74.6917 138.7 74.775C138.5 74.8583 138.317 74.8167 138.15 74.65L135 71.5V76C135 76.55 134.804 77.0208 134.413 77.4125C134.021 77.8042 133.55 78 133 78H121ZM121 76H133V64H121V76Z" fill="#5E6C84"/>
+</svg>

package/v2Components/TemplatePreview/index.js

@@ -20,6 +20,7 @@ import {
   CAP_PURPLE01,
   CAP_G16,
   CAP_SPACE_08,
+  CAP_SPACE_04,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import isEmpty from 'lodash/isEmpty';
 import './_templatePreview.scss';
@@ -43,14 +44,16 @@ import inAppMobileIOSModal from './assets/images/inapp_mobile_ios_modal.svg';
 import inAppMobileIOSTop from './assets/images/inapp_mobile_ios_top.svg';
 import inAppMobileIOSBottom from './assets/images/inapp_mobile_ios_bottom.svg';
 import inAppMobileIOSFull from './assets/images/inapp_mobile_ios_full.svg';
+import whatsappImageEmptyPreview from './assets/images/empty_image_preview.svg';
+import whatsappVideoEmptyPreview from './assets/images/empty_video_preview.svg';
 import videoPlay from '../../assets/videoPlay.svg';
 import zaloMessage from '../../v2Containers/Zalo/messages';
 import { handlePreviewInNewTab } from '../../utils/common';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
-import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
-import { QUICK_REPLY, WHATSAPP_CATEGORIES } from '../../v2Containers/Whatsapp/constants';
+import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../v2Containers/Whatsapp/utils';
+import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER } from '../../v2Containers/Whatsapp/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
 
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
@@ -213,7 +216,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       iosActions = _.map(content.actions, (action) => {
         if (action.label) {
           return (<div className="actions" key={`action-${action.label}`}>
-            <span className="action">{action.label.toUpperCase()}</span>
+              <span className="action">{action.label.toUpperCase()}</span>
           </div>);
         }
         return undefined;
@@ -253,6 +256,15 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       'width': '88%',
       'left': 0,
     };
+    const carouselWhatsappSectionStyle = {
+      'padding': `${CAP_SPACE_04} 0 ${CAP_SPACE_08}`,
+      'border-radius': '0.428rem',
+      'background-color': CAP_WHITE,
+      'width': '11.857rem',
+      'cursor': 'pointer',
+      'flex-shrink': 0,
+      'left': 0,
+    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -274,53 +286,53 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       >
         {
           video
-          ? (
-            <>
-              <video style={{ opacity: 0.5, width: '100%' }}>
-                <source src={video} type="video/mp4" />
-              </video>
-              <div
-                style={{
-                  position: 'absolute',
-                  display: 'flex',
-                  flexDirection: 'column',
-                }}
-              >
-                <CapButton
-                  className="preview-video-btn"
-                  type="flat"
+            ? (
+              <>
+                <video style={{ opacity: 0.5, width: '100%' }}>
+                  <source src={video} type="video/mp4" />
+                </video>
+                <div
+                  style={{
+                    position: 'absolute',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
                 >
+                  <CapButton
+                    className="preview-video-btn"
+                    type="flat"
+                  >
                   <CapIcon type="play"/>
-                  <FormattedMessage {...messages.playVideo} />
-                </CapButton>
-                {
-                  actionUrl
-                  ? (
-                    <CapButton
-                      className="preview-video-btn"
-                      type="flat"
-                    >
+                    <FormattedMessage {...messages.playVideo} />
+                  </CapButton>
+                  {
+                    actionUrl
+                      ? (
+                        <CapButton
+                          className="preview-video-btn"
+                          type="flat"
+                        >
                       <CapIcon type="reply" style={{ fontSize: 18 }}/>
-                      <FormattedMessage {...messages.showDetails} />
-                    </CapButton>
-                  )
-                  : null
-                }
-              </div>
-            </>
-          )
-          : (
-            <CapImage
-              src={lineVideoPlaceholder}
-              alt="brand-name"
-              rest={{
-                style: {
-                  width: 126,
-                  marginBottom: 5,
-                },
-              }}
-            />
-          )
+                          <FormattedMessage {...messages.showDetails} />
+                        </CapButton>
+                      )
+                      : null
+                  }
+                </div>
+              </>
+            )
+            : (
+              <CapImage
+                src={lineVideoPlaceholder}
+                alt="brand-name"
+                rest={{
+                  style: {
+                    width: 126,
+                    marginBottom: 5,
+                  },
+                }}
+              />
+            )
         }
       </div>
     );
@@ -336,10 +348,10 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             renderArray.push(
               <CapLabel type="label21" className="whatsapp-cta-preview">
                 {type !== WHATSAPP_CATEGORIES.authentication && <CapIcon
-                  type={
-                    (ctaType || type) === 'PHONE_NUMBER' ? 'call' : 'launch'
-                  }
-                  size="xs"
+                    type={
+                      (ctaType || type) === PHONE_NUMBER ? 'call' : 'launch'
+                    }
+                    size="xs"
                 />}
                 {text}
               </CapLabel>,
@@ -430,42 +442,42 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
         {this.props.showCount &&
           channel &&
           channel.toLowerCase() !== FACEBOOK && (
-            <CapColumn span={16}>
-              {channel && channel.toLowerCase() === "sms" && (
-                <CapHeading type="h3">
-                  <FormattedMessage
-                    {...messages.charactersTotal}
-                    values={{
-                      smsCount: smsDetails.parts,
-                      charCount: smsDetails.chars_used,
-                    }}
-                  />
-                  {smsDetails.unicode && (
-                    <FormattedMessage {...messages.smsFormatType} />
-                  )}
-                </CapHeading>
-              )}
-              {smsDetails.optoutUrlPresent && (
-                <CapHeading type="h6">
+          <CapColumn span={16}>
+            {channel && channel.toLowerCase() === "sms" && (
+              <CapHeading type="h3">
+                <FormattedMessage
+                  {...messages.charactersTotal}
+                  values={{
+                    smsCount: smsDetails.parts,
+                    charCount: smsDetails.chars_used,
+                  }}
+                />
+                {smsDetails.unicode && (
+                  <FormattedMessage {...messages.smsFormatType} />
+                )}
+              </CapHeading>
+            )}
+            {smsDetails.optoutUrlPresent && (
+              <CapHeading type="h6">
+                <FormattedMessage
+                  {...messages.optoutCharactersTotal}
+                  values={{ optoutUrlLength: smsDetails.optouturlLength }}
+                />
+              </CapHeading>
+            )}
+            {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
+              <>
+                <WhatsappStatusContainer template={templateData} />
+                <CapHeading type="h3" className="margin-t-12">
                   <FormattedMessage
-                    {...messages.optoutCharactersTotal}
-                    values={{ optoutUrlLength: smsDetails.optouturlLength }}
+                    {...messages.whatsappMessageLength}
+                    values={{ length: whatsappUpdatedLen }}
                   />
                 </CapHeading>
-              )}
-              {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
-                <>
-                  <WhatsappStatusContainer template={templateData} />
-                  <CapHeading type="h3" className="margin-t-12">
-                    <FormattedMessage
-                      {...messages.whatsappMessageLength}
-                      values={{ length: whatsappUpdatedLen }}
-                    />
-                  </CapHeading>
-                </>
-              ) : null}
-            </CapColumn>
-          )}
+              </>
+            ) : null}
+          </CapColumn>
+        )}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           {showTestAndPreview && (
             <div className="test-and-preview-container">
@@ -628,9 +640,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         )}
                         {content.actions.filter((action) => action.label)
                           .length ? (
-                          <div className="actions">
-                            {_.map(
-                              content.actions,
+                            <div className="actions">
+                              {_.map(
+                                content.actions,
                               (action) =>
                                 !!action.label && (
                                   <span
@@ -640,11 +652,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                                     {action.label && action.label.toUpperCase()}
                                   </span>
                                 )
-                            )}
-                          </div>
-                        ) : (
-                          ""
-                        )}
+                              )}
+                            </div>
+                          ) : (
+                            ""
+                          )}
                       </div>
                     ) : (
                       <div className="message-pop align-left">
@@ -980,14 +992,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   <CapLabel className="whatsapp-brand-name">
                     {whatsappUpdatedAccountName || ""}
                   </CapLabel>
-                  <div className="msg-container whatsapp-message-container">
+                  <div className={`msg-container whatsapp-message-container ${content?.carouselData && 'msg-container-carousel'}`}>
                     <div
-                      className="message-pop align-left"
+                      className={`message-pop align-left ${content?.carouselData && 'message-pop-carousel'}`}
                       style={whatsappSectionStyle}
                     >
                       <div className="whatsapp-content">
-                        {content?.showUrlPreview &&
-                          renderUrlPreview(content?.metaTagsDetails)}
+                        {content?.showUrlPreview
+                          && renderUrlPreview(content?.metaTagsDetails)}
                         {content?.whatsappImageSrc && (
                           <CapImage
                             src={content.whatsappImageSrc}
@@ -1026,6 +1038,60 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         {renderQuickReplyPreview()}
                       </div>
                     </div>
+                    {content?.carouselData && (
+                      <div
+                        style={{
+                          overflowX: "auto",
+                          display: "flex",
+                          paddingTop: "5px",
+                          paddingRight: "5px",
+                          whiteSpace: "nowrap",
+                          scrollbarWidth: "none", // Hide scrollbar in Firefox
+                          msOverflowStyle: "none", // Hide scrollbar in IE/Edge
+                        }}
+                        className="scroll-container"
+                      >
+                        {content?.carouselData?.map((data, index) => (
+                          <div
+                            key={`carousel-${index}`}
+                            className="message-pop align-left message-pop-carousel"
+                            style={carouselWhatsappSectionStyle}>
+                            <div className="whatsapp-content">
+                              {content?.carouselMediaType === "image" && (
+                                <CapImage
+                                  src={data?.imageSrc ? data?.imageSrc : whatsappImageEmptyPreview}
+                                  className="whatsapp-image"
+                                  alt={formatMessage(messages.previewGenerated)}
+                                />
+                              )}
+                              {content?.carouselMediaType === "video" && (
+                                <CapTooltip
+                                  title={formatMessage(messages.videoPreviewTooltip)}
+                                >
+                                  <div className="video-preview">
+                                    <CapImage
+                                      src={data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
+                                      className="whatsapp-image"
+                                      alt={formatMessage(messages.previewGenerated)}
+                                    />
+                                    <div className="icon-position">
+                                      <CapImage
+                                        className="video-icon"
+                                        src={videoPlay}
+                                      />
+                                    </div>
+                                  </div>
+                                </CapTooltip>
+                              )}
+                              <CapLabel type="label5">
+                                {content?.isEditFlow ? data?.updatedBodyText?.join("") : data?.bodyText}
+                              </CapLabel>
+                              {getWhatsappCarouselButtonView(data?.buttons, true)}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    )}
                   </div>
                 </div>
                 <CapHeading
@@ -1205,21 +1271,21 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       {ctaData &&
                         !isEmpty(ctaData) &&
                         ctaData[0]?.text !== "" && (
-                          <CapButton
-                            type="primary"
-                            className={`inapp-button-${templateLayoutType}-${device} ${
+                        <CapButton
+                          type="primary"
+                          className={`inapp-button-${templateLayoutType}-${device} ${
                               mediaPreview?.inAppImageSrcAndroid
                                 ? ""
                                 : `without-image-button-${templateLayoutType}-android`
-                            } ${
+                          } ${
                               mediaPreview?.inAppImageSrcIos
                                 ? ""
                                 : `without-image-button-${templateLayoutType}-ios`
-                            }`}
-                          >
-                            {ctaData[0]?.text}
-                          </CapButton>
-                        )}
+                          }`}
+                        >
+                          {ctaData[0]?.text}
+                        </CapButton>
+                      )}
                     </div>
                   </div>
                 </div>