@capillarytech/creatives-library 8.0.141 → 8.0.142

package/v2Containers/CreativesContainer/index.js

@@ -1267,7 +1267,7 @@ export class Creatives extends React.Component {
   shouldShowFooter = () => {
     const { isFullMode } = this.props;
     const {
-      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData,
+      slidBoxContent, currentChannel, emailCreateMode, templateNameExists, templateStep, mobilePushCreateMode, weChatTemplateType, templateData, inAppCreateMode,
     } = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
@@ -1310,6 +1310,13 @@ export class Creatives extends React.Component {
       showFooter = true;
     }
 
+    if (channel === constants.INAPP &&
+      ((slidBoxContent === 'createTemplate' && !isEmpty(inAppCreateMode))
+      || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection')) &&
+      templateNameExists) {
+      showFooter = true;
+    }
+
     if (showFooter) {
       if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') ||
         ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
@@ -1430,7 +1437,7 @@ export class Creatives extends React.Component {
     } else if (currentChannel.toUpperCase() === constants.WECHAT) {
       isShowContinueFooter = !isEmpty(weChatTemplateType) && currentStep === "modeSelection";
     } else if (currentChannel.toUpperCase() === constants.INAPP) {
-      isShowContinueFooter = !isEmpty(inAppCreateMode) && currentChannel === "modeSelection";
+      isShowContinueFooter = !isEmpty(inAppCreateMode) && currentStep === "modeSelection";
     }
 
     return isShowContinueFooter;
@@ -1467,6 +1474,7 @@ export class Creatives extends React.Component {
       templateStep,
       isLoadingContent,
       mobilePushCreateMode,
+      inAppCreateMode,
       isDiscardMessage,
       weChatTemplateType,
       weChatMaptemplateStep,
@@ -1569,6 +1577,8 @@ export class Creatives extends React.Component {
               setIsLoadingContent={this.setIsLoadingContent}
               onMobilepushModeChange={this.onMobilepushModeChange}
               mobilePushCreateMode={mobilePushCreateMode}
+              inAppCreateMode={inAppCreateMode}
+              onInAppModeChange={this.onInAppModeChange}
               showTemplateName={this.showTemplateName}
               onValidationFail={this.onValidationFail}
               channelsToHide={channelsToHide}

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -31,6 +31,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -116,6 +117,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -201,6 +203,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -298,6 +301,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}
@@ -395,6 +399,7 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         onEnterTemplateName={[Function]}
         onFTPSubmit={[MockFunction]}
         onFacebookSubmit={[MockFunction]}
+        onInAppModeChange={[Function]}
         onMobilepushModeChange={[Function]}
         onPreviewTemplate={[Function]}
         onRemoveTemplateName={[Function]}

package/v2Containers/InApp/actions.js

@@ -7,6 +7,7 @@ import {
   UPLOAD_INAPP_ASSET_REQUEST,
   CLEAR_INAPP_ASSET,
   INAPP_EDIT_TEMPLATE_REQUEST,
+  GET_BEE_POPUP_BUILDER_TOKEN_REQUEST,
 } from "./constants";
 
 export function createInAppTemplate(payload, callback) {
@@ -62,3 +63,9 @@ export const clearInAppAsset = (templateType) => ({
   type: CLEAR_INAPP_ASSET,
   templateType,
 });
+
+export function getBeePopupBuilderToken() {
+  return {
+    type: GET_BEE_POPUP_BUILDER_TOKEN_REQUEST,
+  };
+}

package/v2Containers/InApp/constants.js

@@ -34,6 +34,10 @@ export const UPLOAD_INAPP_ASSET_SUCCESS = `${prefix}/UPLOAD_INAPP_ASSET_SUCCESS`
 export const UPLOAD_INAPP_ASSET_FAILURE = `${prefix}/UPLOAD_INAPP_ASSET_FAILURE`;
 export const CLEAR_INAPP_ASSET = `${prefix}/CLEAR_INAPP_ASSET`;
 
+export const GET_BEE_POPUP_BUILDER_TOKEN_REQUEST = `${prefix}/GET_BEE_POPUP_BUILDER_TOKEN_REQUEST`;
+export const GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS = `${prefix}/GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS`;
+export const GET_BEE_POPUP_BUILDER_TOKEN_FAILURE = `${prefix}/GET_BEE_POPUP_BUILDER_TOKEN_FAILURE`;
+
 export const INAPP_MEDIA_TYPES = {
   TEXT: "TEXT",
   IMAGE: "IMAGE",
@@ -159,4 +163,4 @@ export const INAPP_LAYOUT_DETAILS = {
 };
 
 export const DEVICE_SUPPORTED = '1';
-export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
+export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";

package/v2Containers/InApp/index.js

@@ -7,21 +7,20 @@ 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 CapInput from "@capillarytech/cap-ui-library/CapInput";
 import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
 import CapRow from "@capillarytech/cap-ui-library/CapRow";
 import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
 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 } from "./selectors";
+import { makeSelectInApp, makeSelectAccount, makeSelectGetTemplateDetailsInProgress } from "./selectors";
 import * as globalActions from '../Cap/actions';
 import {
   isLoadingMetaEntities,
   makeSelectMetaEntities,
   setInjectedTags,
   selectCurrentOrgDetails,
-  selectLiquidStateDetails
+  selectLiquidStateDetails,
 } from "../Cap/selectors";
 import * as inAppActions from "./actions";
 import './index.scss';
@@ -59,6 +58,7 @@ import { validateInAppContent } from "../../utils/commonUtils";
 import ErrorInfoNote from "../../v2Components/ErrorInfoNote";
 import { hasLiquidSupportFeature } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
+import InappAdvanced from "../InappAdvanced/index";
 
 let editContent = {};
 
@@ -82,6 +82,18 @@ export const InApp = (props) => {
     selectedOfferDetails,
     currentOrgDetails,
     fetchingLiquidValidation,
+    templateName,
+    setTemplateName,
+    getTemplateDetailsInProgress,
+    isEditInApp,
+    setIsLoadingContent,
+    query,
+    inAppCreateMode,
+    isGetFormData,
+    showTemplateName,
+    onValidationFail,
+    type,
+    forwardedTags,
   } = props || {};
 
   const { formatMessage } = intl;
@@ -90,7 +102,7 @@ export const InApp = (props) => {
   const [templateMediaType, setTemplateMediaType] = useState(
     INAPP_MEDIA_TYPES.TEXT
   );
-  const [templateName, setTemplateName] = useState("");
+
   const [templateLayoutType, setTemplateLayoutType] = useState(
     INAPP_MESSAGE_LAYOUT_TYPES.MODAL
   );
@@ -116,6 +128,7 @@ export const InApp = (props) => {
   const [tags, updateTags] = useState([]);
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
+  const [tempName, setTempName] = useState("");
   const [templateDate, setTemplateDate] = useState("");
 
   //buttons
@@ -191,8 +204,8 @@ export const InApp = (props) => {
     } = isFullMode ? editData?.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content`, {});
     if (editContent && !isEmpty(editContent)) {
+      setTempName(name);
       setEditFlow(true);
-      setTemplateName(name);
       setTemplateDate(createdAt);
       setTemplateLayoutType(editContent?.ANDROID?.bodyType);
       const androidContent = editContent?.ANDROID;
@@ -344,10 +357,6 @@ export const InApp = (props) => {
   };
   // tag Code end
 
-  const onTemplateNameChange = ({ target: { value } }) => {
-    setTemplateName(value);
-  };
-
   const onTemplateLayoutTypeChange = ({ target: { value } }) => {
     setTemplateLayoutType(value);
   };
@@ -460,22 +469,6 @@ export const InApp = (props) => {
     },
   ];
 
-  const createModeContent = (
-    <CapRow>
-      {/* template name */}
-      <CapHeading type="h4">
-        <FormattedMessage {...messages.creativeName} />
-      </CapHeading>
-      <CapInput
-        id="inapp-template-name-input"
-        className="inapp-template-name-input"
-        onChange={onTemplateNameChange}
-        placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
-        value={templateName}
-        size="default"
-      />
-    </CapRow>
-  );
   //create methods end
 
   //used by create and edit
@@ -526,10 +519,6 @@ export const InApp = (props) => {
   const isDisableDone = (device) => {
     const isIosDevice = device === IOS;
     const isAndroidDevice = device === ANDROID;
-    //if template name is not entered
-    if (isFullMode && templateName.trim() === '') {
-      return true;
-    }
     //if template message is not entered
     //for android
     if (isAndroidDevice && (templateMessageAndroid.trim() === '' || templateMessageErrorAndroid)) {
@@ -619,7 +608,7 @@ export const InApp = (props) => {
       sourceAccountIdentifier = "",
       id,
     } = accountObj;
-    
+
     // Construct Android content if not disabled
     const androidContent = !isDisableDone(ANDROID) ? {
       ...commonDevicePayload,
@@ -639,7 +628,7 @@ export const InApp = (props) => {
         ctas: [{type: DEEP_LINK, actionLink: deepLinkValueAndroid}],
       }),
     } : {};
-    
+
     // Construct iOS content if not disabled
     const iosContent = !isDisableDone(IOS) ? {
       ...commonDevicePayload,
@@ -659,9 +648,9 @@ export const InApp = (props) => {
         ctas: [{type: DEEP_LINK, actionLink: deepLinkValueIos}],
       }),
     } : {};
-    
+
     const data = {
-      name: templateName,
+      name: isEditFlow ? tempName : templateName,
       versions: {
         base: {
           content: {
@@ -684,7 +673,7 @@ export const InApp = (props) => {
     if (!errorMessage) {
       CapNotification.success({
         message: isEditFlow ? formatMessage(messages.inAppEditNotification, {
-          name: templateName,
+          name: tempName,
         }) : formatMessage(messages.inAppCreateNotification, {
           name: templateName,
         }),
@@ -785,30 +774,63 @@ export const InApp = (props) => {
   };
 
   const isLiquidFlow = hasLiquidSupportFeature();
+  const isBEEeditor = get(editData, 'templateDetails.versions.base.content.ANDROID.isBEEeditor') || get(templateData, 'versions.base.content.ANDROID.isBEEeditor');
+  // Early returns to avoid nested ternary
+  if (isEditInApp && getTemplateDetailsInProgress) {
+    return <CapSpin spinning={getTemplateDetailsInProgress} />;
+  }
+
+  if (isEditInApp && isBEEeditor) {
+    return (
+      <InappAdvanced
+        getFormData={getFormData}
+        setIsLoadingContent={setIsLoadingContent}
+        defaultData={{ "template-name": tempName }}
+        location={{
+          pathname: `/inapp/edit`,
+          query,
+          search: '',
+        }}
+        params={{ mode: inAppCreateMode, id: params.id }}
+        isFullMode={isFullMode}
+        isGetFormData={isGetFormData}
+        showTemplateName={showTemplateName}
+        route={{ name: "inapp" }}
+        getDefaultTags={type}
+        onValidationFail={onValidationFail}
+        templateData={templateData}
+        templateName={tempName}
+        setTemplateName={setTempName}
+        forwardedTags={forwardedTags}
+        selectedOfferDetails={selectedOfferDetails}
+        onCreateComplete={onCreateComplete}
+      />
+    );
+  }
+
   return (
     <CapSpin spinning={spin || fetchingLiquidValidation} tip={fetchingLiquidValidation ? <FormattedMessage {...formBuilderMessages.liquidSpinText} /> : ""}>
       <CapRow className="cap-inapp-creatives">
         <CapColumn span={14}>
-          {isFullMode && createModeContent}
           {/* 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>
-              <CapRadioGroup
-                id="inapp-layout-radio"
-                options={LAYOUT_RADIO_OPTIONS}
-                value={templateLayoutType}
-                onChange={onTemplateLayoutTypeChange}
-                className="inapp-layout-radio"
-              />
-            </>
+          <>
+            <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>
+            <CapRadioGroup
+              id="inapp-layout-radio"
+              options={LAYOUT_RADIO_OPTIONS}
+              value={templateLayoutType}
+              onChange={onTemplateLayoutTypeChange}
+              className="inapp-layout-radio"
+            />
+          </>
           )}
           {/* device tab */}
           <CapTab
@@ -868,7 +890,8 @@ const mapStateToProps = createStructuredSelector({
   loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
   currentOrgDetails: selectCurrentOrgDetails(),
-  fetchingLiquidValidation: selectLiquidStateDetails()
+  fetchingLiquidValidation: selectLiquidStateDetails(),
+  getTemplateDetailsInProgress: makeSelectGetTemplateDetailsInProgress(),
 });
 
 const mapDispatchToProps = (dispatch) => ({

package/v2Containers/InApp/reducer.js

@@ -15,12 +15,19 @@ import {
   INAPP_EDIT_TEMPLATE_REQUEST,
   INAPP_EDIT_TEMPLATE_SUCCESS,
   INAPP_EDIT_TEMPLATE_FAILURE,
+  GET_BEE_POPUP_BUILDER_TOKEN_REQUEST,
+  GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS,
+  GET_BEE_POPUP_BUILDER_TOKEN_FAILURE,
 } from './constants';
 
 const initialState = fromJS({
   uploadedAssetData: {},
   createTemplateInProgress: false,
   editTemplateInProgress: false,
+  beePopupBuilderTokenFetching: false,
+  beePopupBuilderToken: {},
+  beePopupBuilderTokenError: false,
+  beePopupBuilderTokenErrorMessage: '',
 });
 
 function inAppReducer(state = initialState, action) {
@@ -101,6 +108,16 @@ function inAppReducer(state = initialState, action) {
           ? `uploadedAssetData${action.templateType}`
           : 'uploadedAssetData',
       );
+    case GET_BEE_POPUP_BUILDER_TOKEN_REQUEST:
+      return state.set('beePopupBuilderTokenFetching', true);
+    case GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS:
+      return state
+        .set('beePopupBuilderTokenFetching', false)
+        .set('beePopupBuilderToken', action.data);
+    case GET_BEE_POPUP_BUILDER_TOKEN_FAILURE:
+      return state
+        .set('beePopupBuilderTokenFetching', false)
+        .set('beePopupBuilderTokenError', fromJS(action.error));
     default:
       return state;
   }

package/v2Containers/InApp/sagas.js

@@ -15,6 +15,9 @@ import {
   GET_INAPP_TEMPLATE_DETAILS_SUCCESS,
   GET_INAPP_TEMPLATE_DETAILS_FAILURE,
   GET_INAPP_TEMPLATE_DETAILS_REQUEST,
+  GET_BEE_POPUP_BUILDER_TOKEN_REQUEST,
+  GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS,
+  GET_BEE_POPUP_BUILDER_TOKEN_FAILURE,
 } from './constants';
 import { INAPP } from '../CreativesContainer/constants';
 
@@ -136,11 +139,34 @@ export function* watchGetTemplateDetails() {
   
 }
 
+export function* getBeePopupBuilderToken() {
+  try {
+    const result = yield call(Api.getBeePopupBuilderToken);
+    if (result.success) {
+      yield put({
+        type: GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS,
+        data: result.response,
+      });
+    } else {
+      yield put({ type: GET_BEE_POPUP_BUILDER_TOKEN_FAILURE, error: result.message });
+    }
+  } catch (error) {
+    yield put({ type: GET_BEE_POPUP_BUILDER_TOKEN_FAILURE, error });
+  }
+}
+export function* watchGetBeePopupBuilderToken() {
+  yield takeLatest(
+    GET_BEE_POPUP_BUILDER_TOKEN_REQUEST,
+    getBeePopupBuilderToken,
+  );
+}
+
 export default [
   watchCreateTemplate,
   watchGetTemplateDetails,
   watchUploadInAppAsset,
   watchEditTemplate,
+  watchGetBeePopupBuilderToken,
 ];
 
 export function* v2InAppSagas() {
@@ -149,5 +175,6 @@ export function* v2InAppSagas() {
     watchGetTemplateDetails(),
     watchUploadInAppAsset(),
     watchEditTemplate(),
+    watchGetBeePopupBuilderToken(),
   ]);
 }

package/v2Containers/InApp/selectors.js

@@ -9,4 +9,26 @@ const makeSelectInApp = () =>
 const makeSelectAccount = () =>
   createSelector(selectAccountDomain(), (substate) => substate.toJS());
 
-export { makeSelectInApp, makeSelectAccount };
+const makeSelectBeePopupBuilderTokenFetching = () => createSelector(
+  selectInAppDomain(),
+  (substate) => substate.get('beePopupBuilderTokenFetching'),
+);
+
+const makeSelectBeePopupBuilderToken = () => createSelector(
+  selectInAppDomain(),
+  (substate) => substate.get('beePopupBuilderToken'),
+);
+
+const makeSelectGetTemplateDetailsInProgress = () => createSelector(
+  selectInAppDomain(),
+  (substate) => substate.get('getTemplateDetailsInProgress'),
+);
+
+
+export {
+  makeSelectInApp,
+  makeSelectAccount,
+  makeSelectBeePopupBuilderTokenFetching,
+  makeSelectBeePopupBuilderToken,
+  makeSelectGetTemplateDetailsInProgress,
+};

package/v2Containers/InApp/tests/index.test.js

@@ -60,11 +60,6 @@ describe('Test activity inApp container', () => {
       isFullMode: true,
       params: { id: 'test'},
     });
-    const inputBox = await screen.findAllByPlaceholderText(
-      'Enter template name',
-    );
-    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome' } });
-    inputBox[0].focus();
     const iosTab = screen.getByRole('tab', {
       name: /ios/i,
     });
@@ -73,10 +68,6 @@ describe('Test activity inApp container', () => {
       name: /android/i,
     });
     fireEvent.click(within(androidTab).getByText(/android/i));
-    const inputNameBox = await screen.findAllByPlaceholderText(
-      'Enter template name',
-    );
-    fireEvent.change(inputNameBox[0], { target: { value: 'Hello, welcome' } });
     const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
     msgBox[0].focus();
     fireEvent.change(msgBox[0], { target: { value: 'val' }});

package/v2Containers/InApp/tests/reducer.test.js

@@ -260,4 +260,37 @@ describe("zalo reducer", () => {
       expect(inAppReducer(state, action)).toEqual(expectedResult);
     });
   });
+  describe("Reducer : GET_BEE_POPUP_BUILDER_TOKEN_REQUEST", () => {
+    it.concurrent("should handle GET_BEE_POPUP_BUILDER_TOKEN_REQUEST action", () => {
+      const state = fromJS({
+        beePopupBuilderTokenFetching: false,
+      });
+      const expectedResult = state.set("beePopupBuilderTokenFetching", true);
+      expect(inAppReducer(state, actions.getBeePopupBuilderToken({}))).toEqual(expectedResult);
+    });
+    it.concurrent("should handle GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS action", () => {
+      const state = fromJS({
+        beePopupBuilderTokenFetching: false,
+        beePopupBuilderToken: 'data',
+      });
+      const action = {
+        type: types.GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS,
+        data: 'data',
+      };
+      const expectedResult = state.set("beePopupBuilderTokenFetching", false).set("beePopupBuilderToken", 'data');
+      expect(inAppReducer(state, action)).toEqual(expectedResult);
+    });
+    it.concurrent("should handle GET_BEE_POPUP_BUILDER_TOKEN_FAILURE action", () => {
+      const state = fromJS({
+        beePopupBuilderTokenFetching: false,
+        beePopupBuilderTokenError: 'error',
+      });
+      const action = {
+        type: types.GET_BEE_POPUP_BUILDER_TOKEN_FAILURE,
+        error: 'error',
+      };
+      const expectedResult = state.set("beePopupBuilderTokenFetching", false).set("beePopupBuilderTokenError", 'error');
+      expect(inAppReducer(state, action)).toEqual(expectedResult);
+    });
+  });
 });

package/v2Containers/InApp/tests/sagas.test.js

@@ -397,7 +397,63 @@ describe('test for getTemplateDetails', () => {
   });
 });
 
-
+describe('test for getBeePopupBuilderToken', () => {
+  it('should call getBeePopupBuilderToken when GET_BEE_POPUP_BUILDER_TOKEN_REQUEST action is dispatched', () => {
+    const watcher = sagas.watchGetBeePopupBuilderToken();
+    const gen = watcher.next().value;
+    expect(gen).toEqual(takeLatest(types.GET_BEE_POPUP_BUILDER_TOKEN_REQUEST, sagas.getBeePopupBuilderToken));
+  });
+  it('should cancel the watcher watchGetBeePopupBuilderToken', () => {
+    const gen = sagas.watchGetBeePopupBuilderToken();
+    const mockTask = createMockTask();
+    expect(gen.next().value).toEqual(takeLatest(types.GET_BEE_POPUP_BUILDER_TOKEN_REQUEST, sagas.getBeePopupBuilderToken));
+    expect(gen.next(mockTask).done).toBe(true);
+    expect(mockTask.isRunning()).toBe(true);
+    expect(gen.next().value).toEqual(undefined);
+  });
+  it('should handle GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS', () => {
+    const payload = {}; // Add your payload for testing
+    const mockResult = {
+      success: true,
+      status: {
+        code: 200,
+      },
+      response: { /* mock response */ },
+    };
+    const iterator = sagas.getBeePopupBuilderToken({ payload, callback: jest.fn() });
+    expect(iterator.next().value).toEqual(call(Api.getBeePopupBuilderToken));
+    expect(iterator.next(mockResult).value).toEqual(
+      put({ type: types.GET_BEE_POPUP_BUILDER_TOKEN_SUCCESS, data: mockResult.response })
+    );
+    expect(iterator.next().done).toBe(true);
+  });
+  it('should handle GET_BEE_POPUP_BUILDER_TOKEN_FAILURE', () => {
+    const payload = {};
+    const error = new Error('Test error');
+    const iterator = sagas.getBeePopupBuilderToken({ payload });
+    expect(iterator.next().value).toEqual(call(Api.getBeePopupBuilderToken));
+    expect(iterator.throw(error).value).toEqual(
+      put({ type: types.GET_BEE_POPUP_BUILDER_TOKEN_FAILURE, error })
+    );
+    expect(iterator.next().done).toBe(true);
+  });
+  it('should handle error case', () => {
+    const payload = {};
+    const mockResult = {
+      success: false,
+      status: {
+        code: 400,
+      },
+      message: 'Test error',
+    };
+    const iterator = sagas.getBeePopupBuilderToken({ payload });
+    expect(iterator.next().value).toEqual(call(Api.getBeePopupBuilderToken));
+    expect(iterator.next(mockResult).value).toEqual(
+      put({ type: types.GET_BEE_POPUP_BUILDER_TOKEN_FAILURE, error: mockResult.message })
+    );
+    expect(iterator.next().done).toBe(true);
+  });
+});
 
 
   describe("v2InAppSagas Combined", () => {