@capillarytech/creatives-library 8.0.139-alpha.2 → 8.0.140

package/v2Containers/InappAdvanced/index.js

@@ -0,0 +1,459 @@
+import React, { useState, useEffect } from "react";
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+import { bindActionCreators } from "redux";
+import { createStructuredSelector } from "reselect";
+import { injectIntl, FormattedMessage } from "react-intl";
+import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
+import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapTab from "@capillarytech/cap-ui-library/CapTab";
+import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
+import {
+  makeSelectInApp,
+  makeSelectAccount,
+  makeSelectBeePopupBuilderTokenFetching,
+  makeSelectBeePopupBuilderToken,
+} from "../InApp/selectors";
+import {
+  isLoadingMetaEntities,
+  makeSelectMetaEntities,
+  setInjectedTags,
+  selectCurrentOrgDetails,
+} from "../Cap/selectors";
+import * as inAppActions from "../InApp/actions";
+import '../InApp/index.scss';
+import './index.scss';
+import messages from "../InApp/messages";
+import globalMessages from "../Cap/messages";
+import withCreatives from "../../hoc/withCreatives";
+
+import {
+  ANDROID,
+  DEVICE_SUPPORTED,
+  INAPP_MESSAGE_LAYOUT_TYPES,
+  IOS,
+  LAYOUT_RADIO_OPTIONS,
+} from "../InApp/constants";
+import { INAPP, SMS } from "../CreativesContainer/constants";
+import {
+  ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
+} from "../Whatsapp/constants";
+import BeePopupEditor from "../BeePopupEditor";
+import injectReducer from '../../utils/injectReducer';
+import v2InAppReducer from '../InApp/reducer';
+import { v2InAppSagas } from '../InApp/sagas';
+import injectSaga from '../../utils/injectSaga';
+
+let editContent = {};
+
+export const InappAdvanced = (props) => {
+  const {
+    intl,
+    actions,
+    isFullMode,
+    onCreateComplete,
+    params,
+    templateData = {},
+    editData = {},
+    accountData = {},
+    globalActions,
+    location,
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+    getFormData,
+    templateName,
+    setTemplateName,
+    beePopupBuilderTokenFetching,
+    beePopupBuilderToken,
+  } = props || {};
+
+  const { formatMessage } = intl;
+  const [androidBeeJson, setAndroidBeeJson] = useState('{}');
+  const [androidBeeHtml, setAndroidBeeHtml] = useState(null);
+  const [iosBeeJson, setIosBeeJson] = useState('{}');
+  const [iosBeeHtml, setIosBeeHtml] = useState(null);
+  const [beeInstance, setBeeInstance] = useState(null);
+
+  const [templateLayoutType, setTemplateLayoutType] = useState(
+    INAPP_MESSAGE_LAYOUT_TYPES.MODAL
+  );
+  const [accountId, setAccountId] = useState("");
+  const [accessToken, setAccessToken] = useState("");
+  const [accountName, setAccountName] = useState("");
+  const [spin, setSpin] = useState(false);
+  const [panes, setPanes] = useState(ANDROID);
+  //for tag only
+  const [tags, updateTags] = useState([]);
+  //for edit only
+  const [isEditFlow, setEditFlow] = useState(false);
+  const [templateDate, setTemplateDate] = useState("");
+
+  //fetching bee popup builder token
+  useEffect(() => {
+    actions.getBeePopupBuilderToken();
+  }, []);
+
+  //gets account details
+  useEffect(() => {
+    const accountObj = accountData?.selectedWeChatAccount || {};
+    if (!isEmpty(accountObj)) {
+      const {
+        sourceAccountIdentifier = "",
+        configs = {},
+        name = "",
+      } = accountObj;
+      const isAndroidSupported = configs?.android === DEVICE_SUPPORTED;
+      // DEVICE_SUPPORTED is '1', which indicates if the particular account is supported, and '0' if the devive is not supported
+      //get deep link keys in an array
+      setPanes(isAndroidSupported ? ANDROID : IOS);
+      setAccountId(sourceAccountIdentifier);
+      setAccessToken(configs?.accessToken || "");
+      setAccountName(name);
+    }
+  }, [accountData?.selectedWeChatAccount]);
+
+  useEffect(() => {
+    const {
+      name = "",
+      versions = {},
+      createdAt = "",
+    } = isFullMode ? editData?.templateDetails || {} : templateData || {};
+    editContent = get(versions, `base.content`, {});
+    if (editContent && !isEmpty(editContent)) {
+      setEditFlow(true);
+      setTemplateName(name);
+      setTemplateDate(createdAt);
+      setTemplateLayoutType(editContent?.ANDROID?.bodyType);
+      const androidContent = editContent?.ANDROID;
+      if (!isEmpty(androidContent)) {
+        const {
+          beeJson: androidJson,
+          beeHtml: androidHtml,
+        } = androidContent || {};
+        setAndroidBeeJson(androidJson);
+        setAndroidBeeHtml(androidHtml);
+      }
+      const iosContent = editContent?.IOS;
+      if (!isEmpty(iosContent)) {
+        const {
+          beeJson: iosJson,
+          beeHtml: iosHtml,
+        } = iosContent || {};
+        setIosBeeJson(iosJson);
+        setIosBeeHtml(iosHtml);
+      }
+    }
+  }, [editData.templateDetails || templateData]);
+
+  // tag Code start from here
+  useEffect(() => {
+    //fetching tags
+    const { type, module } = location.query || {};
+    const isEmbedded = type === EMBEDDED;
+    const context = isEmbedded ? module : DEFAULT;
+    const embedded = isEmbedded ? type : FULL;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context,
+      embedded,
+    };
+    if (getDefaultTags) {
+      query.context = getDefaultTags;
+    }
+    globalActions.fetchSchemaForEntity(query);
+  }, []);
+
+  useEffect(() => {
+    let tag = get(metaEntities, `tags.standard`, []);
+    const { type, module } = location.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+      tag = supportedTags;
+    }
+    updateTags(tag);
+  }, [metaEntities]);
+
+  const handleOnTagsContextChange = (data) => {
+    const { type } = location.query || {};
+    const tempData = (data || '').toLowerCase();
+    const isEmbedded = type === EMBEDDED;
+    const embedded = isEmbedded ? type : FULL;
+    const context = tempData === ALL ? DEFAULT : tempData;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context,
+      embedded,
+    };
+    globalActions.fetchSchemaForEntity(query);
+  };
+
+  const onTemplateLayoutTypeChange = (value) => {
+    setTemplateLayoutType(value);
+  };
+
+  const saveBeeInstance = (instance) => {
+    setBeeInstance(instance);
+  };
+
+  const saveBeeData = (json, html, device) => {
+    if (device === ANDROID) {
+      setAndroidBeeJson(json);
+      setAndroidBeeHtml(html);
+    } else {
+      setIosBeeJson(json);
+      setIosBeeHtml(html);
+    }
+  };
+
+  const PANES = [
+    {
+      content: (
+        <CapSpin spinning={beePopupBuilderTokenFetching}>
+          {beePopupBuilderToken?.uuid && panes === ANDROID && (
+            <BeePopupEditor
+              uid={beePopupBuilderToken?.uuid}
+              tokenData={beePopupBuilderToken}
+              id="androidBeePopupBuilder"
+              saveBeeData={saveBeeData}
+              saveBeeInstance={saveBeeInstance}
+              templateLayoutType={templateLayoutType}
+              tags={tags}
+              onContextChange={handleOnTagsContextChange}
+              moduleFilterEnabled={isFullMode}
+              beeJson={androidBeeJson}
+              beeHtml={androidBeeHtml}
+              device={ANDROID}
+            />
+          )}
+        </CapSpin>
+      ),
+      tab: <FormattedMessage {...messages.Android} />,
+      key: ANDROID,
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED,
+    },
+    {
+      content: (
+        <CapSpin spinning={beePopupBuilderTokenFetching}>
+          {beePopupBuilderToken?.uuid && panes === IOS && (
+            <BeePopupEditor
+              uid={beePopupBuilderToken?.uuid}
+              tokenData={beePopupBuilderToken}
+              id="iosBeePopupBuilder"
+              saveBeeData={saveBeeData}
+              saveBeeInstance={saveBeeInstance}
+              templateLayoutType={templateLayoutType}
+              tags={tags}
+              onContextChange={handleOnTagsContextChange}
+              moduleFilterEnabled={isFullMode}
+              beeJson={iosBeeJson}
+              beeHtml={iosBeeHtml}
+              device={IOS}
+            />
+          )}
+        </CapSpin>
+      ),
+      tab: <FormattedMessage {...messages.Ios} />,
+      key: IOS,
+      isSupported: get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED,
+    },
+  ];
+
+  const createPayload = () => {
+    const commonDevicePayload = {
+      luid: "{{luid}}",
+      cuid: "{{cuid}}",
+      communicationId: "{{communicationId}}",
+      isBEEeditor: true,
+    };
+    const accountObj = accountData?.selectedWeChatAccount || {};
+    const {
+      sourceAccountIdentifier = "",
+      id,
+    } = accountObj;
+    const data = {
+      name: templateName,
+      versions: {
+        base: {
+          content: {
+            ANDROID: {
+              ...commonDevicePayload,
+              bodyType: templateLayoutType,
+              beeJson: androidBeeJson,
+              beeHtml: androidBeeHtml,
+            } || {},
+            IOS: {
+              ...commonDevicePayload,
+              bodyType: templateLayoutType,
+              beeJson: iosBeeJson,
+              beeHtml: iosBeeHtml,
+              custom: [],
+            } || {},
+          },
+        },
+      },
+      type: INAPP,
+      definition: {
+        accountId: id,
+        licenseCode: sourceAccountIdentifier,
+      },
+    };
+    return data;
+  };
+
+  const actionCallback = ({ errorMessage }) => {
+    if (!errorMessage) {
+      CapNotification.success({
+        message: isEditFlow ? formatMessage(messages.inAppEditNotification, {
+          name: templateName,
+        }) : formatMessage(messages.inAppCreateNotification, {
+          name: templateName,
+        }),
+      });
+      actions.clearCreateResponse();
+    } else {
+      CapNotification.error({
+        message: JSON.stringify(errorMessage),
+      });
+    }
+  };
+
+  const onCreateInApp = () => {
+    setSpin(true);
+    actions.createInAppTemplate(createPayload(), (resp, errorMessage) => {
+      actionCallback({ resp, errorMessage });
+      if (!errorMessage) {
+        onCreateComplete();
+      } else {
+        setSpin(false);
+      }
+    });
+  };
+
+  const onEditInApp = () => {
+    setSpin(true);
+    actions.editTemplate(
+      {
+        ...createPayload(),
+        _id: params?.id,
+      },
+      (resp, errorMessage) => {
+        actionCallback({ resp, errorMessage });
+        if (!errorMessage) {
+          onCreateComplete();
+        } else {
+          setSpin(false);
+        }
+      },
+    );
+  };
+
+  const onDoneCallback = () => {
+    if (isFullMode) {
+      if (isEditFlow) {
+        return onEditInApp;
+      }
+      return onCreateInApp;
+    }
+    return () => getFormData({
+      value: createPayload(),
+      _id: params && params.id,
+      validity: true,
+      type: INAPP,
+    });
+  };
+
+  return (
+    <CapSpin spinning={spin}>
+      <CapRow className="cap-inapp-creatives">
+        {/* Creative layout type*/}
+        {(isFullMode || !isEditFlow) && (
+        <>
+          <CapRow className="inapp-creative-layout">
+            <CapHeading type="h4">
+              <FormattedMessage {...messages.creativeLayout} />
+            </CapHeading>
+            <CapHeading type="h6" className="inapp-creative-layout-desc">
+              <FormattedMessage {...messages.creativeLayoutDesc} />
+            </CapHeading>
+          </CapRow>
+          <CapSelect
+            id="inapp-layout-dropdown"
+            options={LAYOUT_RADIO_OPTIONS}
+            value={templateLayoutType}
+            onChange={onTemplateLayoutTypeChange}
+          />
+        </>
+        )}
+        {/* device tab */}
+        <CapTab
+          panes={PANES.filter(
+            (devicePane) => devicePane?.isSupported === true
+          )}
+          onChange={(value) => {
+            setPanes(value);
+          }}
+          activeKey={panes}
+          defaultActiveKey={panes}
+          className="inapp-template-device-tab"
+        />
+        <div className="inapp-scroll-div" />
+      </CapRow>
+      <div className={`inapp-footer ${!isFullMode && `inapp-footer-lib`}`}>
+        {
+          <>
+            <CapButton
+              onClick={onDoneCallback()}
+              className="inapp-create-btn"
+            >
+              {isEditFlow ? (
+                isFullMode ? (
+                  <FormattedMessage {...messages.update} />
+                ) : (
+                  <FormattedMessage {...globalMessages.done} />
+                )
+              ) : isFullMode ? (
+                <FormattedMessage {...messages.create} />
+              ) : (
+                <FormattedMessage {...globalMessages.done} />
+              )}
+            </CapButton>
+          </>
+        }
+      </div>
+    </CapSpin>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  editData: makeSelectInApp(),
+  accountData: makeSelectAccount(),
+  metaEntities: makeSelectMetaEntities(),
+  loadingTags: isLoadingMetaEntities(),
+  injectedTags: setInjectedTags(),
+  currentOrgDetails: selectCurrentOrgDetails(),
+  beePopupBuilderTokenFetching: makeSelectBeePopupBuilderTokenFetching(),
+  beePopupBuilderToken: makeSelectBeePopupBuilderToken(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(inAppActions, dispatch),
+});
+
+const withReducer = injectReducer({ key: 'inapp', reducer: v2InAppReducer });
+const withInAppSaga = injectSaga({ key: 'inapp', saga: v2InAppSagas, mode: DAEMON });
+
+export default withCreatives({
+  WrappedComponent: injectIntl(InappAdvanced),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+  sagas: [withInAppSaga],
+  reducers: [withReducer],
+});

package/v2Containers/InappAdvanced/index.scss

@@ -0,0 +1,11 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+.cap-inapp-creatives {
+  #inapp-layout-dropdown {
+    width: 20.5rem;
+  }
+  .inapp-creative-layout {
+    margin-top: $CAP_SPACE_04;
+    margin-bottom: $CAP_SPACE_08;
+  }
+}
+

package/v2Containers/InappWrapper/_inappWrapper.scss

@@ -0,0 +1,19 @@
+.inapp-wrapper {
+    
+  .ant-radio-group.cap-radioCard-v2 {
+      .ant-radio-button-wrapper{
+          width: 284px;
+          height: 258px;
+      }
+      .ant-card-body {
+          padding: 1rem;
+      }
+  }
+}
+.template-name-inapp {
+    width: 580px;
+    margin-bottom: 1.5rem;
+    .ant-input {
+        height: 40px;
+    }
+}

package/v2Containers/InappWrapper/index.js

@@ -0,0 +1,192 @@
+/*
+ *
+ * InappWrapper
+ *
+ */
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
+import CapRadioCard from "@capillarytech/cap-ui-library/CapRadioCard";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import ComponentWithLabelHOC from "@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC";
+import styled from "styled-components";
+import InApp from "../InApp/index";
+import InappAdvanced from "../InappAdvanced/index";
+import messages from "./messages";
+import "./_inappWrapper.scss";
+
+const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
+const CardContainer = styled.div`
+  margin-top: 16px;
+  .component-with-label-label {
+    margin-bottom: unset;
+  }
+  .ant-radio-group {
+    .ant-radio-button-wrapper {
+      &:first-child {
+        margin-left: unset;
+        margin-top: unset;
+      }
+    }
+  }
+`;
+export function InappWrapper(props) {
+  const {
+    inAppCreateMode,
+    step,
+    getFormData,
+    setIsLoadingContent,
+    isGetFormData,
+    query,
+    isFullMode,
+    showTemplateName,
+    type,
+    onValidationFail,
+    templateData,
+    onInAppModeChange,
+    onEnterTemplateName,
+    onRemoveTemplateName,
+    forwardedTags,
+    selectedOfferDetails,
+    onCreateComplete,
+  } = props;
+  const [templateName, setTemplateName] = useState("");
+  const modes = [
+    {
+      title: <FormattedMessage {...messages.basicEditor} />,
+      icon: <CapIcon type="notepad-material" />,
+      content: <FormattedMessage {...messages.basicEditorDesc} />,
+      value: "basicEditor",
+    },
+    {
+      title: <FormattedMessage {...messages.dndEditor} />,
+      icon: <CapIcon type="draggable" />,
+      content: <FormattedMessage {...messages.dndEditorDesc} />,
+      value: "beeEditor",
+    },
+  ];
+
+  const onChange = (e) => {
+    onInAppModeChange(e.target.value);
+  };
+
+  function onTemplateNameChange(event) {
+    setTemplateName(event.target.value);
+    if (event.target.value && onEnterTemplateName) {
+      onEnterTemplateName();
+    } else if (onRemoveTemplateName) {
+      onRemoveTemplateName();
+    }
+  }
+
+  return (
+    <div className="inapp-wrapper">
+      {step === "modeSelection" ? (
+        <div>
+          {isFullMode && (
+            <CapInput
+              className="template-name-inapp"
+              label={<FormattedMessage {...messages.creativeName} />}
+              onChange={onTemplateNameChange}
+              value={templateName}
+              labelPosition="top"
+              size="default"
+            />
+          )}
+          <CardContainer>
+            <CapRadioCardWithLabel
+              label={<FormattedMessage {...messages.modeDesc} />}
+              panes={modes}
+              cardHeight={"120px"}
+              onChange={onChange}
+              selected={inAppCreateMode}
+            />
+          </CardContainer>
+        </div>
+      ) : (
+        <div>
+          {inAppCreateMode === 'basicEditor' && (
+            <InApp
+              getFormData={getFormData}
+              setIsLoadingContent={setIsLoadingContent}
+              defaultData={{ "template-name": templateName }}
+              location={{
+                pathname: `/inapp/create`,
+                query,
+                search: '',
+              }}
+              params={{ mode: inAppCreateMode }}
+              isFullMode={isFullMode}
+              isGetFormData={isGetFormData}
+              showTemplateName={showTemplateName}
+              route={{ name: "inapp" }}
+              getDefaultTags={type}
+              onValidationFail={onValidationFail}
+              templateData={templateData}
+              templateName={templateName}
+              setTemplateName={setTemplateName}
+              forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
+              onCreateComplete={onCreateComplete}
+            />
+          )}
+          {inAppCreateMode === 'beeEditor' && (
+            <InappAdvanced
+              getFormData={getFormData}
+              setIsLoadingContent={setIsLoadingContent}
+              defaultData={{ "template-name": templateName }}
+              location={{
+                pathname: `/inapp/create`,
+                query,
+                search: '',
+              }}
+              params={{ mode: inAppCreateMode }}
+              isFullMode={isFullMode}
+              isGetFormData={isGetFormData}
+              showTemplateName={showTemplateName}
+              route={{ name: "inapp" }}
+              getDefaultTags={type}
+              onValidationFail={onValidationFail}
+              templateData={templateData}
+              templateName={templateName}
+              setTemplateName={setTemplateName}
+              forwardedTags={forwardedTags}
+              selectedOfferDetails={selectedOfferDetails}
+              onCreateComplete={onCreateComplete}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+InappWrapper.propTypes = {
+  onInAppModeChange: PropTypes.func,
+  inAppCreateMode: PropTypes.string,
+  step: PropTypes.string,
+  getFormData: PropTypes.string,
+  setIsLoadingContent: PropTypes.func,
+  onEnterTemplateName: PropTypes.func,
+  onRemoveTemplateName: PropTypes.func,
+  isGetFormData: PropTypes.bool,
+  query: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  showTemplateName: PropTypes.func,
+  type: PropTypes.string,
+  onValidationFail: PropTypes.func,
+  forwardedTags: PropTypes.object,
+  templateData: PropTypes.object,
+  selectedOfferDetails: PropTypes.object,
+  onCreateComplete: PropTypes.func,
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(null, mapDispatchToProps)(InappWrapper);