@capillarytech/creatives-library 8.0.248 → 8.0.249

package/v2Containers/WebPush/Create/index.js

@@ -32,6 +32,9 @@ import { useImageUpload } from './hooks/useImageUpload';
 import { useTagManagement } from './hooks/useTagManagement';
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
+import * as templateActions from '../../Templates/actions';
+import { makeSelectTemplates } from '../../Templates/selectors';
+
 import {
   WEBPUSH_MEDIA_TYPES,
   BRAND_ICON_OPTIONS,
@@ -53,6 +56,7 @@ import {
 } from '../selectors';
 import webPushReducer from '../reducer';
 import webPushSagas from '../sagas';
+import { v2TemplateSaga } from '../../Templates/sagas';
 import withCreatives from '../../../hoc/withCreatives';
 import messages from './messages';
 import { createWebPushPayload } from './utils/payloadBuilder';
@@ -67,6 +71,7 @@ import {
   setInjectedTags,
 } from '../../Cap/selectors';
 import './index.scss';
+import { WEBPUSH } from '../../CreativesContainer/constants';
 
 // Memoized TagList wrapper components for better performance
 const MemoizedTagList = memo(({
@@ -123,6 +128,8 @@ const WebPushCreate = ({
   accountData,
   webPush,
   onCreateComplete,
+  getFormData,
+  isGetFormData,
   templateData,
   creativesMode,
   params,
@@ -135,6 +142,8 @@ const WebPushCreate = ({
   forwardedTags,
   selectedOfferDetails = [],
   eventContextTags = [],
+  templateActions: templateActionsProps,
+  Templates,
 }) => {
   const { formatMessage } = intl;
 
@@ -152,7 +161,7 @@ const WebPushCreate = ({
     message: false,
   });
   const [brandIconOption, setBrandIconOption] = useState(BRAND_ICON_OPTIONS.DONT_SHOW);
-  const [onClickBehaviour, setOnClickBehaviour] = useState(ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE);
+  const [onClickBehaviour, setOnClickBehaviour] = useState(ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL);
   const [redirectUrl, setRedirectUrl] = useState('');
   const [redirectUrlError, setRedirectUrlError] = useState('');
   const [activeUploadField, setActiveUploadField] = useState(null);
@@ -213,6 +222,7 @@ const WebPushCreate = ({
     eventContextTags,
   });
   const { tags, handleOnTagsContextChange, validationConfig } = tagState;
+  const { weCrmAccounts } = Templates;
 
   // Edit mode detection: check creativesMode or presence of template ID
   const isEditMode = useMemo(
@@ -239,11 +249,22 @@ const WebPushCreate = ({
     templateData,
   ]);
 
+  const selectedWebPushAccount = useMemo(() => 
+    weCrmAccounts?.find(account => account?.id === accountId), 
+  [weCrmAccounts, accountId]);
+
   const websiteLink = useMemo(
-    () => accountData?.configs?.websiteLink || '',
-    [accountData?.configs?.websiteLink],
+    () => accountData?.configs?.websiteLink || selectedWebPushAccount?.configs?.websiteLink || '',
+    [accountData?.configs?.websiteLink, selectedWebPushAccount?.configs?.websiteLink],
   );
 
+  // Fetch account details when websiteLink is missing but accountId exists
+  useEffect(() => {
+    if (!websiteLink && accountId && templateActionsProps?.getWeCrmAccounts) {
+      templateActionsProps.getWeCrmAccounts('WebPush');
+    }
+  }, [websiteLink, accountId, templateActionsProps?.getWeCrmAccounts]);
+
   const previewUrl = useMemo(
     () => (
       onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL
@@ -255,7 +276,7 @@ const WebPushCreate = ({
 
   const onClickBehaviourOptions = useMemo(
     () => ([
-      { value: ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE, label: formatMessage(messages.openSite) },
+      { value: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL, label: formatMessage(messages.openSite) },
       { value: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL, label: formatMessage(messages.redirectToSpecificUrl) },
     ]),
     [formatMessage],
@@ -349,13 +370,13 @@ const WebPushCreate = ({
       setOnClickBehaviour(ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL);
       setRedirectUrl(onClickAction?.url || '');
       setRedirectUrlError('');
-    } else if (onClickAction?.type === ACTION_TYPES.OPEN_SITE) {
-      setOnClickBehaviour(ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE);
-      setRedirectUrl('');
+    } else if (onClickAction?.type === ACTION_TYPES.SITE_URL) {
+      setOnClickBehaviour(ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL);
+      setRedirectUrl(websiteLink);
       setRedirectUrlError('');
     } else {
-      setOnClickBehaviour(ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE);
-      setRedirectUrl('');
+      setOnClickBehaviour(ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL);
+      setRedirectUrl(websiteLink);
       setRedirectUrlError('');
     }
 
@@ -522,6 +543,15 @@ const WebPushCreate = ({
     });
   }, [isFullMode, templateName]);
 
+  // Pure validator that returns boolean without setting error state
+  const validateFormSilent = () => {
+    const templateNameInvalid = isFullMode && validateTemplateName(templateName);
+    const titleValidation = validateTitle(notificationTitle);
+    const messageValidation = validateMessageContent(message);
+
+    return !(templateNameInvalid || titleValidation || messageValidation);
+  };
+
   const isFormValid = () => {
     const templateNameInvalid = isFullMode && validateTemplateName(templateName);
     const titleValidation = validateTitle(notificationTitle);
@@ -558,8 +588,24 @@ const WebPushCreate = ({
       buttons,
       onClickBehaviour,
       redirectUrl,
+      websiteLink,
     });
 
+    // In library mode (not full mode), use getFormData to communicate with parent
+    if (!isFullMode && getFormData) {
+      const formDataForLibrary = {
+        validity: true,
+        value: payload,
+        type: WEBPUSH,
+      };
+      getFormData(formDataForLibrary);
+      if (handleClose) {
+        handleClose();
+      }
+      return;
+    }
+
+    // Full mode: proceed with API calls
     if (isEditMode) {
       // Get template ID from params or templateData
       const templateId = params?.id || templateData?._id;
@@ -649,6 +695,37 @@ const WebPushCreate = ({
     }
   }, [webPush?.editResponse, onCreateComplete, handleClose, isEditMode]);
 
+  // Handle getFormData request from parent (library mode)
+  useEffect(() => {
+    if (isGetFormData && getFormData && validateFormSilent()) {
+      const payload = createWebPushPayload({
+        templateName,
+        notificationTitle,
+        message,
+        mediaType,
+        accountId,
+        isFullMode,
+        imageSrc,
+        imageUrl,
+        imageUploadMethod: imageUpload?.uploadMethod,
+        brandIconOption,
+        brandIconSrc,
+        brandIconUrl,
+        buttons,
+        onClickBehaviour,
+        redirectUrl,
+        websiteLink,
+      });
+      const formDataForLibrary = {
+        validity: true,
+        value: payload,
+        type: WEBPUSH,
+      };
+      getFormData(formDataForLibrary);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isGetFormData, getFormData]);
+
   const isUploadingAsset = useMemo(
     () => webPush?.assetUploading || false,
     [webPush?.assetUploading],
@@ -872,7 +949,7 @@ const WebPushCreate = ({
     () => (!accountId ? formatMessage(messages.accountRequired) : ''),
     [accountId, formatMessage],
   );
-
+  
   return (
     <CapRow className="webpush-container">
       <CapColumn className="content-section" span={14}>
@@ -972,6 +1049,8 @@ WebPushCreate.propTypes = {
   accountData: PropTypes.object,
   webPush: PropTypes.object,
   onCreateComplete: PropTypes.func,
+  getFormData: PropTypes.func,
+  isGetFormData: PropTypes.bool,
   templateData: PropTypes.object,
   creativesMode: PropTypes.string,
   params: PropTypes.object,
@@ -984,6 +1063,7 @@ WebPushCreate.propTypes = {
   forwardedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  templateActions: PropTypes.object,
 };
 
 WebPushCreate.defaultProps = {
@@ -996,6 +1076,8 @@ WebPushCreate.defaultProps = {
   accountData: {},
   webPush: {},
   onCreateComplete: () => { },
+  getFormData: null,
+  isGetFormData: false,
   templateData: null,
   creativesMode: 'createTemplate',
   params: null,
@@ -1008,6 +1090,8 @@ WebPushCreate.defaultProps = {
   forwardedTags: {},
   selectedOfferDetails: [],
   eventContextTags: [],
+  templateActions: {},
+  Templates: {},
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1018,6 +1102,7 @@ const mapStateToProps = createStructuredSelector({
   editTemplateError: makeSelectEditError(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),
+  Templates: makeSelectTemplates(),
   accountData: createSelector(
     (state) => state.get('templates'),
     (templatesState) => {
@@ -1032,14 +1117,21 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   webPushActions: bindActionCreators(actions, dispatch),
+  templateActions: bindActionCreators(templateActions, dispatch),
 });
 
-const withSaga = injectSaga({
+const withWebPushSaga = injectSaga({
   key: 'webPush',
   saga: webPushSagas,
   mode: DAEMON,
 });
 
+const withTemplateSaga = injectSaga({
+  key: 'webPushTemplates',
+  saga: v2TemplateSaga,
+  mode: DAEMON,
+});
+
 const withReducer = injectReducer({
   key: 'webPush',
   reducer: webPushReducer,
@@ -1050,7 +1142,7 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-  sagas: [withSaga],
+  sagas: [withWebPushSaga, withTemplateSaga],
   reducers: [withReducer],
 });
 

package/v2Containers/WebPush/Create/preview/WebPushPreview.js

@@ -32,6 +32,7 @@ const WebPushPreview = ({
   imageSrc,
   brandIconSrc,
   buttons,
+  onClickShowInAllDevices,
 }) => {
   const [selectedOS, setSelectedOS] = useState(DEFAULT_OS);
   const [selectedBrowser, setSelectedBrowser] = useState(DEFAULT_BROWSER);
@@ -56,7 +57,11 @@ const WebPushPreview = ({
   }, [browserOptionsForOS, selectedBrowser]);
 
   const handleOpenPreviewSlideBox = () => {
-    setShowPreviewSlideBox(true);
+    if (onClickShowInAllDevices) {
+      onClickShowInAllDevices();
+    } else {
+      setShowPreviewSlideBox(true);
+    }
   };
 
   const handleClosePreviewSlideBox = () => {

package/v2Containers/WebPush/Create/preview/tests/WebPushPreview.test.js

@@ -809,6 +809,390 @@ describe('WebPushPreview', () => {
     });
   });
 
+  describe('handleOpenPreviewSlideBox', () => {
+    // Helper to get the slidebox show state
+    const getSlideBoxShowState = (wrapper) => {
+      const allSlideBoxes = wrapper.find(CapSlideBox);
+      for (let i = 0; i < allSlideBoxes.length; i++) {
+        try {
+          const reactNode = allSlideBoxes.get(i);
+          if (reactNode && reactNode.props && reactNode.props.className === 'webpush-preview-slidebox') {
+            return reactNode.props.show;
+          }
+        } catch (e) {
+          continue;
+        }
+      }
+      return null;
+    };
+
+    it('should call onClickShowInAllDevices when provided', () => {
+      const mockOnClickShowInAllDevices = jest.fn();
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={mockOnClickShowInAllDevices}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      expect(mockOnClickShowInAllDevices).not.toHaveBeenCalled();
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(1);
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledWith();
+    });
+
+    it('should not open slidebox when onClickShowInAllDevices is provided', () => {
+      const mockOnClickShowInAllDevices = jest.fn();
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={mockOnClickShowInAllDevices}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      // Slidebox should remain closed when onClickShowInAllDevices is provided
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(1);
+    });
+
+    it('should open slidebox when onClickShowInAllDevices is not provided', () => {
+      const wrapper = mountWithIntl(<WebPushPreview {...defaultProps} />);
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+    });
+
+    it('should handle multiple calls when onClickShowInAllDevices is provided', () => {
+      const mockOnClickShowInAllDevices = jest.fn();
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={mockOnClickShowInAllDevices}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(3);
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+    });
+
+    it('should handle multiple calls when onClickShowInAllDevices is not provided', () => {
+      const wrapper = mountWithIntl(<WebPushPreview {...defaultProps} />);
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      // First call - should open
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+      
+      // Second call - should remain open (state doesn't change)
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+      
+      // Third call - should remain open
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+    });
+
+    it('should handle onClickShowInAllDevices being undefined', () => {
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={undefined}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      // Should open slidebox when prop is undefined
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+    });
+
+    it('should handle onClickShowInAllDevices being null', () => {
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={null}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      // Should open slidebox when prop is null (falsy)
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+    });
+
+    it('should handle onClickShowInAllDevices being an empty function', () => {
+      const mockOnClickShowInAllDevices = jest.fn(() => {});
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={mockOnClickShowInAllDevices}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(1);
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+    });
+
+    it('should work correctly with slidebox close after opening without onClickShowInAllDevices', () => {
+      const wrapper = mountWithIntl(<WebPushPreview {...defaultProps} />);
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      // Open slidebox
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+      
+      // Close slidebox
+      const allSlideBoxes = wrapper.find(CapSlideBox);
+      let handleClose = null;
+      for (let i = 0; i < allSlideBoxes.length; i++) {
+        try {
+          const reactNode = allSlideBoxes.get(i);
+          if (reactNode && reactNode.props && reactNode.props.className === 'webpush-preview-slidebox') {
+            handleClose = reactNode.props.handleClose;
+            break;
+          }
+        } catch (e) {
+          continue;
+        }
+      }
+      
+      act(() => {
+        handleClose();
+      });
+      wrapper.update();
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      // Open again
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+    });
+
+    it('should handle onClickShowInAllDevices that throws an error gracefully', () => {
+      const mockOnClickShowInAllDevices = jest.fn(() => {
+        throw new Error('Test error');
+      });
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={mockOnClickShowInAllDevices}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      expect(() => {
+        act(() => {
+          button.prop('onClick')();
+        });
+      }).toThrow('Test error');
+      wrapper.update();
+      
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(1);
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      consoleErrorSpy.mockRestore();
+    });
+
+    it('should handle rapid clicks when onClickShowInAllDevices is provided', () => {
+      const mockOnClickShowInAllDevices = jest.fn();
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={mockOnClickShowInAllDevices}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      // Rapid clicks
+      act(() => {
+        button.prop('onClick')();
+        button.prop('onClick')();
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(3);
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+    });
+
+    it('should handle rapid clicks when onClickShowInAllDevices is not provided', () => {
+      const wrapper = mountWithIntl(<WebPushPreview {...defaultProps} />);
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      // Rapid clicks
+      act(() => {
+        button.prop('onClick')();
+        button.prop('onClick')();
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      
+      // Should be open after rapid clicks
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+    });
+
+    it('should maintain correct behavior when props change from provided to not provided', () => {
+      const mockOnClickShowInAllDevices = jest.fn();
+      const wrapper = mountWithIntl(
+        <WebPushPreview
+          {...defaultProps}
+          onClickShowInAllDevices={mockOnClickShowInAllDevices}
+        />
+      );
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      // First call with onClickShowInAllDevices provided
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(1);
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      // Remove onClickShowInAllDevices prop
+      act(() => {
+        wrapper.setProps({ onClickShowInAllDevices: undefined });
+      });
+      wrapper.update();
+      
+      // Get the button again after props change
+      const updatedButton = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      // Second call without onClickShowInAllDevices
+      act(() => {
+        updatedButton.prop('onClick')();
+      });
+      wrapper.update();
+      // The mock should still have been called only once (from the first call)
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(1);
+      expect(getSlideBoxShowState(wrapper)).toBe(true); // Should open slidebox
+    });
+
+    it('should maintain correct behavior when props change from not provided to provided', () => {
+      const wrapper = mountWithIntl(<WebPushPreview {...defaultProps} />);
+      const button = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      // First call without onClickShowInAllDevices
+      act(() => {
+        button.prop('onClick')();
+      });
+      wrapper.update();
+      expect(getSlideBoxShowState(wrapper)).toBe(true);
+      
+      // Close slidebox
+      const allSlideBoxes = wrapper.find(CapSlideBox);
+      let handleClose = null;
+      for (let i = 0; i < allSlideBoxes.length; i++) {
+        try {
+          const reactNode = allSlideBoxes.get(i);
+          if (reactNode && reactNode.props && reactNode.props.className === 'webpush-preview-slidebox') {
+            handleClose = reactNode.props.handleClose;
+            break;
+          }
+        } catch (e) {
+          continue;
+        }
+      }
+      
+      act(() => {
+        handleClose();
+      });
+      wrapper.update();
+      expect(getSlideBoxShowState(wrapper)).toBe(false);
+      
+      // Add onClickShowInAllDevices prop
+      const mockOnClickShowInAllDevices = jest.fn();
+      act(() => {
+        wrapper.setProps({ onClickShowInAllDevices: mockOnClickShowInAllDevices });
+      });
+      wrapper.update();
+      
+      // Get the button again after props change
+      const updatedButton = wrapper.find('[data-test-id="webpush-preview-toggle"]').first();
+      
+      // Second call with onClickShowInAllDevices
+      act(() => {
+        updatedButton.prop('onClick')();
+      });
+      wrapper.update();
+      expect(mockOnClickShowInAllDevices).toHaveBeenCalledTimes(1);
+      expect(getSlideBoxShowState(wrapper)).toBe(false); // Should not open slidebox
+    });
+  });
+
   describe('Component Integration', () => {
     it('should update all child components when OS changes', () => {
       const wrapper = mountWithIntl(<WebPushPreview {...defaultProps} />);

package/v2Containers/WebPush/Create/utils/payloadBuilder.js

@@ -28,6 +28,7 @@ export const createWebPushPayload = ({
   buttons,
   onClickBehaviour,
   redirectUrl,
+  websiteLink
 }) => {
   const trimmedTemplateName = (templateName || '').trim();
   const trimmedTitle = (notificationTitle || '').trim();
@@ -61,9 +62,10 @@ export const createWebPushPayload = ({
       type: ACTION_TYPES.URL,
       url: redirectUrl.trim(),
     };
-  } else if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE) {
+  } else if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL) {
     webpushContent.onClickAction = {
-      type: ACTION_TYPES.OPEN_SITE,
+      type: ACTION_TYPES.SITE_URL,
+      url: websiteLink,
     };
   }