@capillarytech/creatives-library 8.0.93 → 8.0.94

package/containers/Templates/constants.js

@@ -43,3 +43,10 @@ export const RESET_TEMPLATE = "app/containers/Templates/RESET_TEMPLATE";
 export const RESET_TEMPLATE_DATA = "app/containers/Templates/RESET_TEMPLATE_DATA";
 export const RESET_UPLOAD_DATA = "app/containers/Templates/RESET_UPLOAD_DATA";
 export const CLEAR_TEMPLATE_STORE_DATA = "app/containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
+
+
+export const TRUE = 'true';
+export const FALSE = 'false';
+export const EMAIL = 'email';
+export const TYPE_EMBEDDED = 'embedded';
+export const DEFAULT = 'default';

package/containers/Templates/index.js

@@ -57,6 +57,7 @@ import lineCreateReducer from '../Line/Create/reducer';
 import { ebillSaga } from '../Ebill/sagas';
 import { lineCreateSaga } from '../Line/Create/sagas';
 import { duplicateMPushSaga } from '../MobilePush/Create/sagas';
+import { DEFAULT, FALSE, TRUE, TYPE_EMBEDDED } from './constants';
 
 const MenuItem = Menu.Item;
 const Option = Select.Option;
@@ -914,31 +915,49 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   handleEdmDefaultTemplateSelection = (isSelected, id) => {
     if (isSelected) {
-      const data = _.find(this.props.Templates.cmsTemplates, {_id: id});
-      const type = this.props.location.query.type
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      const isLanguageSupport = this.props.location.query.isLanguageSupport ? this.props.location.query.isLanguageSupport : true;
-      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    const template = _.find(this.props.Templates.cmsTemplates, (template) => {
+        return template?.versions && template?.versions?.base && template?.versions?.base?.drag_drop_id === id;
+      });
+      const {type,module = DEFAULT} = this.props?.location?.query;
+    const isLanguageSupport = this.props?.location?.query?.isLanguageSupport === TRUE;
+    const isEdmSupport = this.props?.location?.query?.isEdmSupport !== FALSE;
       let getQuery = '';
-      
-      this.props.actions.setEdmTemplate(data);
-      if (this.state.channel && this.state.channel.toLowerCase() === 'email') {
-        getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
-      } else {
-        getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
-      }
-      if (this.isEnabledInLibraryModule("callCreateFromProps")) {
-        this.props.createNew();
-        return;
-      }
+    
+      if (template) {
+    this.props.actions.setEdmTemplate({
+      ...template,
+      isEdmSupport,
+      isLanguageSupport,
+          projectId: template?.versions?.base?.drag_drop_id,
+        });
+
+        if (this.state.channel && this.state.channel.toLowerCase() === EMAIL) {
+          getQuery = (type === TYPE_EMBEDDED) ? {
+            type: TYPE_EMBEDDED, 
+      module,
+      isLanguageSupport: isLanguageSupport ? 1 : 0,
+      isEdmSupport: isEdmSupport ? 1 : 0,
+            projectId: template?.versions?.base?.drag_drop_id,
+    } : {
+      module,
+            isLanguageSupport: isLanguageSupport ? 1 : 0,
+            isEdmSupport: isEdmSupport ? 1 : 0,
+            projectId: template?.versions?.base?.drag_drop_id,
+    };
+        } else {
+          getQuery = (type === TYPE_EMBEDDED) ? {type: TYPE_EMBEDDED, module} : {module};
+        }
 
-      const queryParams = commonUtil.createQueryString(getQuery);
-      // this.props.router.push(`${pathName}${queryParams}`);
+    if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+      this.props.createNew();
+      return;
+    }
 
-      this.props.router.push({
-        pathname: `/${this.state.channel.toLowerCase()}/create`,
-        search: getQuery,
-      });
+    this.props.router.push({
+      pathname: `/${this.state.channel.toLowerCase()}/create`,
+          search: commonUtil.createQueryString(getQuery),
+        });
+      }
     }
   };
 
@@ -1128,7 +1147,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
         const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
         content = <img src={imgSrc || ''} alt={this.props.intl.formatMessage(messages.previewGenerateText)} width="100%" height="100%"/>;
-        
+
         temp.content = (
           <div
             className="sms-template-content">
@@ -1136,7 +1155,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {content}
             </div>
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
-            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(event) =>{this.handleEdmDefaultTemplateSelection(true, template._id); event.stopPropagation();}} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
+            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(event) =>{this.handleEdmDefaultTemplateSelection(true, template.versions.base.drag_drop_id); event.stopPropagation();}} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
       } else if (this.state.channel.toLowerCase() === 'mobilepush') {

package/package.json

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

package/services/api.js

@@ -524,13 +524,7 @@ export const checkBulkDuplicates = (data) => {
 export const createWhatsappTemplate = ({payload, gupshupMediaFile }) => {
   const data = new FormData();
   data.append('payload', JSON.stringify(payload));
-  if (Array.isArray(gupshupMediaFile) && gupshupMediaFile?.length) {
-    gupshupMediaFile.forEach((file, index) => {
-      data.append(`gupshupMediaFile_${index}`, file);
-    });
-  } else {
-    data.append('gupshupMediaFile', gupshupMediaFile);
-  }
+  data.append('gupshupMediaFile', gupshupMediaFile);
   const url = `${API_ENDPOINT}/templates/WHATSAPP`;
   return request(url, getAPICallObject('POST', data, true));
 };

package/services/tests/api.test.js

@@ -86,11 +86,7 @@ describe('uploadFile -- whatsapp image upload', () => {
 describe('createWhatsappTemplate -- Test with valid responses', () => {
   it('Should return correct response', () =>
     expect(
-      createWhatsappTemplate({gupshupMediaFile: [sampleFile], payload: mockData.createWhatsappPayload}),
-    ).toEqual(Promise.resolve()));
-  it('Should return correct response when single file is present', () =>
-    expect(
-      createWhatsappTemplate({gupshupMediaFile: sampleFile, payload: mockData.createWhatsappPayload}),
+      createWhatsappTemplate(sampleFile, mockData.createWhatsappPayload),
     ).toEqual(Promise.resolve()));
 });
 

package/v2Components/CapImageUpload/index.js

@@ -44,7 +44,6 @@ function CapImageUpload(props) {
     imageData,
     channel,
     channelSpecificStyle,
-    showReUploadButton = true,
   } = props;
   const {
     formatMessage,
@@ -225,18 +224,16 @@ function CapImageUpload(props) {
         </>
       );
     }
-    if (showReUploadButton) {
-      return (
-        <CapButton
-          className="dragger-button re-upload"
-          type="flat"
-          onClick={onReUpload}
-          style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
-        >
-          <FormattedMessage {...messages.imageReUpload} />
-        </CapButton>
-      );
-    }
+    return (
+      <CapButton
+        className="dragger-button re-upload"
+        type="flat"
+        onClick={onReUpload}
+        style={channelSpecificStyle ? { marginTop: '-16px'} : {}}
+       >
+        <FormattedMessage {...messages.imageReUpload} />
+      </CapButton>
+    );
   }, [isImageError, imageSrc]);
 
   return (

package/v2Components/CapVideoUpload/index.js

@@ -39,7 +39,6 @@ function CapVideoUpload(props) {
     errorMessage,
     showVideoNameAndDuration = true,
     formClassName = 'video-form',
-    showReUploadButton = true,
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -247,17 +246,15 @@ function CapVideoUpload(props) {
     const videoDurationValue = moment('1900-01-01 00:00:00').add(videoDuration, 'seconds').format("HH.mm.ss"); // to get the duration of video
     return (
       <Fragment key={videoSrc}>
-        {showReUploadButton && (
-          <div style={{ overflow: 'hidden' }}>
-            <CapButton
-              className="dragger-button video-reupload"
-              type="flat"
-              onClick={onReUpload}
-            >
-              <FormattedMessage {...messages.imageReUpload} />
-            </CapButton>
-          </div>
-        )}
+        <div style={{ overflow: 'hidden' }}>
+          <CapButton
+            className="dragger-button video-reupload"
+            type="flat"
+            onClick={onReUpload}
+          >
+            <FormattedMessage {...messages.imageReUpload} />
+          </CapButton>
+        </div>
         <div className={showVideoNameAndDuration ? 'video-panel' : 'video-panel-wp'}>
           <video
             width="230"

package/v2Components/CapWhatsappCTA/messages.js

@@ -104,8 +104,4 @@ export default defineMessages({
     id: `${prefix}.whatsappCtaTagListRevert`,
     defaultMessage: 'Reset website URL label to default value',
   },
-  url: {
-    id: `${prefix}.url`,
-    defaultMessage: 'URL',
-  },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -567,10 +567,6 @@
         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{
@@ -751,22 +747,6 @@
       width: 153px;
     }
   }
-
-  .msg-container-carousel {
-    display: flex;
-    flex-direction: column;
-    .scroll-container {
-      overflow-x: auto;
-      display: flex;
-      padding-top: $CAP_SPACE_06;
-      padding-right: $CAP_SPACE_06;
-      white-space: nowrap;
-      scrollbar-width: none; // Hide scrollbar in Firefox
-      &::-webkit-scrollbar {
-        display: none; // Hide scrollbar in Chrome/Safari/Opera
-      }
-    }
-  }
 }
 
 .align-center {

package/v2Components/TemplatePreview/index.js

@@ -20,7 +20,6 @@ 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';
@@ -44,16 +43,14 @@ 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, getWhatsappCarouselButtonView } from '../../v2Containers/Whatsapp/utils';
-import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER } from '../../v2Containers/Whatsapp/constants';
+import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
+import { QUICK_REPLY, WHATSAPP_CATEGORIES } from '../../v2Containers/Whatsapp/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
 
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
@@ -216,7 +213,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;
@@ -256,15 +253,6 @@ 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': '10.4rem',
-      'cursor': 'pointer',
-      'flex-shrink': 0,
-      'left': 0,
-    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -286,53 +274,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',
-                  }}
+          ? (
+            <>
+              <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"
                 >
-                  <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>
     );
@@ -348,10 +336,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>,
@@ -442,42 +430,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">
-                <FormattedMessage
-                  {...messages.optoutCharactersTotal}
-                  values={{ optoutUrlLength: smsDetails.optouturlLength }}
-                />
-              </CapHeading>
-            )}
-            {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
-              <>
-                <WhatsappStatusContainer template={templateData} />
-                <CapHeading type="h3" className="margin-t-12">
+            <CapColumn span={16}>
+              {channel && channel.toLowerCase() === "sms" && (
+                <CapHeading type="h3">
                   <FormattedMessage
-                    {...messages.whatsappMessageLength}
-                    values={{ length: whatsappUpdatedLen }}
+                    {...messages.charactersTotal}
+                    values={{
+                      smsCount: smsDetails.parts,
+                      charCount: smsDetails.chars_used,
+                    }}
                   />
+                  {smsDetails.unicode && (
+                    <FormattedMessage {...messages.smsFormatType} />
+                  )}
                 </CapHeading>
-              </>
-            ) : null}
-          </CapColumn>
-        )}
+              )}
+              {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.whatsappMessageLength}
+                      values={{ length: whatsappUpdatedLen }}
+                    />
+                  </CapHeading>
+                </>
+              ) : null}
+            </CapColumn>
+          )}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           {showTestAndPreview && (
             <div className="test-and-preview-container">
@@ -640,9 +628,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
@@ -652,11 +640,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">
@@ -992,14 +980,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 ${content?.carouselData && 'msg-container-carousel'}`}>
+                  <div className="msg-container whatsapp-message-container">
                     <div
-                      className={`message-pop align-left ${content?.carouselData && 'message-pop-carousel'}`}
+                      className="message-pop align-left"
                       style={whatsappSectionStyle}
                     >
                       <div className="whatsapp-content">
-                        {content?.showUrlPreview
-                          && renderUrlPreview(content?.metaTagsDetails)}
+                        {content?.showUrlPreview &&
+                          renderUrlPreview(content?.metaTagsDetails)}
                         {content?.whatsappImageSrc && (
                           <CapImage
                             src={content.whatsappImageSrc}
@@ -1038,49 +1026,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         {renderQuickReplyPreview()}
                       </div>
                     </div>
-                    {content?.carouselData && (
-                      <div className="scroll-container">
-                        {content?.carouselData?.map((data, index) => (
-                          <div
-                            key={`carousel-${index}-${data?.bodyText}`}
-                            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
@@ -1260,21 +1205,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>