@capillarytech/creatives-library 3.8.6 → 3.8.8

package/v2Containers/Line/Create/initialSchema.js

@@ -0,0 +1,378 @@
+export const response = {
+  metaEntities: [
+    {
+      _id: "5b926d5aa77c585b698a5620",
+      type: "LAYOUT",
+      definition: {
+        module: "Campaigns",
+        channel: "LINE",
+        textSchema: {
+          standalone: {
+            sections: [
+              {
+                type: "parent",
+                childSections: [
+                  {
+                    type: "multicols",
+                    width: 16,
+                    inputFields: [
+                      {
+                        cols: [],
+                      },
+                    ],
+                    actionFields: [],
+                  },
+                  {
+                    type: "parent",
+                    childSections: [
+                      {
+                        width: 16,
+                        type: "parent",
+                        childSections: [
+                          {
+                            type: "multicols",
+                            inputFields: [
+                              {
+                                cols: [
+                                  {
+                                    id: "template-name",
+                                    placeholder: "",
+                                    type: "input",
+                                    label: "Message",
+                                    metaType: "text",
+                                    datatype: "string",
+                                    required: true,
+                                    fluid: true,
+                                    styling: "semantic",
+                                    order: 1,
+                                    width: 18,
+                                    customComponent: false,
+                                    standalone: true,
+                                    onlyDisplay: false,
+                                    errorMessage:
+                                      "",
+                                    supportedEvents: ["onChange"],
+                                  },
+                                ],
+                              },
+                            ],
+                          },
+                          {
+                            type: "multicols",
+                            inputFields: [
+                              {
+                                rowClassName: "tag-container",
+                                cols: [
+                                  {
+                                    style: {
+                                      marginBottom: "unset",
+                                      height: "24px",
+                                    },
+                                    width: 18,
+                                    id: "tagList",
+                                    label: "Add label",
+                                    className: "add-label",
+                                    type: "tag-list",
+                                    metaType: "List",
+                                    datatype: "select",
+                                    required: true,
+                                    fluid: true,
+                                    onlyDisplay: true,
+                                    styling: "semantic",
+                                    order: 1,
+                                    customComponent: true,
+                                    supportedEvents: ["onTagSelect"],
+                                  },
+                                ],
+                              },
+                            ],
+                          },
+                          {
+                            type: "multicols",
+
+                            inputFields: [
+                              {
+                                rowClassName: "line-message-content",
+                                cols: [
+                                  {
+                                    id: "message-editor",
+                                    label: "Message",
+                                    type: "textarea",
+                                    metaType: "text",
+                                    datatype: "string",
+                                    style: { marginBottom: "16px" },
+                                    required: true,
+                                    errorMessage:
+                                      "",
+                                    placeholder:
+                                      "",
+                                    fluid: true,
+                                    styling: "semantic",
+                                    onlyDisplay: false,
+                                    width: 18,
+                                    autosize: true,
+                                    autosizeParams: {
+                                      maxRows: 18,
+                                      minRows: 3,
+                                    },
+                                    order: 2,
+                                    customComponent: true,
+                                    supportedEvents: ["onChange"],
+                                  },
+                                ],
+                              },
+                              {
+                                rowClassName: "sms-count-container",
+                                rowStyle: {
+                                  bottom: "8px",
+                                  fontSize: "12px",
+                                },
+                                cols: [
+                                  {
+                                    id: "sms-count",
+                                    type: "div",
+                                    props: { type: "label3" },
+                                    onlyDisplay: true,
+                                    metaType: "label",
+                                    value: "",
+                                    primitive: true,
+                                    width: 18,
+                                    style: {
+                                      float: "right",
+                                    },
+                                  },
+                                ],
+                              },
+                            ],
+                            actionFields: [],
+                          },
+                        ],
+                      },
+                      {
+                        width: 6,
+                        type: "multicols",
+                        offset: 1,
+
+                        inputFields: [
+                          {
+                            cols: [
+                              {
+                                id: "line-preview",
+                                type: "line-preview",
+                                customComponent: true,
+                                customStyling: {
+                                  padding: "0",
+                                },
+                                metaType: "preview",
+                                required: true,
+                                fluid: true,
+                                styling: "semantic",
+                                order: 1,
+                                onlyDisplay: true,
+                                offset: 7,
+                                channel: "LINE",
+                                charCounterEnabled: true,
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    type: "multicols",
+                    inputFields: [
+                      {
+                        rowClassName: "creatives-sms-footer",
+                        cols: [
+                          {
+                            id: "save-button",
+                            metaType: "submit-button",
+                            colStyle: { marginRight: "16px" },
+                            type: "button",
+                            buttonType: "primary",
+                            value: "Save",
+                            customComponent: false,
+                            styling: "semantic",
+                            order: 3,
+                            fluid: true,
+                            standalone: true,
+                            onlyDisplay: true,
+                            submitAction: "saveFormData",
+                            supportedEvents: ["saveFormData"],
+                          },
+                        ],
+                      },
+                    ],
+                    actionFields: [],
+                  },
+                ],
+              },
+            ],
+          },
+          module: "Campaigns",
+          channel: "LINE",
+        },
+        imageSchema: {
+          standalone: {
+            sections: [
+              {
+                type: "parent",
+                childSections: [
+                  {
+                    type: "multicols",
+                    width: 16,
+                    inputFields: [
+                      {
+                        cols: [],
+                      },
+                    ],
+                    actionFields: [],
+                  },
+                  {
+                    type: "parent",
+
+                    childSections: [
+                      {
+                        width: 16,
+                        type: "parent",
+                        childSections: [
+                          {
+                            type: "multicols",
+                            inputFields: [
+                              {
+                                cols: [
+                                  {
+                                    id: "template-name",
+                                    placeholder: "",
+                                    type: "input",
+                                    label: "Message",
+                                    metaType: "text",
+                                    datatype: "string",
+                                    required: true,
+                                    fluid: true,
+                                    styling: "semantic",
+                                    order: 1,
+                                    width: 18,
+                                    customComponent: false,
+                                    standalone: true,
+                                    onlyDisplay: false,
+                                    errorMessage:
+                                      "",
+                                    supportedEvents: ["onChange"],
+                                  },
+                                ],
+                              },
+                            ],
+                          },
+                          {
+                            type: "multicols",
+
+                            inputFields: [
+                              {
+                                rowClassName:
+                                  "mobile-push-row mobile-push-img line-image",
+                                cols: [
+                                  {
+                                    id: "image-upload-line",
+                                    type: "upload",
+                                    showPreview: true,
+                                    previewProps: {
+                                      label: "",
+                                      inductiveText:
+                                        "",
+                                      errorMessage: "",
+                                    },
+                                    width: 22,
+                                    metaType: "text",
+                                    datatype: "string",
+                                    required: true,
+                                    fluid: true,
+                                    styling: "semantic",
+                                    order: 1,
+                                    style: {
+                                      marginTop: 36,
+                                    },
+                                    customComponent: true,
+                                    offset: 0,
+                                    submitAction: "onUpload",
+                                    supportedEvents: ["onUpload"],
+                                  },
+                                ],
+                              },
+                            ],
+                            actionFields: [],
+                          },
+                        ],
+                      },
+                      {
+                        width: 6,
+                        type: "multicols",
+                        offset: 1,
+
+                        inputFields: [
+                          {
+                            cols: [
+                              {
+                                id: "line-preview",
+                                type: "line-preview",
+                                customComponent: true,
+                                customStyling: {
+                                  padding: "0",
+                                },
+                                metaType: "preview",
+                                required: true,
+                                fluid: true,
+                                styling: "semantic",
+                                order: 1,
+                                onlyDisplay: true,
+                                offset: 7,
+                                channel: "LINE",
+                                charCounterEnabled: true,
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    type: "multicols",
+                    inputFields: [
+                      {
+                        rowClassName: "creatives-sms-footer",
+                        cols: [
+                          {
+                            id: "save-button",
+                            metaType: "submit-button",
+                            colStyle: { marginRight: "16px" },
+                            type: "button",
+                            buttonType: "primary",
+                            value: "Save",
+                            customComponent: false,
+                            styling: "semantic",
+                            order: 3,
+                            fluid: true,
+                            standalone: true,
+                            onlyDisplay: true,
+                            submitAction: "saveFormData",
+                            supportedEvents: ["saveFormData"],
+                          },
+                        ],
+                      },
+                    ],
+                    actionFields: [],
+                  },
+                ],
+              },
+            ],
+          },
+          channel: "LINE",
+          module: "Campaigns",
+          type: "LAYOUT",
+        },
+      },
+      isActive: true,
+    },
+  ],
+};

package/v2Containers/Line/Create/messages.js

@@ -110,8 +110,8 @@ export default defineMessages({
     id: 'creatives.containersV2.Line.Create.uploadImage',
     defaultMessage: 'Upload image',
   },
-  "Line Template Created Successfully": {
-    id: 'creatives.containersV2.Line.Create.templateCreatedSuccessfully',
+  "lineTemplateCreatedSuccessfully": {
+    id: 'creatives.containersV2.Line.Create.lineTemplateCreatedSuccessfully',
     defaultMessage: 'Line template created successfully',
   },
   "Line Template Edited Successfully": {
@@ -182,4 +182,44 @@ export default defineMessages({
     id: 'creatives.containersV2.Line.Create.goBackTemporaryLost',
     defaultMessage: 'Do you really want to go back? All your temporary changes will be lost!',
   },
+  "Template content has unsupported/missing tags!": {
+    id: 'creatives.containers.Create.tagsErrorMessage',
+    defaultMessage: 'Message cannot be empty',
+  },
+  "imageGallery": {
+    id: 'creatives.containers.Create.imageGallery',
+    defaultMessage: 'Gallery',
+  },
+  "templatePlaceholder": {
+    id: 'creatives.containers.Create.templatePlaceholder',
+    defaultMessage: 'Enter template name',
+  },
+  "templateNameErrorPlaceholder": {
+    id: 'creatives.containers.Create.templateNameErrorPlaceholder',
+    defaultMessage: 'Template name cannot be empty.',
+  },
+  "templateAddTag": {
+    id: 'creatives.containers.Create.templateAddTag',
+    defaultMessage: 'Add tag',
+  },
+  "templateMessageError": {
+    id: 'creatives.containers.Create.templateMessageError',
+    defaultMessage: 'Template content cannot be empty!',
+  },
+  "templateMessagePlaceholder": {
+    id: 'creatives.containers.Create.templateMessagePlaceholder',
+    defaultMessage: 'Please input line template content.',
+  },
+  "templateMessagePreviewPropsLabel": {
+    id: 'creatives.containers.Create.templateMessagePreviewPropsLabel',
+    defaultMessage: 'Upload image content',
+  },
+  "templateMessagePreviewPropsError": {
+    id: 'creatives.containers.Create.templateMessagePreviewPropsError',
+    defaultMessage: 'Please upload image',
+  },
+  "templateMessagePreviewPropsInductiveText": {
+    id: 'creatives.containers.Create.templateMessagePreviewPropsInductiveText',
+    defaultMessage: 'The relevant image that complements the message context.',
+  },
 });

package/v2Containers/Line/Create/sagas.js

@@ -6,15 +6,18 @@ import * as Api from '../../../services/api';
 import * as types from './constants';
 
 // Individual exports for testing
-export function* createTemplate(template) {
+export function* createTemplate({ template, callback }) {
   let errorMsg;
   try {
     console.log('inside line saga createTemplate@@@', template);
-    const result = yield call(Api.createLineTemplate, template);
+    const result = yield call(Api.createLineTemplate, { template });
     if (result.message || result.status.code === 500) {
       errorMsg = result.message;
     }
     yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    if (callback) {
+      callback();
+    }
   } catch (error) {
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
   }
@@ -43,15 +46,18 @@ function* watchUploadAsset() {
 
 // edit
 
-export function* editTemplate(template) {
+export function* editTemplate({ template, callback }) {
   let errorMsg;
   try {
     console.log('saga editTemplate line', template);
-    const result = yield call(Api.createLineTemplate, template);
+    const result = yield call(Api.createLineTemplate, {template});
     console.log('saga editTemplate success line', result);
     if (result.message || result.status.code === 500) {
       errorMsg = result.message;
     }
+    if (callback) {
+      callback();
+    }
     yield put({ type: types.EDIT_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
   } catch (error) {
     yield put({ type: types.EDIT_TEMPLATE_FAILURE, error, errorMsg });

package/v2Containers/Line/Create/selectors.js

@@ -4,8 +4,7 @@ import { createSelector } from 'reselect';
  * Direct selector to the create state domain
  */
 const selectLineDomain = () => (state) => state.get('templates');
-const selectLineMessageEditDomain = () => (state) => state.get('line');
-//const selectLineDuplicateDomain = () => (state) => state.get('line');
+const selectLineMessageEditDomain = () => (state) => state.get('lineCreate');
 
 /**
  * Other specific selectors

package/v2Containers/Line/CreateWrapper/constants.js

@@ -0,0 +1,2 @@
+export const TEXT = 'text';
+export const IMAGE = 'image';

package/v2Containers/Line/CreateWrapper/index.js

@@ -0,0 +1,114 @@
+/*
+ *
+ * CreateLineWrapper
+ *
+ */
+import React, {useState} from 'react';
+import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
+import {CapRadioCard, CapLabel, CapButton} from '@capillarytech/cap-ui-library';
+import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import styled from 'styled-components';
+import { CAP_SPACE_04, CAP_SPACE_08, CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+import messages from './messages';
+import mapTemplateImage from "../../../assets/mapTemplate.png";
+import lineImageTemplate from "../../../assets/lineImageTemplate.png";
+import { TEXT, IMAGE } from './constants';
+import LineCreate from '../Create';
+
+const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
+const CardContainer = styled.div`
+  margin-top: ${CAP_SPACE_16};
+  .component-with-label-label{
+    margin-bottom: unset;
+  }
+  .ant-radio-group{
+    .ant-radio-button-wrapper{
+      &:first-child{
+        margin-left: unset;
+        margin-top: unset;
+      }
+    }
+    
+  }
+`;
+
+const CreateLineWrapper = (props) => {
+  const { intl: { formatMessage } } = props;
+
+  const getModes = (modeList) => (
+    modeList.map(({ label, imageSrc, type, title }) => ({
+      title: <FormattedMessage {...messages[title]}/>,
+      content: (
+        <>
+          <CapLabel type="label1" style={{ paddingTop: CAP_SPACE_04, paddingBottom: CAP_SPACE_08 }}>
+            {formatMessage(messages[label])}
+          </CapLabel>
+          <img alt="" className="template-image" src={imageSrc} />
+        </>
+      ),
+      value: type,
+    }))
+  );
+
+  const modes = [
+    {
+      title: 'textTemplateTitle',
+      label: 'textTemplateDescription',
+      imageSrc: mapTemplateImage,
+      type: TEXT,
+    },
+    {
+      title: 'imageTemplateTitle',
+      label: 'imageTemplateDescription',
+      imageSrc: lineImageTemplate,
+      type: IMAGE,
+    },
+  ];
+
+  const [selectedLineTemplateOption, updateSelectedLineTemplateOption] = useState();
+  const [showOptions, onSelectContinue] = useState(true);
+
+  const onOptionSelect = (event) => updateSelectedLineTemplateOption(event.target.value);
+
+  if (showOptions) {
+    return (
+      <>
+        <CardContainer>
+          <CapRadioCardWithLabel
+            label={<FormattedMessage {...messages.templateType}/>}
+            panes={getModes(modes)}
+            cardHeight={"364px"}
+            onChange={onOptionSelect}
+            selected={selectedLineTemplateOption}
+          />
+        </CardContainer>
+        {
+          selectedLineTemplateOption && (
+            <CapButton
+              key="submit"
+              type="primary"
+              onClick={() => onSelectContinue(false)}
+              style={{marginTop: 10}}
+            >
+              <FormattedMessage {...messages.continue} />
+            </CapButton>
+          )
+        }
+      </>
+    );
+  }
+
+  return (
+    <LineCreate
+      {...props}
+      params={{mode: selectedLineTemplateOption}}
+      route={{name: selectedLineTemplateOption}}
+    />
+  );
+};
+
+CreateLineWrapper.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CreateLineWrapper);

package/v2Containers/Line/CreateWrapper/messages.js

@@ -0,0 +1,43 @@
+/*
+ * Create Line Messages
+ *
+ * This contains all the text for the Create component.
+ */
+import { defineMessages } from 'react-intl';
+
+const prefix = 'creatives.containersV2.Line.CreateWrapper';
+
+export default defineMessages({
+  "textTemplateTitle": {
+    id: `${prefix}.textTemplateTitle`,
+    defaultMessage: 'Text template',
+  },
+  "textTemplateDescription": {
+    id: `${prefix}.textTemplateDescription`,
+    defaultMessage: 'Used for announcing offers and transaction related information',
+  },
+  "imageTemplateTitle": {
+    id: `${prefix}.imageTemplateTitle`,
+    defaultMessage: 'Image/video template',
+  },
+  "imageTemplateDescription": {
+    id: `${prefix}.imageTemplateDescription`,
+    defaultMessage: 'Used for creating image or video content',
+  },
+  "hybridTemplateTitle": {
+    id: `${prefix}.hybridTemplateTitle`,
+    defaultMessage: 'Hybrid',
+  },
+  "hybridTemplateDescription": {
+    id: `${prefix}.hybridTemplateDescription`,
+    defaultMessage: 'Used to create combined text & image or video content',
+  },
+  "templateType": {
+    id: `${prefix}.templateType`,
+    defaultMessage: 'Select the type of content',
+  },
+  "continue": {
+    id: `${prefix}.continue`,
+    defaultMessage: 'Continue',
+  },
+});

package/v2Containers/Templates/_templates.scss

@@ -13,6 +13,24 @@
         &:nth-child(4n+4) { //every 4th child
           margin-right: unset;
         }
+
+        .LINE {
+          .ant-card-body {
+            background-color: $CAP_G09;
+            height: 320px;
+          }
+
+          &.no-image .ant-card-meta {
+            height: 276px;
+            background: $CAP_WHITE;
+            padding: $CAP_SPACE_16 $CAP_SPACE_12;
+
+            .ant-card-meta-description {
+              height: 250px;
+              word-wrap: break-word;
+            }
+          }
+        }
       }
     }
   }
@@ -361,7 +379,8 @@
   overflow: hidden;
 }
 
-.wechat-filters {
+.wechat-filters,
+.line-filters {
   width: 100%;
   padding-left: 12px;
   .ant-radio-button-wrapper {