@capillarytech/creatives-library 8.0.145 → 8.0.146

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;
-  }
-}
-