@capillarytech/creatives-library 8.0.140 → 8.0.142-alpha.0

package/v2Containers/BeePopupEditor/index.js

@@ -1,169 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-// import { bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { UserIsAuthenticated } from '../../utils/authWrapper';
-import TagList from '../TagList';
-import { ANDROID, BEE_LAYOUT_OPTIONS, MOBILE, UNSUBSCRIBE } from './constants';
-import emptyAndroidSvg from '../../v2Components/TemplatePreview/assets/images/empty_android.svg';
-import emptyIosSvg from '../../v2Components/TemplatePreview/assets/images/empty_ios.svg';
-function BeePopupEditor(props) {
-  const {
-    uid,
-    id,
-    tokenData,
-    saveBeeInstance,
-    saveBeeData,
-    beeJson,
-    templateLayoutType,
-    moduleFilterEnabled,
-    label,
-    location,
-    injectedTags,
-    className,
-    userLocale,
-    selectedOfferDetails,
-    tags,
-    onContextChange,
-    device,
-  } = props;
-
-  let beePluginInstance = null;
-  let intervalTimer;
-  const savedCallback = useRef();
-
-  const [visibleTaglist, setVisibleTaglist] = useState(false);
-  const [selectedTag, setSelectedTag] = useState({});
-  const filteredTags = (tags || []).filter((obj) => obj.definition.value !== UNSUBSCRIBE);
-
-  useEffect(() => {
-    const beeConfig = {
-      uid,
-      trackChanges: true,
-      container: 'bee-plugin-container',
-      workspace: {
-        popup: {
-          backgroundImageMobile: device === ANDROID ? emptyAndroidSvg : emptyIosSvg,
-          layout: BEE_LAYOUT_OPTIONS[templateLayoutType],
-          customStyles: {
-            container: {
-              width: "90%",
-              margin: "1.5rem",
-            },
-          },
-        },
-        stage: MOBILE,
-        hideStageToggle: true,
-      },
-      contentDialog: {
-        mergeTags: {
-          label: 'Add Label',
-          handler: async (resolve, reject) => {
-            // this will open tag modal
-            await setVisibleTaglist(true);
-            // until tag modal will not open promise will not execute
-            // once tag modal is opened it will start 2 sec interval to wait use has selected any tag or cancel the tag selection
-            const promise = new Promise((resolveP) => {
-              intervalTimer = setInterval(() => {
-                // this will execute, if user cancel the tag selection
-                if ((savedCallback.current || {}).close === true) {
-                  reject();
-                  clearInterval(intervalTimer);
-                  return;
-                }
-                // this block is checking use has selected any tag or not
-                if (Object.keys(savedCallback.current || {}).length > 0) {
-                  resolveP(savedCallback.current);
-                  setSelectedTag({});
-                  clearInterval(intervalTimer);
-                }
-              }, 2000);
-            });
-            // once prmise will resolve , pass the resolve data to handler to show tags in bee edior
-            const result = await promise;
-            resolve(result);
-          },
-        },
-      },
-      onChange: (jsonFile, htmlFile) => {
-        saveBeeData(jsonFile, htmlFile, device);
-      },
-    };
-    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
-      beePluginInstance = instance;
-      const parseJson = JSON.parse(beeJson);
-      beePluginInstance.start(parseJson);
-      saveBeeInstance(beePluginInstance);
-    });
-    return () => clearInterval(intervalTimer);
-  }, [templateLayoutType]);
-
-  useEffect(() => {
-    savedCallback.current = Object.keys(selectedTag).length > 0 && selectedTag;
-  }, [selectedTag]);
-
-  const onTagSelect = (result) => {
-    const msg = {
-      name: result,
-      value: `{{${result}}}`,
-    };
-    setSelectedTag(msg);
-    setVisibleTaglist(false);
-  };
-
-  const onCancelTagList = () => {
-    setVisibleTaglist(false);
-    setSelectedTag({close: true});
-  };
-
-  return (
-    <>
-      <div id="bee-plugin-container" style={{ height: "650px" }}></div>
-      <TagList
-        moduleFilterEnabled={moduleFilterEnabled}
-        label={label}
-        onTagSelect={onTagSelect}
-        location={location}
-        tags={filteredTags}
-        injectedTags={injectedTags}
-        className={className}
-        id={id}
-        userLocale={userLocale}
-        selectedOfferDetails={selectedOfferDetails}
-        visibleTaglist={visibleTaglist}
-        hidePopover
-        modalProps={{
-          onCancel: onCancelTagList,
-          style: { left: 135, top: 250 },
-          className: "bee-editor-tag-list",
-        }}
-        onContextChange={onContextChange}
-      />
-    </>
-  );
-}
-BeePopupEditor.propTypes = {
-  saveBeeData: PropTypes.func.isRequired,
-  saveBeeInstance: PropTypes.func.isRequired,
-  beeJson: PropTypes.object.isRequired,
-  tokenData: PropTypes.object.isRequired,
-  uid: PropTypes.string.isRequired,
-  templateLayoutType: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  moduleFilterEnabled: PropTypes.bool.isRequired,
-  label: PropTypes.string.isRequired,
-  location: PropTypes.object.isRequired,
-  injectedTags: PropTypes.array.isRequired,
-  className: PropTypes.string.isRequired,
-  userLocale: PropTypes.string.isRequired,
-  selectedOfferDetails: PropTypes.object.isRequired,
-  tags: PropTypes.array.isRequired,
-  onContextChange: PropTypes.func.isRequired,
-  device: PropTypes.string.isRequired,
-};
-const mapStateToProps = () => createStructuredSelector({});
-
-function mapDispatchToProps() {}
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(BeePopupEditor)));

package/v2Containers/InappAdvanced/index.js

@@ -1,459 +0,0 @@
-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

@@ -1,11 +0,0 @@
-@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

@@ -1,19 +0,0 @@
-.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;
-    }
-}