@capillarytech/creatives-library 7.6.11 → 7.6.13

package/v2Components/TemplatePreview/index.js

@@ -651,6 +651,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     pageId: content.pageId}}
                   accountId={content.accountId}
                   accessToken={content.accessToken}
+                  defaultGeneratePreview
               />
               </div>
         )}

package/v2Containers/App/constants.js

@@ -19,6 +19,8 @@ export const TRACK_CREATE_MPUSH = 'createMpush';
 export const TRACK_CREATE_WECHAT = 'createWeChat';
 export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
+export const TRACK_CREATE_VIBER = 'createViber';
+export const TRACK_CREATE_FACEBOOK = 'createFacebook';
 
 export const CREATE = 'create';
 export const EDIT = 'edit';
@@ -33,6 +35,8 @@ export const TRACK_EDIT_MPUSH = 'editMpush';
 export const TRACK_EDIT_WECHAT = 'editWeChat';
 export const TRACK_EDIT_IMAGE = 'editImage';
 export const TRACK_EDIT_LINE = 'editLine';
+export const TRACK_EDIT_VIBER = 'editViber';
+export const TRACK_EDIT_FACEBOOK = 'editFacebook';
 
 export const CHANNEL_CREATE_TRACK_MAPPING = {
   sms: TRACK_CREATE_SMS,
@@ -41,6 +45,8 @@ export const CHANNEL_CREATE_TRACK_MAPPING = {
   wechat: TRACK_CREATE_WECHAT,
   gallery: TRACK_CREATE_IMAGE,
   line: TRACK_CREATE_LINE,
+  viber: TRACK_CREATE_VIBER,
+  facebook: TRACK_CREATE_FACEBOOK
 };
 
 export const CHANNEL_EDIT_TRACK_MAPPING = {
@@ -50,6 +56,8 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
   wechat: TRACK_EDIT_WECHAT,
   gallery: TRACK_EDIT_IMAGE,
   line: TRACK_EDIT_LINE,
+  viber: TRACK_EDIT_VIBER,
+  facebook: TRACK_EDIT_FACEBOOK
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
 export const BEE_PLUGIN = 'BEE_PLUGIN';
@@ -75,3 +83,6 @@ export const FB_AD_CALL_TO_ACTION = {
   SUBSCRIBE,
   WATCH_MORE,
 };
+
+
+export const CREATIVES = 'creatives';

package/v2Containers/Cap/index.js

@@ -77,13 +77,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       if (!userData.accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
         this.setState({ isCreativesAccessible: false });
       }
-      this.setDimensionData();
+      const userGtmData = this.getUserGtmData();
+      this.setDimensionData(userGtmData);
+      gtm.push({...userGtmData, event: 'userAuthenticated'});
     });
     this.props.actions.getTopbarMenuData();
-    if (this.props.Global.user) {
-      const userGtmData = this.getUserGtmData();
-      gtm.push(userGtmData);
-    }
     if (this.props.Global.orgID !== undefined) {
       gtm.push({orgId: this.props.Global.orgID});
     }
@@ -133,18 +131,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     if (nextPropsUser && user && nextProps.Global.isLoggedIn && nextProps.Global.isLoggedIn !== this.props.Global.isLoggedIn) {
       this.props.appActions.getSidebar();
     }
-
-    if (nextProps.Global.user && this.props.Global.user && (nextProps.Global.user.refID !== this.props.Global.user.refID)) {
-      const userGtmData = this.getUserGtmData(nextProps);
-      gtm.push(userGtmData);
-    }
-
-    if (nextProps.Global.isLoggedIn && nextProps.Global.isLoggedIn !== this.props.Global.isLoggedIn) {
-      if (nextProps.Global.orgID !== undefined && !_.isEqual(nextProps.Global.orgID, this.props.Global.orgID)) {
-        const userGtmData = this.getUserGtmData(nextProps);
-        gtm.push(userGtmData);
-      }
-    }
   }
 
   componentDidUpdate(prevProps) {
@@ -182,26 +168,34 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     logNewTab();
   }
   
-  setDimensionData() {
-    const userGtmData = this.getUserGtmData();
+  setDimensionData(userGtmData) {
     Object.values(userGtmData).forEach((value, index) => {
       GA.setCustomDimension({ [`dimension${index + 1}`]: value });
     });
   }
   getUserGtmData(props) {
     const selectedProps = props || this.props;
-    const { user: userData } = selectedProps.Global;
+    const { user: userData,  orgID} = selectedProps?.Global || {};
     if (userData) {
-      const userName = userData.attributes.USERNAME;
-      const userEmail = userData.attributes.EMAIL;
-      const orgObj = _.find(userData.proxyOrgList, {orgID: selectedProps.Global.orgID});
+      const {
+        attributes: {
+          USERNAME : userName,
+          EMAIL : userEmail
+        } = {},
+        proxyOrgList,
+        isCapUser,
+        refID
+      } = userData;
+      const {
+        orgName
+      } = _.find(proxyOrgList, {orgID});
       const gtmData = {
-        isCapUser: userData.isCapUser,
-        orgId: selectedProps.Global.orgID,
-        orgName: orgObj && orgObj.orgName,
-        userId: userData.refID,
-        userName: userName && userName.value,
-        userEmail: userEmail && userEmail.value,
+        isCapUser: isCapUser,
+        orgId: orgID,
+        orgName,
+        userId: refID,
+        userName: userName?.value,
+        userEmail: userEmail?.value,
       };
       return gtmData;
     }

package/v2Containers/CapFacebookPreview/index.js

@@ -45,6 +45,7 @@ export const CapFacebookPreview = (props) => {
     orgUnitFacebookPageSettingsMap = {},
     accessToken,
     accountId,
+    defaultGeneratePreview,
   } = props;
   const {
     formatMessage,
@@ -294,11 +295,10 @@ export const CapFacebookPreview = (props) => {
       <iframe
         src={src}
         key={random}
-        scrolling="yes"
         style={{border: "none"}}
         width={width}
+        scrolling="yes"
         height={height}
-        loading="lazy"
       />
       </>);
   };
@@ -317,6 +317,9 @@ export const CapFacebookPreview = (props) => {
 
   useEffect(() => {
     facebookPreviewActions.clearPreview();
+    if (defaultGeneratePreview) {
+      generatePreview();
+    }
   }, []);
 
   useEffect(() => {
@@ -335,7 +338,6 @@ export const CapFacebookPreview = (props) => {
       setDisableAfterPreviewGenerate(false);
     }
   }, [previewIframeError]);
-
   return (
     <CapSpin spinning={isFetchingPreview}>
       <div style={{display: 'inline-block'}}>

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -138,8 +138,8 @@ function SlideBoxContent(props) {
       onFTPSubmit,
       campaignSettings,
       messageStrategy,
-      fbAdManger,
-      showDisableInfoForFacebook,
+      fbAdManager,
+      showDisabledFBInfo,
       orgUnitId,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
@@ -339,7 +339,7 @@ function SlideBoxContent(props) {
         FTPMode="create"
         selectedOfferDetails={selectedOfferDetails}
         messageStrategy={messageStrategy}
-        showDisableInfoForFacebook={showDisableInfoForFacebook}
+        showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
         />
       )}
@@ -566,7 +566,7 @@ function SlideBoxContent(props) {
             createNew
             getFormSubscriptionData={getFormData}
             messageStrategy={messageStrategy}
-            fbAdManger={fbAdManger}
+            fbAdManager={fbAdManager}
             onSelectTemplate={onSelectTemplate}
             orgUnitId={orgUnitId}
           />
@@ -585,7 +585,7 @@ function SlideBoxContent(props) {
               id: templateData._id,
             }}
             getFormSubscriptionData={getFormData}
-            fbAdManger={fbAdManger}
+            fbAdManager={fbAdManager}
           />
         )
       }
@@ -699,8 +699,8 @@ SlideBoxContent.propTypes = {
   selectedAccount: PropTypes.object,
   onFTPSubmit: PropTypes.func,
   messageStrategy: PropTypes.string,
-  fbAdManger: PropTypes.string,
-  showDisableInfoForFacebook: PropTypes.boolean,
+  fbAdManager: PropTypes.string,
+  showDisabledFBInfo: PropTypes.boolean,
   orgUnitId: PropTypes.any,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -76,10 +76,10 @@ class Creatives extends React.Component {
     this.setState({templateNameExists: false});
   }
 
-  onSelectTemplate = (template, fbAdManger) => {
+  onSelectTemplate = (template, fbAdManager) => {
     const data = {slidBoxContent: 'editTemplate', templateData: template};
-    if (fbAdManger) {
-      data.fbAdManger = fbAdManger;
+    if (fbAdManager) {
+      data.fbAdManager = fbAdManager;
     }
     this.setState(data);
   };
@@ -93,10 +93,10 @@ class Creatives extends React.Component {
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
   };
-  onCreateNew = (fbAdManger) => {
+  onCreateNew = (fbAdManager) => {
     const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
-    if (fbAdManger) {
-      data.fbAdManger = fbAdManger;
+    if (fbAdManager) {
+      data.fbAdManager = fbAdManager;
     }
     this.setState(data);
   };
@@ -438,7 +438,7 @@ class Creatives extends React.Component {
         break;
       case constants.FACEBOOK: {
         if (template.value) {
-          const FacebookAd = template.value.versions.base.content.FacebookAd;
+          const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
           const type = FacebookAd[0].type;
           const {accountId} = this.props.Templates.selectedFacebookAccount || template.value || {};
           const facebookCreativeList = [];
@@ -726,7 +726,7 @@ class Creatives extends React.Component {
               campaignSettings={this.props.Templates.campaignSettings}
               location={this.props.location}
               messageDetails={this.props.messageDetails}
-              showDisableInfoForFacebook={this.props.showDisableInfoForFacebook}
+              showDisabledFBInfo={this.props.showDisabledFBInfo}
               getFormData={this.getFormData}
               onCallTaskSubmit={this.onCallTaskSubmit}
               onCreateNew={this.onCreateNew}
@@ -742,7 +742,7 @@ class Creatives extends React.Component {
               onEnterTemplateName={this.onEnterTemplateName}
               onRemoveTemplateName={this.onRemoveTemplateName}
               onResetStep={this.resetStep}
-              fbAdManger={this.state.fbAdManger}
+              fbAdManager={this.state.fbAdManager}
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}

package/v2Containers/Email/index.js

@@ -31,8 +31,9 @@ import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
 import { EMAIL } from '../CreativesContainer/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN } from '../App/constants';
+import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN, CREATE, EDIT } from '../App/constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
+import { gtmPush } from '../../utils/gtmTrackers';
 const {CapCustomCardList} = CapCustomCard;
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -656,8 +657,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
   }
   onUpdateTemplateComplete = (createResponse) => {
-    const {isEdit, formData = {} } = this.state || {};
+    const {isEdit, formData = {} } = _.cloneDeep(this.state) || {};
     const base = formData.base || {};
+    const { activeTab } = base;
     const isDragDrop = _.get(base[base.activeTab], 'is_drag_drop');
     let editorType = '';
     if ( isDragDrop === true && this.checkBeeEditorAllowedForLibrary()) {
@@ -665,12 +667,21 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else if (isDragDrop === false && !this.checkBeeEditorAllowedForLibrary()) {
       editorType = 'ckEditor';
     }
-    GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
+    const timeTaken = GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
       category: 'Creatives',
       action: isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL,
       label: `using ${editorType}`,
     });
     if (createResponse && createResponse.templateId) {
+      gtmPush('creativeDetails', {
+        id: createResponse.templateId._id || createResponse.templateId,
+        name: formData['template-name'],
+        channel: EMAIL,
+        timeTaken,
+        content: base?.[activeTab]?.['template-content'],
+        mode: isEdit ? EDIT : CREATE
+      });
+      
       // this.resetSchema();
       let message;
       if (isEdit) {

package/v2Containers/EmailWrapper/index.js

@@ -27,6 +27,8 @@ import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
 import messages from './messages';
 import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants';
+import { gtmPush } from '../../utils/gtmTrackers';
+import { EMAIL } from '../CreativesContainer/constants';
 
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 const { timeTracker } = GA;
@@ -116,13 +118,18 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     };
     CapNotification.error(message);
   }
-  stopTimerGA=() => {
+  stopTimerGA = () => {
     // stop timer
-    timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
+    const timeTaken = timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
       category: 'Creatives',
       action: 'Create',
       label: 'uploadZip',
     });
+    gtmPush('creativeDetails', {
+      channel: EMAIL,
+      timeTaken,
+      mode: 'uploadZip'
+    });    
   }
   handleFileUpload = (file = {}) => {
     const { templatesActions, intl, showNextStep, isUploading } = this.props;
@@ -133,8 +140,8 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
       if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
         templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
+          this.stopTimerGA();
           this.setState({ modeContent: { file } }, showNextStep);
-          stopTimerGA();
         }, this.handleZipUploadError);
       } else if (fileExtension === 'html' || fileExtension === 'htm') {
         const reader = new FileReader();

package/v2Containers/Facebook/Advertisement/index.js

@@ -89,7 +89,6 @@ export const Advertisement = (props) => {
     getFormSubscriptionData,
     facebookTemplateData,
     selectedMarketingObjective,
-    fbAdManger,
     orgUnitId,
   } = props;
   const {
@@ -163,7 +162,7 @@ export const Advertisement = (props) => {
   }, [paramObj.id]);
 
   useEffect(() => {
-    if ((params && params.id) || templateData?.edit) {
+    if (params?.id || templateData?.edit) {
       const { FacebookAd = [], pageOrgUnitId: editPageId} = get(templateData, `versions.base.content`) || get(fbADData, `templateDetails.versions.base.content`) || {};
       const editMessageTitle = (templateData || {}).name || get(fbADData, 'templateDetails.name');
       const editFBContent = Object.values(FacebookAd);
@@ -222,6 +221,7 @@ export const Advertisement = (props) => {
     }
   }, [fbADData[`templateDetails`] || templateData]);
 
+
   const CustomToolTip = useCallback((msg) => <CapTooltipWithInfo
     infoIconProps={{svgProps: {width: 12, height: 12}, style: {marginLeft: 5}}}
     title={msg}
@@ -452,6 +452,7 @@ export const Advertisement = (props) => {
     updateMessageTitle(val);
   }, [messageTitle]);
 
+
   const isDisableDone = useCallback((isPreview) => {
     let flag = false;
     if (primaryText === "" ) {
@@ -501,7 +502,6 @@ export const Advertisement = (props) => {
     selectedAd,
   ]
 );
-
   const isDisableContinue = () => isFullMode ? (messageTitle.trim() === "" || selectedAd === "") : ( selectedAd === "");
 
   const onClickContinue = useCallback(() => { updateStep('createFacebookAd'); }, [step]);
@@ -812,7 +812,7 @@ export const Advertisement = (props) => {
   }, [pageId]);
 
   const selectedFacebookAccount = templateData?.edit ? templateData?.selectedFacebookAccount : facebookTemplateData?.selectedFacebookAccount;
-  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
+  const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount || {};
 
   const getPageAccessOrgs = useCallback(() => {
     const {status, data } = fbADData.orgOuData || {};

package/v2Containers/Facebook/Advertisement/index.scss

@@ -30,7 +30,7 @@ $classPrefix: add-facebook-ad-section;
 
     .cap-header-facebook-ad{
         position: fixed;
-        top: 27px;
+        top: 58px;
         z-index: 1000;
         .title-desc-container{
             padding-left: 10px;

package/v2Containers/Facebook/index.js

@@ -194,9 +194,9 @@ const Facebook = (props) => {
     renderNewCardGrid,
     onSelectTemplate,
     createNew,
-    fbAdManger,
+    fbAdManager,
     getFormSubscriptionData,
-    showDisableInfoForFacebook,
+    showDisabledFBInfo,
     orgUnitId,
   } = props;
   const {
@@ -244,7 +244,7 @@ const Facebook = (props) => {
   const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
 
   const radioOptions = [{
-    label: showDisableInfoForFacebook ? <CapTooltip title={intl.formatMessage(messages.facebookDisableinfo)}>{intl.formatMessage(messages.capFbAdManager)}</CapTooltip> : intl.formatMessage(messages.capFbAdManager), value: CREATIVE, disabled: showDisableInfoForFacebook,
+    label: showDisabledFBInfo ? <CapTooltip title={intl.formatMessage(messages.facebookDisableinfo)}>{intl.formatMessage(messages.capFbAdManager)}</CapTooltip> : intl.formatMessage(messages.capFbAdManager), value: CREATIVE, disabled: showDisabledFBInfo,
   }, {
     label: intl.formatMessage(messages.fbAdManager), value: AD_MANAGER,
   }];
@@ -280,10 +280,10 @@ const Facebook = (props) => {
       onSelectTemplate={onSelectTemplate}
       renderNewCardGrid={renderNewCardGrid}
       handlePeviewTemplate={handlePeviewTemplate}
-      fbAdManger={CREATIVE}
+      fbAdManager={CREATIVE}
     />
   ) :
-    (!isFullMode && fbAdManger !== CREATIVE && messageStrategy === "DEFAULT" ) ?
+    (!isFullMode && fbAdManager !== CREATIVE && messageStrategy === "DEFAULT" ) ?
       (<div className={className}>
 
         <div className="is-scrollable-section" >
@@ -421,7 +421,7 @@ const Facebook = (props) => {
           messageStrategy={messageStrategy}
           getFormSubscriptionData={getFormSubscriptionData}
           selectedMarketingObjective={selectedMarketingObjective}
-          fbAdManger={fbAdManger}
+          fbAdManager={fbAdManager}
           orgUnitId={orgUnitId}
         />
       </div>

package/v2Containers/Line/Container/index.js

@@ -18,11 +18,11 @@ import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 // GA
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_LINE, TRACK_EDIT_LINE } from '../../App/constants';
+import { CREATE, EDIT, TRACK_CREATE_LINE, TRACK_EDIT_LINE } from '../../App/constants';
 
 import LineWrapper from './Wrapper';
 import messages from './messages';
-import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE, DEFAULT_VIDEO_URI  } from './constants';
+import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE, DEFAULT_VIDEO_URI, VIDEO, TEMPLATE  } from './constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
@@ -32,6 +32,8 @@ import {makeSelectCreateLine, makeSelectLine } from './selectors';
 import * as compActions from './actions';
 import * as templateActionsConfig from '../../Templates/actions';
 import withCreatives from '../../../hoc/withCreatives';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import { LINE } from '../../CreativesContainer/constants';
 
 const { stopTimer } = GA.timeTracker;
 
@@ -348,6 +350,19 @@ export const LineContainer = ({
         }
     }
 
+    const formatFSPayload = (lineWrapperContents) => {
+        const [ {
+            messageTitle,
+            messageContent: content,
+            type,
+        } = {}] = lineWrapperContents;
+        return {
+            name: messageTitle,
+            content,
+            imageAdded: [IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, TEMPLATE].includes(type),
+            videoAdded: type === VIDEO
+        }
+    }
     const formatSubmitPayload = (lineWrapperContents) => {
         const [ {
             messageTitle,
@@ -561,11 +576,17 @@ export const LineContainer = ({
               createCallback(errorMessage);
               if (!errorMessage) {
                 // stop timer for create line
-                stopTimer(TRACK_CREATE_LINE, {
+                const timeTaken = stopTimer(TRACK_CREATE_LINE, {
                     category: 'Creatives',
                     action: TRACK_CREATE_LINE,
                     label: getLineType(lineWrapperContents),
                 });
+                gtmPush('creativeDetails', Object.assign({
+                    id: resp.templateId,
+                    channel: LINE,
+                    mode: CREATE,
+                    timeTaken,
+                }, formatFSPayload(lineWrapperContents)));
                 onCreateComplete();
               }
             }
@@ -604,11 +625,18 @@ export const LineContainer = ({
                 editCallback(errorMessage);
                 if (!errorMessage) {
                     // stop timer for edit line
-                    stopTimer(TRACK_EDIT_LINE, {
+                    const timeTaken = stopTimer(TRACK_EDIT_LINE, {
                         category: 'Creatives',
                         action: TRACK_EDIT_LINE,
                         label: getLineType(lineWrapperContents),
                     });
+                    gtmPush('creativeDetails', Object.assign({
+                        id: resp.templateId._id,
+                        channel: LINE,
+                        mode: EDIT,
+                        timeTaken,
+                    }, formatFSPayload(lineWrapperContents)));
+                   
                     onCreateComplete();
                 }
           });

package/v2Containers/Line/Create/_lineCreate.scss

@@ -0,0 +1,64 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.line-row{
+  margin-bottom: 16px;
+}
+.slidebox-content-container {
+  overflow-x: hidden;
+}
+.line-image {
+  position: relative;
+}
+.image-container {
+  display: flex;
+  & > div {
+    min-width: 516px;
+  }
+  border-radius: 5px;
+  .image-placeholder{
+    line-height: 150px;
+  }
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto !important;
+    width: auto !important;
+  }
+}
+
+.pagination-container.gallery-upload {
+  height: calc(100vh - 60px);
+
+  .cap-custom-card-list-col {
+    max-width: 156px;
+    max-height: 156px;
+    display: inline-block;
+    margin-left: $CAP_SPACE_04;
+    margin-right: $CAP_SPACE_04;
+  }
+
+  .ant-card-body {
+    padding-top: 0;
+
+    .ant-card-meta-description img {
+      height: 80px;
+      width: auto;
+    }
+  }
+}
+
+.gallery-image {
+  height: 156px;
+  width: 156px;
+  border-radius: 4px;
+  margin: 3px;
+}
+
+.sms-text {
+  img {
+    display: block;
+    max-width: 100%;
+    object-fit: cover;
+  }
+}