@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/utils/validation.test.js

@@ -0,0 +1,283 @@
+import {
+  validateTemplateName,
+  validateTitle,
+  validateUrl,
+  validateMessageContent,
+} from './validation';
+import { isValidHttpUrl } from './urlValidation';
+
+// Mock the urlValidation module
+jest.mock('./urlValidation', () => ({
+  isValidHttpUrl: jest.fn(),
+}));
+
+// Mock the tagValidations module
+jest.mock('../../../../utils/tagValidations', () => ({
+  validateTags: jest.fn(),
+}));
+
+// Mock the globalMessages
+jest.mock('../../../Cap/messages', () => ({
+  unsupportedTagsValidationError: {
+    defaultMessage: 'Unsupported tags: {unsupportedTags}',
+  },
+  unbalanacedCurlyBraces: {
+    defaultMessage: 'Unbalanced curly braces',
+  },
+}));
+
+import { validateTags } from '../../../../utils/tagValidations';
+import globalMessages from '../../../Cap/messages';
+
+describe('validation', () => {
+  let mockFormatMessage;
+  const mockMessages = {
+    titleRequired: {
+      defaultMessage: 'Title is required',
+    },
+    urlRequired: {
+      defaultMessage: 'URL is required',
+    },
+    urlInvalid: {
+      defaultMessage: 'URL is invalid',
+    },
+    messageRequired: {
+      defaultMessage: 'Message is required',
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockFormatMessage = jest.fn((message, values) => {
+      if (values) {
+        return message.defaultMessage.replace('{unsupportedTags}', values.unsupportedTags);
+      }
+      return message.defaultMessage || message;
+    });
+  });
+
+  describe('validateTemplateName', () => {
+    it('should return true for empty string', () => {
+      expect(validateTemplateName('')).toBe(true);
+    });
+
+    it('should return true for whitespace-only string', () => {
+      expect(validateTemplateName('   ')).toBe(true);
+    });
+
+    it('should return true for null', () => {
+      expect(validateTemplateName(null)).toBe(true);
+    });
+
+    it('should return true for undefined', () => {
+      expect(validateTemplateName(undefined)).toBe(true);
+    });
+
+    it('should return false for valid template name', () => {
+      expect(validateTemplateName('Valid Template Name')).toBe(false);
+    });
+
+    it('should return false for template name with leading/trailing spaces that has content', () => {
+      expect(validateTemplateName('  Valid Template  ')).toBe(false);
+    });
+  });
+
+  describe('validateTitle', () => {
+    it('should return error message for empty string', () => {
+      const result = validateTitle('', mockFormatMessage, mockMessages);
+      expect(result).toBe('Title is required');
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.titleRequired);
+    });
+
+    it('should return error message for whitespace-only string', () => {
+      const result = validateTitle('   ', mockFormatMessage, mockMessages);
+      expect(result).toBe('Title is required');
+    });
+
+    it('should return error message for null', () => {
+      const result = validateTitle(null, mockFormatMessage, mockMessages);
+      expect(result).toBe('Title is required');
+    });
+
+    it('should return error message for undefined', () => {
+      const result = validateTitle(undefined, mockFormatMessage, mockMessages);
+      expect(result).toBe('Title is required');
+    });
+
+    it('should return empty string for valid title', () => {
+      const result = validateTitle('Valid Title', mockFormatMessage, mockMessages);
+      expect(result).toBe('');
+    });
+
+    it('should return empty string for title with content after trimming', () => {
+      const result = validateTitle('  Valid Title  ', mockFormatMessage, mockMessages);
+      expect(result).toBe('');
+    });
+  });
+
+  describe('validateUrl', () => {
+    beforeEach(() => {
+      isValidHttpUrl.mockClear();
+    });
+
+    it('should return error message for empty string', () => {
+      const result = validateUrl('', mockFormatMessage, mockMessages);
+      expect(result).toBe('URL is required');
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.urlRequired);
+      expect(isValidHttpUrl).not.toHaveBeenCalled();
+    });
+
+    it('should return error message for whitespace-only string', () => {
+      const result = validateUrl('   ', mockFormatMessage, mockMessages);
+      expect(result).toBe('URL is required');
+    });
+
+    it('should return error message for null', () => {
+      const result = validateUrl(null, mockFormatMessage, mockMessages);
+      expect(result).toBe('URL is required');
+    });
+
+    it('should return error message for undefined', () => {
+      const result = validateUrl(undefined, mockFormatMessage, mockMessages);
+      expect(result).toBe('URL is required');
+    });
+
+    it('should return error message for invalid URL', () => {
+      isValidHttpUrl.mockReturnValue(false);
+      const result = validateUrl('not-a-url', mockFormatMessage, mockMessages);
+      expect(result).toBe('URL is invalid');
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.urlInvalid);
+      expect(isValidHttpUrl).toHaveBeenCalledWith('not-a-url');
+    });
+
+    it('should return empty string for valid URL', () => {
+      isValidHttpUrl.mockReturnValue(true);
+      const result = validateUrl('https://example.com', mockFormatMessage, mockMessages);
+      expect(result).toBe('');
+      expect(isValidHttpUrl).toHaveBeenCalledWith('https://example.com');
+    });
+
+    it('should pass URL with whitespace to isValidHttpUrl without trimming', () => {
+      isValidHttpUrl.mockReturnValue(true);
+      const result = validateUrl('  https://example.com  ', mockFormatMessage, mockMessages);
+      expect(result).toBe('');
+      // Contract: validateUrl delegates to isValidHttpUrl with original (untrimmed) value
+      expect(isValidHttpUrl).toHaveBeenCalledWith('  https://example.com  ');
+    });
+  });
+
+  describe('validateMessageContent', () => {
+    const mockValidationConfig = {
+      tagsParam: [],
+      injectedTagsParams: [],
+      location: {},
+      tagModule: '',
+      eventContextTags: [],
+    };
+
+    beforeEach(() => {
+      validateTags.mockClear();
+    });
+
+    it('should return error message for empty string', () => {
+      const result = validateMessageContent('', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Message is required');
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.messageRequired);
+      expect(validateTags).not.toHaveBeenCalled();
+    });
+
+    it('should return error message for whitespace-only string', () => {
+      const result = validateMessageContent('   ', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Message is required');
+    });
+
+    it('should return error message for null', () => {
+      const result = validateMessageContent(null, mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Message is required');
+    });
+
+    it('should return error message for undefined', () => {
+      const result = validateMessageContent(undefined, mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Message is required');
+    });
+
+    it('should return empty string for valid message without tags', () => {
+      validateTags.mockReturnValue({});
+      const result = validateMessageContent('Valid message', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('');
+      expect(validateTags).toHaveBeenCalledWith({
+        content: 'Valid message',
+        ...mockValidationConfig,
+      });
+    });
+
+    it('should return error message for unsupported tags', () => {
+      validateTags.mockReturnValue({
+        unsupportedTags: ['tag1', 'tag2'],
+      });
+      const result = validateMessageContent('Message with {tag1} and {tag2}', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Unsupported tags: tag1, tag2');
+      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unsupportedTagsValidationError, {
+        unsupportedTags: 'tag1, tag2',
+      });
+    });
+
+    it('should return error message for unbalanced curly braces', () => {
+      validateTags.mockReturnValue({
+        isBraceError: true,
+      });
+      const result = validateMessageContent('Message with {unclosed', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Unbalanced curly braces');
+      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unbalanacedCurlyBraces);
+    });
+
+    it('should return error message for both unsupported tags and brace error (unsupported tags takes precedence)', () => {
+      validateTags.mockReturnValue({
+        unsupportedTags: ['tag1'],
+        isBraceError: true,
+      });
+      const result = validateMessageContent('Message with {tag1}', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Unsupported tags: tag1');
+    });
+
+    it('should pass validation config to validateTags', () => {
+      const customConfig = {
+        tagsParam: [{ id: 1, name: 'Tag1' }],
+        injectedTagsParams: [{ id: 2, name: 'Tag2' }],
+        location: { query: { type: 'test' } },
+        tagModule: 'custom',
+        eventContextTags: [{ id: 3, name: 'Tag3' }],
+      };
+      validateTags.mockReturnValue({});
+      validateMessageContent('Valid message', mockFormatMessage, mockMessages, customConfig);
+      expect(validateTags).toHaveBeenCalledWith({
+        content: 'Valid message',
+        ...customConfig,
+      });
+    });
+
+    it('should handle validateTags returning null', () => {
+      validateTags.mockReturnValue(null);
+      const result = validateMessageContent('Valid message', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('');
+    });
+
+    it('should handle validateTags returning undefined', () => {
+      validateTags.mockReturnValue(undefined);
+      const result = validateMessageContent('Valid message', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('');
+    });
+
+    it('should pass message with whitespace to validateTags without trimming', () => {
+      validateTags.mockReturnValue({});
+      const result = validateMessageContent('  Valid message  ', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('');
+      // Contract: validateMessageContent delegates to validateTags with original (untrimmed) value
+      expect(validateTags).toHaveBeenCalledWith({
+        content: '  Valid message  ',
+        ...mockValidationConfig,
+      });
+    });
+  });
+});
+

package/v2Containers/WebPush/actions.js

@@ -0,0 +1,60 @@
+/*
+ *
+ * WebPush actions
+ *
+ */
+
+import * as types from './constants';
+
+export function createTemplate(template, callback, meta) {
+  return {
+    type: types.CREATE_TEMPLATE_REQUEST,
+    template,
+    callback,
+    meta,
+  };
+}
+
+export function clearCreateResponse() {
+  return {
+    type: types.CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+
+export function editTemplate(template, callback) {
+  return {
+    type: types.EDIT_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function clearEditResponse() {
+  return {
+    type: types.CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+}
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function uploadWebPushAsset(file, type, fileParams, templateType) {
+  return {
+    type: types.UPLOAD_WEBPUSH_ASSET_REQUEST,
+    file,
+    assetType: type,
+    fileParams,
+    templateType,
+  };
+}
+
+export function clearWebPushAsset(templateType) {
+  return {
+    type: types.CLEAR_WEBPUSH_ASSET,
+    templateType,
+  };
+}
+

package/v2Containers/WebPush/constants.js

@@ -0,0 +1,128 @@
+export const DEFAULT_ACTION = 'app/v2Containers/WebPush/DEFAULT_ACTION';
+
+export const CREATE_TEMPLATE_REQUEST = 'app/v2Containers/WebPush/Create/CREATE_TEMPLATE_REQUEST';
+export const CREATE_TEMPLATE_SUCCESS = 'app/v2Containers/WebPush/Create/CREATE_TEMPLATE_SUCCESS';
+export const CREATE_TEMPLATE_FAILURE = 'app/v2Containers/WebPush/Create/CREATE_TEMPLATE_FAILURE';
+
+export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/v2Containers/WebPush/Create/CLEAR_CREATE_RESPONSE_REQUEST';
+export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/v2Containers/WebPush/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
+export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/v2Containers/WebPush/Create/CLEAR_CREATE_RESPONSE_FAILURE';
+
+export const EDIT_TEMPLATE_REQUEST = 'app/v2Containers/WebPush/Edit/EDIT_TEMPLATE_REQUEST';
+export const EDIT_TEMPLATE_SUCCESS = 'app/v2Containers/WebPush/Edit/EDIT_TEMPLATE_SUCCESS';
+export const EDIT_TEMPLATE_FAILURE = 'app/v2Containers/WebPush/Edit/EDIT_TEMPLATE_FAILURE';
+
+export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/v2Containers/WebPush/Edit/CLEAR_EDIT_RESPONSE_REQUEST';
+export const CLEAR_EDIT_RESPONSE_SUCCESS = 'app/v2Containers/WebPush/Edit/CLEAR_EDIT_RESPONSE_SUCCESS';
+export const CLEAR_EDIT_RESPONSE_FAILURE = 'app/v2Containers/WebPush/Edit/CLEAR_EDIT_RESPONSE_FAILURE';
+
+// Media Types
+export const WEBPUSH_MEDIA_TYPES = {
+  NONE: "NONE",
+  IMAGE: "IMAGE",
+};
+
+export const WEBPUSH_MEDIA_TYPES_OPTIONS = [
+  { label: "None", value: WEBPUSH_MEDIA_TYPES.NONE },
+  { label: "Image", value: WEBPUSH_MEDIA_TYPES.IMAGE },
+];
+
+// Image Upload Constants
+export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
+export const WEBPUSH_IMG_SIZE = 5000000; // 5MB
+
+// Note: image width/height validation will be ignored for the web push channel inside CapImageUpload
+export const WEBPUSH_RECOMMENDED_DIMENSIONS = [
+  { width: 1440, height: 720 },
+  { width: 512, height: 256 },
+];
+
+// Brand Icon Options
+export const BRAND_ICON_OPTIONS = {
+  DONT_SHOW: 'DONT_SHOW',
+  UPLOAD_IMAGE: 'UPLOAD_IMAGE',
+  ADD_IMAGE_URL: 'ADD_IMAGE_URL',
+};
+
+// Brand Icon Upload Constants
+export const WEBPUSH_BRAND_ICON_SIZE = 1000000; // 1MB
+// Note: image width/height validation will be ignored for the web push channel inside CapImageUpload
+export const WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS = [
+  { width: 192, height: 192 },
+  { width: 256, height: 256 },
+];
+
+// Image Upload Methods
+export const IMAGE_UPLOAD_METHODS = {
+  UPLOAD_IMAGE: 'UPLOAD_IMAGE',
+  ADD_IMAGE_URL: 'ADD_IMAGE_URL',
+};
+
+// Upload Asset Actions
+const prefix = "app/v2Containers/WebPush";
+export const UPLOAD_WEBPUSH_ASSET_REQUEST = `${prefix}/UPLOAD_WEBPUSH_ASSET_REQUEST`;
+export const UPLOAD_WEBPUSH_ASSET_SUCCESS = `${prefix}/UPLOAD_WEBPUSH_ASSET_SUCCESS`;
+export const UPLOAD_WEBPUSH_ASSET_FAILURE = `${prefix}/UPLOAD_WEBPUSH_ASSET_FAILURE`;
+export const CLEAR_WEBPUSH_ASSET = `${prefix}/CLEAR_WEBPUSH_ASSET`;
+
+// Upload Field Identifiers
+export const UPLOAD_FIELD_TYPES = {
+  IMAGE: 'image',
+  BRAND_ICON: 'brandIcon',
+};
+
+// Button Types
+export const WEBPUSH_BUTTON_TYPES = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+};
+
+// OnClick Behaviour Options
+export const ON_CLICK_BEHAVIOUR_OPTIONS = {
+  OPEN_SITE: 'OPEN_SITE',
+  REDIRECT_TO_URL: 'REDIRECT_TO_URL',
+};
+
+// Action Types
+export const ACTION_TYPES = {
+  URL: 'URL',
+  OPEN_SITE: 'OPEN_SITE',
+};
+
+// WebPush Content Field Names
+// Field names used in template data structure (versions.base.content.webpush)
+export const WEBPUSH_CONTENT_FIELDS = {
+  TITLE: 'title',
+  MESSAGE: 'message',
+  IMAGE: 'image',
+  BRAND_ICON: 'brandIcon',
+  MEDIA_TYPE: 'mediaType',
+  ON_CLICK_ACTION: 'onClickAction',
+  CTAS: 'ctas',
+};
+
+// Template Data Path Constants
+export const WEBPUSH_TEMPLATE_PATHS = {
+  CONTENT: 'versions.base.content.webpush',
+  NAME: 'name',
+};
+
+// Character Count Configuration
+export const SHOW_CHARACTER_COUNT = true;
+
+// Maximum Character Limits for Web Push Fields
+export const NOTIFICATION_TITLE_MAX_LENGTH = 65;
+export const MESSAGE_MAX_LENGTH = 240;
+export const BUTTON_TEXT_MAX_LENGTH = 20;
+
+// URL Validation Constants
+export const SUPPORTED_PROTOCOLS = new Set(['http:', 'https:']);
+export const HTTP_URL_PATTERN = /^https?:\/\/.+/i;
+// Pattern to ensure URL has a TLD (Top Level Domain): protocol://domain.tld
+// Requires at least one dot in the domain part, followed by 2+ word characters
+// before path separator (/), query (?), hash (#), port (:), or end of string
+export const TLD_PATTERN = /^https?:\/\/[^/?#:]+\.\w{2,}(?:\/|$|\?|#|:)/i;
+
+// Utility Constants
+// Stable empty array to prevent unnecessary re-renders when used as default prop values
+export const EMPTY_ARRAY = [];

package/v2Containers/WebPush/index.js

@@ -0,0 +1,2 @@
+export { default } from './Create';
+

package/v2Containers/WebPush/reducer.js

@@ -0,0 +1,104 @@
+/*
+ *
+ * WebPush reducer
+ *
+ */
+
+import { fromJS } from "immutable";
+import * as types from "./constants";
+
+const initialState = fromJS({
+  createTemplateInProgress: false,
+  response: {},
+  createTemplateErrorMessage: "",
+  editTemplateInProgress: false,
+  editResponse: {},
+  editTemplateErrorMessage: "",
+  uploadedAssetData: {},
+  uploadAssetSuccess: false,
+  assetUploading: false,
+});
+
+export function webPushReducer(state = initialState, action) {
+  // Handle null or undefined action
+  if (!action || typeof action !== 'object') {
+    return state;
+  }
+
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    case types.CREATE_TEMPLATE_REQUEST:
+      return state
+        .set("createTemplateInProgress", true)
+        .set("createTemplateError", false)
+        .set("createTemplateErrorMessage", fromJS(""));
+    case types.CREATE_TEMPLATE_SUCCESS:
+      return state
+        .set("createTemplateInProgress", false)
+        .set("response", action.data)
+        .set(
+          "createTemplateError",
+          action.statusCode !== undefined && action.statusCode > 300
+        );
+    case types.CREATE_TEMPLATE_FAILURE:
+      return state
+        .set("createTemplateInProgress", false)
+        .set("createTemplateError", true)
+        .set("createTemplateErrorMessage", fromJS(action.error));
+    case types.CLEAR_CREATE_RESPONSE_REQUEST:
+      return state.set("response", {});
+    case types.EDIT_TEMPLATE_REQUEST:
+      return state
+        .set("editTemplateInProgress", true)
+        .set("editTemplateError", false)
+        .set("editTemplateErrorMessage", fromJS(""));
+    case types.EDIT_TEMPLATE_SUCCESS:
+      return state
+        .set("editTemplateInProgress", false)
+        .set("editResponse", action.data)
+        .set(
+          "editTemplateError",
+          action.statusCode !== undefined && action.statusCode > 300
+        );
+    case types.EDIT_TEMPLATE_FAILURE:
+      return state
+        .set("editTemplateInProgress", false)
+        .set("editTemplateError", true)
+        .set("editTemplateErrorMessage", fromJS(action.error || action.errorMsg || ""));
+    case types.CLEAR_EDIT_RESPONSE_REQUEST:
+      return state.set("editResponse", {});
+    case types.UPLOAD_WEBPUSH_ASSET_REQUEST:
+      return state.set("uploadAssetSuccess", false).set("assetUploading", true);
+    case types.UPLOAD_WEBPUSH_ASSET_SUCCESS:
+      return state
+        .set(
+          "uploadAssetSuccess",
+          action.statusCode !== undefined &&
+            action.statusCode !== "" &&
+            action.statusCode < 300,
+        )
+        .set("assetUploading", false)
+        .set(
+          action.templateType !== undefined
+            ? `uploadedAssetData${action.templateType}`
+            : "uploadedAssetData",
+          action.data,
+        );
+    case types.UPLOAD_WEBPUSH_ASSET_FAILURE:
+      return state
+        .set("uploadAssetSuccess", false)
+        .set("assetUploading", false);
+    case types.CLEAR_WEBPUSH_ASSET:
+      return state.delete(
+        action.templateType !== undefined
+          ? `uploadedAssetData${action.templateType}`
+          : "uploadedAssetData",
+      );
+    default:
+      return state;
+  }
+}
+
+export default webPushReducer;
+

package/v2Containers/WebPush/sagas.js

@@ -0,0 +1,119 @@
+import {
+  call, put, takeLatest, all,
+} from 'redux-saga/effects';
+import * as Api from '../../services/api';
+import * as types from './constants';
+
+export function* createTemplate({ template, callback, meta }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createWebPushTemplate, template);
+    if (result.status && result.status.code >= 400) {
+      errorMsg = result.message;
+      throw errorMsg;
+    }
+    if (result.message) {
+      errorMsg = result.message;
+    }
+    // Merge meta into response if provided
+    const responseWithMeta = meta ? { ...result.response, meta } : result.response;
+    if (callback) {
+      yield call(callback, responseWithMeta);
+    }
+    yield put({
+      type: types.CREATE_TEMPLATE_SUCCESS,
+      data: responseWithMeta,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
+  } catch (error) {
+    yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
+  }
+}
+
+export function* clearCreateResponse() {
+  yield put({ type: types.CLEAR_CREATE_RESPONSE_SUCCESS });
+}
+
+export function* editTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createWebPushTemplate, template);
+    if (result.status && result.status.code >= 400) {
+      errorMsg = result.message;
+      throw errorMsg;
+    }
+    if (result.message) {
+      errorMsg = result.message;
+    }
+    if (callback) {
+      callback(result.response, errorMsg);
+    }
+    yield put({
+      type: types.EDIT_TEMPLATE_SUCCESS,
+      data: result.response,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
+  } catch (error) {
+    yield put({ type: types.EDIT_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+
+export function* clearEditResponse() {
+  yield put({ type: types.CLEAR_EDIT_RESPONSE_SUCCESS });
+}
+
+export function* uploadWebPushAsset({ file, assetType, fileParams, templateType }) {
+  try {
+    const result = yield call(Api.uploadFile, {
+      file,
+      assetType,
+      fileParams,
+    });
+    yield put({
+      type: types.UPLOAD_WEBPUSH_ASSET_SUCCESS,
+      data: result?.response?.asset,
+      statusCode: result?.status?.code || '',
+      templateType,
+    });
+  } catch (error) {
+    yield put({ type: types.UPLOAD_WEBPUSH_ASSET_FAILURE, error });
+  }
+}
+
+export function* watchCreateTemplate() {
+  yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
+}
+
+export function* watchClearCreateResponse() {
+  yield takeLatest(types.CLEAR_CREATE_RESPONSE_REQUEST, clearCreateResponse);
+}
+
+export function* watchEditTemplate() {
+  yield takeLatest(types.EDIT_TEMPLATE_REQUEST, editTemplate);
+}
+
+export function* watchClearEditResponse() {
+  yield takeLatest(types.CLEAR_EDIT_RESPONSE_REQUEST, clearEditResponse);
+}
+
+export function* watchUploadWebPushAsset() {
+  yield takeLatest(
+    types.UPLOAD_WEBPUSH_ASSET_REQUEST,
+    uploadWebPushAsset,
+  );
+}
+
+export default function* webPushSagas() {
+  yield all([
+    watchCreateTemplate(),
+    watchClearCreateResponse(),
+    watchEditTemplate(),
+    watchClearEditResponse(),
+    watchUploadWebPushAsset(),
+  ]);
+}