@capillarytech/creatives-library 8.0.248 → 8.0.250

package/v2Containers/WebPush/Create/components/ButtonsLinksSection.test.js

@@ -98,9 +98,9 @@ describe('ButtonsLinksSection', () => {
   });
 
   const defaultProps = {
-    onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE,
+    onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL,
     onClickBehaviourOptions: [
-      { value: ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE, label: 'Open Site' },
+      { value: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL, label: 'Open Site' },
       { value: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL, label: 'Redirect to URL' },
     ],
     onClickBehaviourChange: mockOnClickBehaviourChange,
@@ -151,7 +151,7 @@ describe('ButtonsLinksSection', () => {
       const radioGroup = wrapper.find(CapRadioGroup);
       expect(radioGroup.exists()).toBe(true);
       expect(radioGroup.prop('options')).toEqual(defaultProps.onClickBehaviourOptions);
-      expect(radioGroup.prop('value')).toBe(ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE);
+      expect(radioGroup.prop('value')).toBe(ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL);
     });
   });
 
@@ -175,7 +175,7 @@ describe('ButtonsLinksSection', () => {
       expect(input.exists()).toBe(true);
     });
 
-    it('should not render redirect URL input when OPEN_SITE is selected', () => {
+    it('should not render redirect URL input when SITE_URL is selected', () => {
       const wrapper = mountWithIntl(<ButtonsLinksSection {...defaultProps} />);
       const input = wrapper.find(CapInput).find('#webpush-redirect-url-input');
       expect(input.exists()).toBe(false);

package/v2Containers/WebPush/Create/components/__snapshots__/ButtonsLinksSection.test.js.snap

@@ -32,7 +32,7 @@ exports[`ButtonsLinksSection Rendering should render correctly with default prop
         Array [
           Object {
             "label": "Open Site",
-            "value": "OPEN_SITE",
+            "value": "SITE_URL",
           },
           Object {
             "label": "Redirect to URL",
@@ -40,7 +40,7 @@ exports[`ButtonsLinksSection Rendering should render correctly with default prop
           },
         ]
       }
-      value="OPEN_SITE"
+      value="SITE_URL"
     />
   </CapRow>
   <CapRow

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 = () => {