@capillarytech/creatives-library 7.17.97-alpha.0 → 7.17.97

package/package.json

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

package/v2Components/CapDeviceContent/index.js

@@ -65,6 +65,7 @@ const CapDeviceContent = (props) => {
     tags,
     onTagSelect,
     handleOnTagsContextChange,
+    templateDescErrorHandler,
   } = props || {};
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
@@ -73,7 +74,7 @@ const CapDeviceContent = (props) => {
   const isMediaTypeImage = INAPP_MEDIA_TYPES.IMAGE === templateMediaType;
   const isBtnTypeCta = buttonType === INAPP_BUTTON_TYPES.CTA;
   const onTemplateMessageChange = ({ target: { value } }) => {
-    let error = '';
+    let error = templateDescErrorHandler(value);
     if (value === '') {
       error = formatMessage(messages.emptyTemplateMessageErrorMessage);
     }

package/v2Components/FormBuilder/index.js

@@ -929,7 +929,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         // Check if template subject present in form data from Loyalty, DVS, Timeline
         if (index === 'template-subject' && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
-          if ((data && data.trim() === '') || !data) {
+          if (data && data.trim() === '') {
             errorData[index] = true;
             isValid = false;
           } else {

package/v2Components/MobilePushPreviewV2/index.js

@@ -47,15 +47,14 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
         templateTitle: androidContent?.title,
         templateMsg: androidContent?.message,
         mediaPreview: { inAppImageSrcAndroid: androidContent?.expandableDetails?.image },
-        ctaData: androidContent?.expandableDetails?.buttons?.map((cta) => {
-          const { index, type, text, url = "", label } = cta;
+        ctaData: androidContent?.expandableDetails?.ctas?.map((cta, index) => {
+          const { type = '', actionText = '', actionLink = "" } = cta;
           const ctaObject = {
             index,
-            text,
-            url,
+            text: actionText,
+            url: actionLink,
             urlType: type,
             isSaved: true,
-            label,
           };
           return ctaObject;
         }),
@@ -64,15 +63,14 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
         templateTitle: iosContent?.title,
         templateMsg: iosContent?.message,
         mediaPreview: { inAppImageSrcIos: iosContent?.expandableDetails?.image },
-        ctaData: iosContent?.expandableDetails?.buttons?.map((cta) => {
-          const { index, type, text, url = "", label } = cta;
+        ctaData: iosContent?.expandableDetails?.ctas?.map((cta, index) => {
+          const { type = '', actionText = '', actionLink = "" } = cta;
           const ctaObject = {
             index,
-            text,
-            url,
+            text: actionText,
+            url: actionLink,
             urlType: type,
             isSaved: true,
-            label,
           };
           return ctaObject;
         }),

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -38,7 +38,7 @@
               }
       
               .inapp-content-POPUP-ANDROID {
-                margin-top: $CAP_SPACE_12;
+                margin-top: $CAP_SPACE_08;
                 margin-right: $CAP_SPACE_08;
                 margin-left: $CAP_SPACE_08;
                 width: 178px;
@@ -81,7 +81,7 @@
                 left: 26%;
                 bottom: -21px;
                 text-align: center;
-                top: 22%;
+                top: 22px;
               }
       
               .inapp-image-HEADER-ANDROID {
@@ -221,7 +221,7 @@
       
               .inapp-content-FULLSCREEN-ANDROID {
                 width: 186px;
-                height: 144px;
+                max-height: 144px;
                 text-align: left;
                 margin-top: $CAP_SPACE_04;
                 text-overflow: ellipsis;
@@ -440,7 +440,7 @@
       
               .inapp-content-FULLSCREEN-iOS {
                 width: 186px;
-                height: 144px;
+                max-height: 144px;
                 text-align: left;
                 margin-top: $CAP_SPACE_04;
                 text-overflow: ellipsis;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -808,6 +808,9 @@ export function SlideBoxContent(props) {
           query,
           search: '',
         }}
+        getFormData={getFormData}
+        isGetFormData={isGetFormData}
+        templateData={templateData}
       />
       )}
 

package/v2Containers/CreativesContainer/index.js

@@ -291,12 +291,14 @@ export class Creatives extends React.Component {
             type: channel,
             name: templateData.messageSubject,
             versions: {
-              content: {
-                ANDROID: templateData.androidContent,
-                IOS: templateData.iosContent,
+              base: {
+                content: {
+                  ANDROID: templateData?.androidContent,
+                  IOS: templateData?.iosContent,
+                },
               },
             },
-            definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+            definition: {accountId: templateData?.accountId, mode: mode?.toLowerCase()},
           };
           break;
         }

package/v2Containers/Email/index.js

@@ -2069,13 +2069,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       formData[0].selectedLanguages = [];
       let tabKey;
       if ((this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
-        const templateSubject = formData?.['template-subject'];
-        const baseSubject = data?.base?.subject;
-        if (templateSubject === '') {
-          formData['template-subject'] = '';
-        } else if (!templateSubject && baseSubject) {
-          formData['template-subject'] = baseSubject;
-        }
+        formData['template-subject'] = data.base.subject ? data.base.subject : '';
         const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
         let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
 

package/v2Containers/InApp/constants.js

@@ -1,5 +1,15 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
+import {
+  CAP_ORANGE,
+  CAP_PURPLE02,
+  CAP_PURPLE03,
+  CAP_ORANGE01,
+  CAP_GREEN01,
+  CAP_GREEN02,
+  CAP_PALE_GREY,
+  FONT_COLOR_05,
+} from '@capillarytech/cap-ui-library/styled/variables';
 import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
 import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
 import { WEBSITE } from "../../v2Components/CapInAppCTA/constants";
@@ -123,3 +133,10 @@ export const BUTTON_RADIO_OPTIONS = [
     ),
   },
 ];
+
+export const INAPP_LAYOUT_DETAILS = {
+  POPUP: { tagColor: CAP_ORANGE01, tagTextColor: CAP_ORANGE, text: 'Pop-up'},
+  HEADER: { tagColor: CAP_PURPLE03, tagTextColor: CAP_PURPLE02, text: 'Header'},
+  FOOTER: { tagColor: CAP_PALE_GREY, tagTextColor: FONT_COLOR_05, text: 'Footer'},
+  FULLSCREEN: { tagColor: CAP_GREEN02, tagTextColor: CAP_GREEN01, text: 'Full screen'},
+};

package/v2Containers/InApp/index.js

@@ -116,9 +116,11 @@ export const InApp = (props) => {
         configs = {},
         name = "",
       } = accountObj;
+      const isAndroidSupported = configs.android === '1';
       //get deep link keys in an array
       const deepLinkKeys = Object.values(JSON.parse(deepLinkObj));
       const keys = deepLinkKeys.map((link) => ({label: link.name, value: link.link, title: link.link }));
+      setPanes(isAndroidSupported ? ANDROID : IOS);
       setDeepLink(keys);
       setAccountId(sourceAccountIdentifier);
       setAccessToken(configs.accessToken || "");
@@ -147,7 +149,7 @@ export const InApp = (props) => {
       name = "",
       versions = {},
       createdAt = "",
-    } = isFullMode ? editData.templateDetails || {} : templateData || {};
+    } = isFullMode ? editData?.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content`, {});
     if (editContent && !isEmpty(editContent)) {
       setEditFlow(true);
@@ -155,68 +157,72 @@ export const InApp = (props) => {
       setTemplateDate(createdAt);
       setTemplateLayoutType(editContent?.ANDROID?.bodyType);
       const androidContent = editContent?.ANDROID;
-      const {
-        title: androidTitle,
-        message: androidMessage,
-        cta: androidCta,
-        expandableDetails: androidExpandableDetails,
-      } = androidContent;
-      setTitleAndroid(androidTitle);
-      setTemplateMessageAndroid(androidMessage);
-      setTemplateMediaType(
-        androidExpandableDetails?.style === BIG_TEXT
-          ? INAPP_MEDIA_TYPES.TEXT
-          : INAPP_MEDIA_TYPES.IMAGE
-      );
-      setInAppImageSrcAndroid(androidExpandableDetails?.image);
-      setDeepLinkValueAndroid(androidCta?.actionLink);
-      setAddActionLinkAndroid(!isEmpty(androidCta) && true);
-      setButtonTypeAndroid(
-        androidExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
-      );
-      if (androidExpandableDetails?.ctas?.length > 0) {
-        setCtaDataAndroid(
-          androidExpandableDetails?.ctas?.map((cta, index) => {
-            const { type, actionText, actionLink = "" } = cta;
-            const obj = {
-              index,
-              text: actionText,
-              url: actionLink,
-              urlType: type,
-              isSaved: true,
-            };
-            return obj;
-          })
+      if (!isEmpty(androidContent)) {
+        const {
+          title: androidTitle = '',
+          message: androidMessage = '',
+          cta: androidCta = {},
+          expandableDetails: androidExpandableDetails = {},
+        } = androidContent || {};
+        setTitleAndroid(androidTitle);
+        setTemplateMessageAndroid(androidMessage);
+        setTemplateMediaType(
+          androidExpandableDetails?.style === BIG_TEXT
+            ? INAPP_MEDIA_TYPES.TEXT
+            : INAPP_MEDIA_TYPES.IMAGE
         );
+        setInAppImageSrcAndroid(androidExpandableDetails?.image);
+        setDeepLinkValueAndroid(androidCta?.actionLink);
+        setAddActionLinkAndroid(!isEmpty(androidCta) && true);
+        setButtonTypeAndroid(
+          androidExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE
+        );
+        if (androidExpandableDetails?.ctas?.length > 0) {
+          setCtaDataAndroid(
+            androidExpandableDetails?.ctas?.map((cta, index) => {
+              const { type = '', actionText = '', actionLink = "" } = cta;
+              const obj = {
+                index,
+                text: actionText,
+                url: actionLink,
+                urlType: type,
+                isSaved: true,
+              };
+              return obj;
+            })
+          );
+        }
       }
       const iosContent = editContent?.IOS;
-      const {
-        title: iosTitle,
-        message: iosMessage,
-        cta: iosCta,
-        expandableDetails: iosExpandableDetails,
-      } = iosContent;
-      setTitleIos(iosTitle);
-      setTemplateMessageIos(iosMessage);
-      setTemplateMediaType(iosExpandableDetails?.style === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
-      setInAppImageSrcIos(iosExpandableDetails?.image);
-      setButtonTypeIos(iosExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
-      setAddActionLinkIos(!isEmpty(iosCta) && true);
-      setDeepLinkValueIos(iosCta?.actionLink);
-      if (iosExpandableDetails?.ctas?.length > 0) {
-        setCtaDataIos(
-          iosExpandableDetails?.ctas?.map((cta, index) => {
-            const { type, actionText, actionLink = "" } = cta;
-            const obj = {
-              index,
-              text: actionText,
-              url: actionLink,
-              urlType: type,
-              isSaved: true,
-            };
-            return obj;
-          })
-        );
+      if (!isEmpty(iosContent)) {
+        const {
+          title: iosTitle = '',
+          message: iosMessage = '',
+          cta: iosCta = {},
+          expandableDetails: iosExpandableDetails = {},
+        } = iosContent || {};
+        setTitleIos(iosTitle);
+        setTemplateMessageIos(iosMessage);
+        setTemplateMediaType(iosExpandableDetails?.style === BIG_TEXT ? INAPP_MEDIA_TYPES.TEXT : INAPP_MEDIA_TYPES.IMAGE);
+        setInAppImageSrcIos(iosExpandableDetails?.image);
+        setButtonTypeIos(iosExpandableDetails?.ctas?.length ? INAPP_BUTTON_TYPES.CTA : INAPP_BUTTON_TYPES.NONE);
+        setAddActionLinkIos(!isEmpty(iosCta) && true);
+        setDeepLinkValueIos(iosCta?.actionLink);
+        if (iosExpandableDetails?.ctas?.length > 0) {
+          setCtaDataIos(
+            iosExpandableDetails?.ctas?.map((cta, index) => {
+              const { type = '', actionText = '', actionLink = "" } = cta;
+              const obj = {
+                index,
+                text: actionText,
+                url: actionLink,
+                urlType: type,
+                isSaved: true,
+              };
+              return obj;
+            })
+          );
+        }
       }
     }
   }, [editData.templateDetails || templateData]);
@@ -373,6 +379,7 @@ export const InApp = (props) => {
       ),
       tab: <FormattedMessage {...messages.Android} />,
       key: ANDROID,
+      isSupported: accountData?.selectedWeChatAccount?.configs?.android === '1',
     },
     {
       content: (
@@ -415,6 +422,7 @@ export const InApp = (props) => {
       ),
       tab: <FormattedMessage {...messages.Ios} />,
       key: IOS,
+      isSupported: accountData?.selectedWeChatAccount?.configs?.android === '1',
     },
   ];
 
@@ -499,24 +507,24 @@ export const InApp = (props) => {
     );
   };
 
-  const isDisableDone = () => {
+  const isDisableDone = (device) => {
     //if template name is not entered
-    if (templateName.trim() === '') {
+    if (isFullMode && templateName.trim() === '') {
       return true;
     }
     //if template message is not entered
     //for android
-    if (panes === ANDROID && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
+    if (device === ANDROID && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
       return true;
     }
-    if (panes === IOS && (templateMessageIos.trim() === '' || templateMessageErrorIos)) {
+    if (device === IOS && (templateMessageIos.trim() === '' || templateMessageErrorIos)) {
       return true;
     }//for ios
     //if media type is image and the mediaType file is not uploaded
-    if (panes === ANDROID && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
+    if (device === ANDROID && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcAndroid === '') {
       return true;
     }
-    if (panes === IOS && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
+    if (device === IOS && !(templateMediaType === INAPP_MEDIA_TYPES.TEXT) && inAppImageSrcIos === '') {
       return true;
     }
     //cta
@@ -581,7 +589,7 @@ export const InApp = (props) => {
       versions: {
         base: {
           content: {
-            ANDROID: {
+            ANDROID: !isDisableDone(ANDROID) ? {
               ...commonDevicePayload,
               title: titleAndroid,
               message: templateMessageAndroid,
@@ -595,9 +603,11 @@ export const InApp = (props) => {
                 }),
               },
               custom: [],
-              cta: deepLinkValueAndroid ? {type: DEEP_LINK, actionLink: deepLinkValueAndroid} : {},
-            },
-            IOS: {
+              ...(deepLinkValueAndroid && {
+                ctas: [{type: DEEP_LINK, actionLink: deepLinkValueAndroid}],
+              }),
+            } : {},
+            IOS: !isDisableDone(IOS) ? {
               ...commonDevicePayload,
               title: titleIos,
               message: templateMessageIos,
@@ -611,8 +621,10 @@ export const InApp = (props) => {
                 }),
               },
               custom: [],
-              cta: deepLinkValueIos ? {type: DEEP_LINK, actionLink: deepLinkValueIos} : {},
-            },
+              ...(deepLinkValueIos && {
+                ctas: [{type: DEEP_LINK, actionLink: deepLinkValueIos}],
+              }),
+            } : {},
           },
         },
       },
@@ -696,7 +708,7 @@ export const InApp = (props) => {
           {isFullMode && createModeContent}
           {/* device tab */}
           <CapTab
-            panes={PANES}
+            panes={PANES.filter((devicePane) => devicePane?.isSupported === true)}
             onChange={(value) => {
               setPanes(value);
             }}
@@ -710,12 +722,12 @@ export const InApp = (props) => {
           {getPreviewSection()}
         </CapColumn>
       </CapRow>
-      <div className="inapp-footer">
+      <div className={`inapp-footer ${!isFullMode && `inapp-footer-lib`}`}>
         {
           <>
             <CapButton
               onClick={onDoneCallback()}
-              disabled={isDisableDone()}
+              disabled={isDisableDone(panes)}
               className="inapp-create-btn"
             >
               {isEditFlow ? (
@@ -725,7 +737,11 @@ export const InApp = (props) => {
                   <FormattedMessage {...globalMessages.done} />
                 )
               ) : (
-                <FormattedMessage {...messages.create} />
+                isFullMode ? (
+                  <FormattedMessage {...messages.create} />
+                ) : (
+                  <FormattedMessage {...globalMessages.done} />
+                )
               )}
             </CapButton>
           </>

package/v2Containers/InApp/index.scss

@@ -37,7 +37,6 @@
 .inapp-footer {
   background-color: $CAP_WHITE;
   bottom: 0;
-  // position: fixed;
   width: 100%;
   padding: $CAP_SPACE_20 0;
   z-index: 1;
@@ -45,4 +44,7 @@
   .ant-btn {
     margin-right: $CAP_SPACE_16;
   }
+}
+.inapp-footer-lib {
+  position: fixed;
 }

package/v2Containers/Templates/_templates.scss

@@ -11,7 +11,6 @@
   .creatives-templates-list.full-mode{
     .pagination-container {
       .cap-custom-card-list-row {
-        padding-bottom: 10rem;
         .cap-custom-card-list-col{
           &:nth-child(3n+3) { //every 4th child
             margin-right: unset;
@@ -26,7 +25,6 @@
   .creatives-templates-list.full-mode{
     .pagination-container {
       .cap-custom-card-list-row {
-        padding-bottom: 10rem;
         .cap-custom-card-list-col{
           &:nth-child(4n+4) { //every 4th child
             margin-right: unset;
@@ -58,9 +56,6 @@
   }
 
   .pagination-container {
-    .cap-custom-card-list-row {
-      padding-bottom: 10rem;
-    }
     .FACEBOOK {
       .ant-card-body {
         background-color: $CAP_G09;
@@ -529,10 +524,6 @@
   border-bottom: solid 0.5px #D6D6D6;
 }
 
-.main-content{
-  overflow: hidden;
-}
-
 .wechat-filters,
 .line-filters {
   width: 100%;

package/v2Containers/Templates/index.js

@@ -49,6 +49,7 @@ import {
   CapInfoNote,
   CapImage,
   CapStatus,
+  CapColoredTag,
 } from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
@@ -108,6 +109,7 @@ import {
   HOST_TWILIO,
   HOST_GUPSHUP,
 } from '../Whatsapp/constants';
+import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
@@ -823,7 +825,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
           queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
         }
-        if (([MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE.includes](this.state.channel.toLowerCase())) && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
+        if (([MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
           if (this.state.mode) {
             queryParams.mode = this.state.mode.toLowerCase();
@@ -1004,22 +1006,40 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       );
 
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
-      const templateData =
-        {
-          key: `${currentChannel}-card-${template?.name}`,
-          title: <span title={template?.name} >{template?.name}</span>,
-          extra: [
-            <CapTooltip title={this.state.channel.toLowerCase() === ZALO_LOWERCASE ? <div className='zalo-view-tooltip'>{this.props.intl.formatMessage(messages.zaloPreview)}</div> : ''}>
-              <CapIcon
-                className={`view-${channelLowerCase}`}
-                style={{ marginRight: '16px' }}
-                type="eye"
-                onClick={() => { if (!this.props.isFullMode || this.props.isDltFromRcs) { this.props.handlePeviewTemplate(template); } else { handlers.handlePreviewClick(template); } }}
-              />
-            </CapTooltip>,
-          ],
-          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{hoverButtonText}</CapButton>,
-        };
+      const inappBodyType = template?.versions?.base?.content?.ANDROID?.bodyType;
+      const templateData = {
+        key: `${currentChannel}-card-${template?.name}`,
+        title: (
+          <span title={template?.name}>
+            {template?.name}
+            {currentChannel === INAPP && (
+              <CapRow>
+                <CapColoredTag
+                  tagColor={INAPP_LAYOUT_DETAILS[inappBodyType].tagColor}
+                  tagTextColor={
+                    INAPP_LAYOUT_DETAILS[inappBodyType].tagTextColor
+                  }
+                  tagHeight="20px"
+                  tagFontSize="12px"
+                >
+                  {INAPP_LAYOUT_DETAILS[inappBodyType].text}
+                </CapColoredTag>
+              </CapRow>
+            )}
+          </span>
+        ),
+        extra: [
+          <CapTooltip title={this.state.channel.toLowerCase() === ZALO_LOWERCASE ? <div className='zalo-view-tooltip'>{this.props.intl.formatMessage(messages.zaloPreview)}</div> : ''}>
+            <CapIcon
+              className={`view-${channelLowerCase}`}
+              style={{ marginRight: '16px' }}
+              type="eye"
+              onClick={() => { if (!this.props.isFullMode || this.props.isDltFromRcs) { this.props.handlePeviewTemplate(template); } else { handlers.handlePreviewClick(template); } }}
+            />
+          </CapTooltip>,
+        ],
+        hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{hoverButtonText}</CapButton>,
+      };
       const {
         versions: {
           base: {