@capillarytech/creatives-library 2.0.80 → 2.0.81

package/containers/CreativesContainer/SlideBoxContent.js

@@ -0,0 +1,248 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import TemplatesV2 from '../TemplatesV2';
+import TemplatePreview from '../../components/TemplatePreview';
+import SmsCreate from '../Sms/Create';
+import SmsEdit from '../Sms/Edit';
+import Email from '../Email';
+import EmailWrapper from '../EmailWrapper';
+import MobilepusWrapper from '../MobilepushWrapper';
+import EmailPreviewV2 from '../../components/EmailPreviewV2';
+import MobilePushPreview from '../../components/MobilePushPreviewV2';
+import CallTask from '../CallTask';
+import MobliPushEdit from '../MobilePush/Edit';
+import * as constants from './constants';
+const CreativesWrapper = styled.div`
+  .ant-popover,
+  .ant-notification,
+  .ant-modal-wrap {
+    z-index: 10003;
+  }
+`;
+function SlideBoxContent(props) {
+  const {
+      slidBoxContent,
+      onSelectTemplate,
+      onPreviewTemplate,
+      templateData,
+      location,
+      isGetFormData,
+      getFormData,
+      messageDetails,
+      onCreateNew,
+      currentChannel,
+      onChannelChange,
+      onEmailModeChange,
+      emailCreateMode,
+      onMobilepushModeChange,
+      mobilePushCreateMode,
+      templateStep,
+      onCreateNextStep,
+      cap,
+      onResetStep,
+      isFullMode,
+      onCallTaskSubmit,
+      setIsLoadingContent,
+    } = props;
+  const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
+  const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library'};
+  const creativesLocationProps = {
+    pathname: `/sms/edit`,
+    query,
+    search: '',
+  };
+  let channel = currentChannel;//for create mode
+  const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
+  const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
+  const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
+  let isEditSms = false;
+  let isEditEmailWithId = false;
+  let isEmailEditWithContent = false;
+  let isPreview = false;
+  let isEmailPreview = false;
+  let isMpushPreview = false;
+  let isEditCallTask = false;
+  let isEditMPush = false;
+  const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
+  if (templateData && channel) {
+    channel = templateData.type;// for edit mode with template data
+    isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
+    isEditCallTask = slidBoxContent === 'editTemplate' && channel === constants.CALL_TASK;
+    isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
+    isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
+    isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
+    isPreview = slidBoxContent === 'preview' && channel === constants.SMS;
+    isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
+    isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
+  }
+
+  return (
+    <CreativesWrapper>
+      {!isFullMode && slidBoxContent === 'templates' && (
+      <TemplatesV2
+        isFullMode={isFullMode}
+        onSelectTemplate={onSelectTemplate}
+        handlePeviewTemplate={onPreviewTemplate}
+        location={location}
+        createNew={onCreateNew}
+        channel={channel.toLowerCase()}
+        onChannelChange={onChannelChange}
+        onCallTaskSubmit={onCallTaskSubmit}
+        cap={cap}
+        />
+        )}
+      {isPreview && (
+      <TemplatePreview
+        content={templateData.versions.base['sms-editor']}
+        channel={templateData.type.toLowerCase()}
+        charCounterEnabled
+        templateData={templateData}
+      />
+        )}
+      {isEmailPreview && (
+        <EmailPreviewV2
+          templateData={templateData}
+         />
+      )
+      }
+      {isMpushPreview &&
+        <MobilePushPreview templateData={templateData} channel={channel}/>
+      }
+      {isEditSms && (
+      <SmsEdit
+        setIsLoadingContent={setIsLoadingContent}
+        location={creativesLocationProps}
+        isFullMode={isFullMode}
+        route={{ name: 'sms' }}
+        params={{id: templateData._id}}
+        isGetFormData={isGetFormData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        subscriptionTemplateDetails={templateData} // used only in library mode
+          />
+        )}
+      {
+        isEditCallTask &&
+          <CallTask
+            mode={'edit'}
+            templateData={templateData}
+            onCallTaskSubmit={onCallTaskSubmit}
+        />
+      }
+      {
+         isCreateCallTask &&
+         <CallTask
+           mode={'create'}
+           onCallTaskSubmit={onCallTaskSubmit}
+        />
+       }
+      {isCreateSms && (
+      <SmsCreate
+        setIsLoadingContent={setIsLoadingContent}
+        location={creativesLocationProps}
+        route={{ name: 'sms' }}
+        isComponent
+        isGetFormData={isGetFormData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        isFullMode={isFullMode}
+          />
+        )}
+      {isEmailCreate && (
+      <EmailWrapper
+        key="creatives-email-wrapper"
+        date={new Date().getMilliseconds()}
+        setIsLoadingContent={setIsLoadingContent}
+        onEmailModeChange={onEmailModeChange}
+        emailCreateMode={emailCreateMode}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        templateData={templateData}
+        type={type}
+        step={templateStep}
+        showNextStep={onCreateNextStep}
+        isFullMode={isFullMode}
+        cap={cap}
+        onResetStep={onResetStep}
+      />
+        )}
+      {(isEditEmailWithId || isEmailEditWithContent) && (
+      <Email
+        setIsLoadingContent={setIsLoadingContent}
+        location={{
+          pathname: `/email`,
+          query,
+        }}
+        route={{ name: 'email' }}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        params={{ id: templateData._id }}
+        templateData={templateData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        isFullMode={isFullMode}
+        cap={cap}
+          />
+        )}
+      {isEditMPush &&
+        <MobliPushEdit
+          getFormLibraryData={getFormData}
+          setIsLoadingContent={setIsLoadingContent}
+          location={{
+            pathname: `/mobilepush/edit/`,
+            query,
+          }}
+          params={{id: templateData._id}}
+          isFullMode={isFullMode}
+          isGetFormData={isGetFormData}
+          route={{ name: 'mobilepush' }}
+          templateData={templateData}
+        />
+        }
+      {isCreateMPush &&
+      <MobilepusWrapper
+        key="creatives-mobilepush-wrapper"
+        date={new Date().getMilliseconds()}
+        setIsLoadingContent={setIsLoadingContent}
+        onMobilepushModeChange={onMobilepushModeChange}
+        mobilePushCreateMode={mobilePushCreateMode}
+        isGetFormData={isGetFormData}
+        getFormData={getFormData}
+        templateData={templateData}
+        type={type}
+        step={templateStep}
+        showNextStep={onCreateNextStep}
+        isFullMode={isFullMode}
+        cap={cap}
+        onResetStep={onResetStep}
+        query={query}/>
+        }
+    </CreativesWrapper>
+  );
+}
+SlideBoxContent.propTypes = {
+  slidBoxContent: PropTypes.node,
+  onSelectTemplate: PropTypes.func,
+  onPreviewTemplate: PropTypes.func,
+  templateData: PropTypes.object,
+  location: PropTypes.object,
+  isGetFormData: PropTypes.bool,
+  getFormData: PropTypes.func,
+  messageDetails: PropTypes.object,
+  onCreateNew: PropTypes.func,
+  onChannelChange: PropTypes.func,
+  currentChannel: PropTypes.string,
+  onEmailModeChange: PropTypes.func,
+  emailCreateMode: PropTypes.string,
+  templateStep: PropTypes.string,
+  onCreateNextStep: PropTypes.func,
+  cap: PropTypes.object,
+  onResetStep: PropTypes.func,
+  onCallTaskSubmit: PropTypes.func,
+  isFullMode: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
+  onMobilepushModeChange: PropTypes.func,
+  mobilePushCreateMode: PropTypes.string,
+};
+export default SlideBoxContent;

package/containers/CreativesContainer/SlideBoxFooter.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { CapButton } from '@capillarytech/cap-ui-library';
+import PropTypes from 'prop-types';
+function SlideBoxFooter(props) {
+  const { slidBoxContent, onSave, messages, onEditTemplate, onCreateNextStep} = props;
+  return (
+    <div>
+      <div>
+        {props.shouldShowDoneFooter() && (
+        <CapButton onClick={onSave}>
+          <FormattedMessage {...messages.creativesTemplatesSave} />
+        </CapButton>
+          )}
+        {props.shouldShowContinueFooter() &&
+          <CapButton onClick={onCreateNextStep}>
+            <FormattedMessage {...messages.continue} />
+          </CapButton>
+          }
+        {slidBoxContent === 'preview' && (
+          <CapButton onClick={onEditTemplate} type="secondary">
+            <FormattedMessage {...messages.creativesTemplatesEdit} />
+          </CapButton>
+          )}
+      </div>
+    </div>
+  );
+}
+SlideBoxFooter.propTypes = {
+  slidBoxContent: PropTypes.node,
+  onSave: PropTypes.func,
+  messages: PropTypes.object,
+  onEditTemplate: PropTypes.func,
+  onCreateNextStep: PropTypes.func,
+  shouldShowContinueFooter: PropTypes.func,
+  shouldShowDoneFooter: PropTypes.func,
+};
+export default SlideBoxFooter;

package/containers/CreativesContainer/SlideBoxHeader.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+import { CapHeader, CapIcons } from '@capillarytech/cap-ui-library';
+import PropTypes from 'prop-types';
+
+const PrefixWrapper = styled.div`
+  margin-right: 16px;
+`;
+function SlideBoxHeader(props) {
+  const { slidBoxContent, messages, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix } = props;
+  return (
+    <div>
+      {slidBoxContent === 'templates' && (
+      <CapHeader
+        title={<FormattedMessage {...messages.creativeTemplates} />}
+        description={
+          <FormattedMessage {...messages.creativeTemplatesDesc} />
+            }
+        inline
+          />
+        )}
+      {slidBoxContent === 'preview' && (
+      <CapHeader
+        title={templateData.name}
+        prefix={
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+      {slidBoxContent === 'editTemplate' && (
+      <CapHeader
+        title={<FormattedMessage {...messages.editMessageContent} />}
+        prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+      {slidBoxContent === 'createTemplate' && (
+      <CapHeader
+        title={<FormattedMessage {...messages.createMessageContent} />}
+        prefix={!isFullMode && showPrefix &&
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+    </div>
+  );
+}
+SlideBoxHeader.propTypes = {
+  slidBoxContent: PropTypes.node,
+  messages: PropTypes.object,
+  templateData: PropTypes.object,
+  onShowTemplates: PropTypes.func,
+  creativesMode: PropTypes.string,
+  isFullMode: PropTypes.bool,
+  showPrefix: PropTypes.bool,
+};
+export default SlideBoxHeader;

package/containers/CreativesContainer/actions.js

@@ -0,0 +1,27 @@
+/*
+ *
+ * CreativesContainer actions
+ *
+ */
+
+import {
+  DEFAULT_ACTION,
+  HIDE_CONTAINER_LOADER,
+  SHOW_CONTANER_LOADER,
+} from './constants';
+
+export function defaultAction() {
+  return {
+    type: DEFAULT_ACTION,
+  };
+}
+export function showCreativesContainerLoader() {
+  return {
+    type: SHOW_CONTANER_LOADER,
+  };
+}
+export function hideCreativesContanerLoader() {
+  return {
+    type: HIDE_CONTAINER_LOADER,
+  };
+}

package/containers/CreativesContainer/constants.js

@@ -0,0 +1,13 @@
+/*
+ *
+ * CreativesContainer constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
+export const EMAIL = "EMAIL";
+export const SMS = "SMS";
+export const CALL_TASK = "CALL_TASK";
+export const MOBILE_PUSH = "MOBILEPUSH";
+export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
+export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";