@capillarytech/creatives-library 8.0.125 → 8.0.127-alpha.0

package/v2Containers/MobilePushNew/index.scss

@@ -0,0 +1,308 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.header-row {
+  margin-bottom: $CAP_SPACE_24;
+}
+
+.content-row {
+  display: flex;
+  gap: $CAP_SPACE_32;
+}
+
+.mobile-push-content {
+  gap: $CAP_SPACE_24;
+}
+
+.preview-section {
+  background: #fff;
+  border-radius: $CAP_SPACE_08;
+  padding: $CAP_SPACE_24;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 37.5rem;
+}
+
+.form-section {
+  padding: $CAP_SPACE_24;
+  background: #fff;
+  border-radius: $CAP_SPACE_08;
+}
+
+.creative-name-section {
+  margin-bottom: $CAP_SPACE_24;
+}
+
+.platform-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $CAP_SPACE_24;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: $CAP_SPACE_16;
+}
+
+.platform-header .platform-tabs {
+  flex: 1;
+}
+
+// .platform-header {
+//   margin-left: 24px;
+// }
+
+.tab-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.android-icon,
+.ios-icon {
+  width: $CAP_SPACE_20;
+  height: $CAP_SPACE_20;
+  background-size: contain;
+}
+
+.same-content-checkbox {
+  position: absolute;
+  right: 0;
+  margin-top: $CAP_SPACE_12;
+}
+
+.input-section {
+  display: flex;
+  flex-direction: column;
+  gap: $CAP_SPACE_24;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: $CAP_SPACE_16;
+}
+
+.creatives-mpush-title,
+.creatives-mpush-message {
+  display: flex;
+  flex-direction: column;
+  gap: $CAP_SPACE_08;
+}
+
+.mpush-title-main,
+.mpush-message-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mpush-title,
+.mpush-message,
+.mpush-media-type {
+  font-weight: 500;
+  color: #333;
+  margin: 0;
+}
+
+.add-labels,
+#add-primary-button,
+#add-secondary-button {
+  color: #1890ff;
+  font-size: 14px;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.add-labels:hover,
+#add-primary-button:hover,
+#add-secondary-button:hover {
+  color: #40a9ff;
+}
+
+.button-form {
+  margin-top: $CAP_SPACE_16;
+  padding: $CAP_SPACE_16;
+  border: 1px solid #e8e8e8;
+  border-radius: $CAP_SPACE_04;
+  background: #fafafa;
+}
+
+.button-form .cap-input,
+.button-form .cap-select {
+  margin-bottom: $CAP_SPACE_16;
+}
+
+.button-form .button-actions {
+  display: flex;
+  gap: $CAP_SPACE_08;
+  justify-content: flex-end;
+  margin-top: $CAP_SPACE_24;
+}
+
+.optional-text {
+  color: #8c8c8c;
+  font-size: 14px;
+  margin-left: $CAP_SPACE_08;
+  font-weight: normal;
+}
+
+.action-description {
+  color: #8c8c8c;
+  font-size: 14px;
+  margin-top: $CAP_SPACE_04;
+  margin-bottom: $CAP_SPACE_16;
+}
+
+.buttons-heading {
+  margin-bottom: $CAP_SPACE_12;
+  margin-top: $CAP_SPACE_16;
+}
+
+.helper-text {
+  color: #8c8c8c;
+  font-size: 14px;
+  margin-top: $CAP_SPACE_08;
+}
+
+.button-group {
+  display: flex;
+  gap: $CAP_SPACE_16;
+  margin-top: $CAP_SPACE_32;
+}
+
+.phone-time {
+  text-align: center;
+  font-size: 14px;
+  color: #333;
+  margin-bottom: $CAP_SPACE_16;
+}
+
+.notification-preview {
+  background: #f8f8f8;
+  padding: $CAP_SPACE_16;
+  border-radius: $CAP_SPACE_08;
+}
+
+.notification-title {
+  font-weight: 500;
+  margin-bottom: $CAP_SPACE_08;
+  color: #333;
+}
+
+.notification-body {
+  color: #666;
+  font-size: 14px;
+}
+
+.mpush-actions-main {
+  display: flex;
+  margin-bottom: 0.9375rem;
+}
+
+.optional-text {
+  padding-top: $CAP_SPACE_03;
+  padding-left: 0.625rem;
+}
+
+.action-on-click-checkbox {
+  margin-left: -3px;
+  margin-top: $CAP_SPACE_02;
+}
+
+.action-description {
+  margin-left: 2.438rem;
+}
+
+#add-primary-btn-heading #add-secondary-btn-heading {
+  font-weight: 500;
+  color: #1890ff;
+}
+
+/* Carousel Styles */
+.carousel-media-selection {
+  display: flex;
+  align-items: center;
+  .carousel-media-selection-heading {
+    margin-right: 20px;
+  }
+}
+
+.carousel-radio-wrapper {
+  padding-top: 24px;
+  padding-bottom: 16px;
+}
+
+.mobile-push-carousel-tab {
+  max-width: 39.063rem;
+  .ant-tabs-extra-content {
+    padding: 0;
+    line-height: normal;
+    .add-carousel-content-button {
+      padding: 0.642rem 0px;
+      margin: 0;
+    }
+    .cap-divider-v2{
+      height: 1.5rem;
+      margin-bottom: 0.499rem;
+    }
+  }
+  .ant-tabs-tabpane {
+    min-height: unset;
+  }
+}
+
+.mobile-push-carousel-card {
+  .ant-card-head {
+    border-bottom: none;
+  }
+  .ant-card-body {
+    padding-top: 0px;
+  }
+  .ant-card-head-wrapper {
+    .ant-card-extra {
+      .cap-button-v2 {
+        padding: 0px;
+      }
+    }
+  }
+}
+
+.mobile-push-carousel-message-heading {
+  margin-top: 24px;
+}
+
+.mobile-push-media-radio>label.ant-radio-wrapper {
+  margin-right: 50px;
+}
+
+.mobile-push-create-template-message-input-wrapper {
+  position: relative;
+}
+
+.cap-custom-image-upload {
+  .dragger-button.re-upload {
+    top: -175px;
+    position: relative;
+    left: 525px;
+    color: #666;
+  }
+}
+
+.cap-custom-video-upload {
+  padding-top: 20px;
+  .dragger-button.re-upload {
+    top: -175px;
+    position: relative;
+    left: 525px;
+    color: #666;
+  }
+}
+
+.note-message-container {
+  display: flex;
+  align-items: center;
+}

package/v2Containers/MobilePushNew/messages.js

@@ -0,0 +1,226 @@
+import { defineMessages } from 'react-intl';
+
+const scope = 'creatives.containersV2.MobilePushNew';
+
+export default defineMessages({
+  imageErrorMessage: {
+    id: `${scope}.imageErrorMessage`,
+    defaultMessage: 'Please upload the image with allowed file extension, size, dimension and aspect ratio',
+  },
+  saveTemplate: {
+    id: `${scope}.saveTemplate`,
+    defaultMessage: 'Save Template',
+  },
+  creativeName: {
+    id: `${scope}.creativeName`,
+    defaultMessage: 'Creative name',
+  },
+  creativeNamePlaceholder: {
+    id: `${scope}.creativeNamePlaceholder`,
+    defaultMessage: 'Enter creative name',
+  },
+  android: {
+    id: `${scope}.android`,
+    defaultMessage: 'Android',
+  },
+  ios: {
+    id: `${scope}.ios`,
+    defaultMessage: 'iOS',
+  },
+  title: {
+    id: `${scope}.title`,
+    defaultMessage: 'Title',
+  },
+  titlePlaceholder: {
+    id: `${scope}.titlePlaceholder`,
+    defaultMessage: 'Enter title',
+  },
+  addLabels: {
+    id: `${scope}.addLabels`,
+    defaultMessage: 'Add labels',
+  },
+  message: {
+    id: `${scope}.message`,
+    defaultMessage: 'Message',
+  },
+  messagePlaceholder: {
+    id: `${scope}.contentPlaceholder`,
+    defaultMessage: 'Enter message',
+  },
+  mediaType: {
+    id: `${scope}.mediaType`,
+    defaultMessage: 'Media type',
+  },
+  buttonsAndLinks: {
+    id: `${scope}.buttonsAndLinks`,
+    defaultMessage: 'Buttons and links',
+  },
+  optionalText: {
+    id: `${scope}.optionalText`,
+    defaultMessage: '(Optional)',
+  },
+  actionOnClick: {
+    id: `${scope}.actionOnClick`,
+    defaultMessage: 'Action on click of notification body',
+  },
+  helperText: {
+    id: `${scope}.helperText`,
+    defaultMessage: 'Define where the users will redirect when they click on the body of the push notification',
+  },
+  done: {
+    id: `${scope}.done`,
+    defaultMessage: 'Done',
+  },
+  previewAndTest: {
+    id: `${scope}.previewAndTest`,
+    defaultMessage: 'Preview and Test',
+  },
+  addPrimaryButton: {
+    id: `${scope}.addPrimaryButton`,
+    defaultMessage: 'Add primary button',
+  },
+  emptyTemplateDescErrorMessage: {
+    id: `${scope}.emptyTemplateDescErrorMessage`,
+    defaultMessage: 'Template message cannot be empty',
+  },
+  selectMediaType: {
+    id: `${scope}.selectMediaType`,
+    defaultMessage: 'None',
+  },
+  actionOnClickBody: {
+    id: `${scope}.actionOnClickBody`,
+    defaultMessage: 'Action on click of notification body',
+  },
+  actionDescription: {
+    id: `${scope}.actionDescription`,
+    defaultMessage: 'Define where the users will redirect when they click on the body of the push notification',
+  },
+  buttons: {
+    id: `${scope}.buttons`,
+    defaultMessage: 'Buttons',
+  },
+  linkType: {
+    id: 'app.containers.MobilePushNew.linkType',
+    defaultMessage: 'Link Type',
+  },
+  selectDeepLink: {
+    id: `${scope}.selectDeepLink`,
+    defaultMessage: 'Select deep link',
+  },
+  deepLink: {
+    id: 'app.containers.MobilePushNew.deepLink',
+    defaultMessage: 'Deep Link',
+  },
+  externalLink: {
+    id: 'app.containers.MobilePushNew.externalLink',
+    defaultMessage: 'External Link',
+  },
+  enterExternalLink: {
+    id: `${scope}.enterExternalLink`,
+    defaultMessage: 'Enter external link',
+  },
+  invalidUrl: {
+    id: `${scope}.invalidUrl`,
+    defaultMessage: 'Please enter a valid URL',
+  },
+  invalidButtonText: {
+    id: `${scope}.invalidButtonText`,
+    defaultMessage: 'Button text cannot be empty or contain only whitespace',
+  },
+  addSecondaryButton: {
+    id: `${scope}.addSecondaryButton`,
+    defaultMessage: 'Add secondary button',
+  },
+  videoErrorMessage: {
+    id: `${scope}.videoErrorMessage`,
+    defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
+  },
+  gifErrorMessage: {
+    id: `${scope}.gifErrorMessage`,
+    defaultMessage: 'Please upload the gif with allowed file extension, size, dimension and aspect ratio',
+  },
+  primaryButtonText: {
+    id: `${scope}.primaryButtonText`,
+    defaultMessage: 'Primary button text',
+  },
+  secondaryButtonText: {
+    id: `${scope}.secondaryButtonText`,
+    defaultMessage: 'Secondary button text',
+  },
+  enterButtonText: {
+    id: `${scope}.enterButtonText`,
+    defaultMessage: 'Enter button text',
+  },
+  ctaSaveDisabled: {
+    id: `${scope}.ctaSaveDisabled`,
+    defaultMessage: 'Please complete the above fields to enable button',
+  },
+  actionLink: {
+    id: `${scope}.actionLink`,
+    defaultMessage: 'Action Link',
+  },
+  emptyTemplateErrorMessage: {
+    id: `${scope}.emptyTemplateErrorMessage`,
+    defaultMessage: 'Template name cannot be empty',
+  },
+  messageCreateSuccess: {
+    id: `${scope}.messageCreateSuccess`,
+    defaultMessage: 'Mobile push template created successfully',
+  },
+  messageEditSuccess: {
+    id: `${scope}.messageEditSuccess`,
+    defaultMessage: 'Mobile push template updated successfully',
+  },
+  somethingWentWrong: {
+    id: `${scope}.somethingWentWrong`,
+    defaultMessage: 'Something went wrong!!',
+  },
+  validationLoadingMessage: {
+    id: `${scope}.validationLoadingMessage`,
+    defaultMessage: 'Please wait while we validate the template',
+  },
+  androidValidationError: {
+    id: `${scope}.androidValidationError`,
+    defaultMessage: 'Please fill in title and message for Android',
+  },
+  iosValidationError: {
+    id: `${scope}.iosValidationError`,
+    defaultMessage: 'Please fill in title and message for iOS',
+  },
+  carouselMediaType: {
+    id: `${scope}.carouselMediaType`,
+    defaultMessage: 'Carousel media Type',
+  },
+  mediaImage: {
+    id: `${scope}.mediaImage`,
+    defaultMessage: 'Image',
+  },
+  mediaVideo: {
+    id: `${scope}.mediaVideo`,
+    defaultMessage: 'Video',
+  },
+  card: {
+    id: `${scope}.card`,
+    defaultMessage: 'Card',
+  },
+  addCard: {
+    id: `${scope}.addCard`,
+    defaultMessage: 'Add Card',
+  },
+  templateCreateSuccess: {
+    id: `${scope}.templateCreateSuccess`,
+    defaultMessage: 'Mobile push template created successfully',
+  },
+  templateUpdateSuccess: {
+    id: `${scope}.templateUpdateSuccess`,
+    defaultMessage: 'Mobile push template updated successfully',
+  },
+  sameContentForBothChannels: {
+    id: `${scope}.sameContentForBothChannels`,
+    defaultMessage: 'Same content for both channels',
+  },
+  sameContentNote: {
+    id: `${scope}.sameContentNote`,
+    defaultMessage: 'Edits in one tab are automatically synced to other',
+  },
+});

package/v2Containers/MobilePushNew/reducer.js

@@ -0,0 +1,160 @@
+/*
+ *
+ * Create & Edit reducer
+ *
+ */
+
+import { fromJS } from "immutable";
+import * as types from "./constants";
+
+const initialState = fromJS({
+  createTemplateInProgress: false,
+  response: {},
+  editTemplateInProgress: false,
+  editResponse: {},
+  getTemplateDetailsInProgress: false,
+  templateDetails: {},
+  createTemplateErrorMessage: "",
+});
+
+export function mobilePushReducer(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.UPLOAD_ASSET_REQUEST:
+      return state.set("uploadAssetSuccess", false).set("assetUploading", true);
+    case types.UPLOAD_ASSET_SUCCESS:
+      return state
+        .set(
+          "uploadAssetSuccess",
+          action.statusCode !== undefined
+            && action.statusCode !== ""
+            && action.statusCode < 300
+        )
+        .set("assetUploading", false)
+        .set(action.index !== undefined ? `uploadedAssetData${action.index}` : "uploadedAssetData", action.data);
+    case types.UPLOAD_ASSET_FAILURE:
+      return state
+        .set("uploadAssetSuccess", false)
+        .set("assetUploading", false);
+    case types.CLEAR_ASSET:
+      return action.index !== undefined 
+        ? state.delete(`uploadedAssetData${action.index}`)
+        : state.delete("uploadedAssetData");
+    case types.GET_IOS_CTAS:
+      return state.set("getIosCtasSucccess", false).set("iosCtasLoading", true);
+    case types.GET_IOS_CTAS_SUCCESS:
+      return state
+        .set(
+          "getIosCtasSucccess",
+          action.statusCode !== undefined
+            && action.statusCode !== ""
+            && action.statusCode < 300
+        )
+        .set("iosCtasLoading", false)
+        .set("iosCtasData", action.data);
+    case types.GET_IOS_CTAS_FAILURE:
+      return state
+        .set("getIosCtasSucccess", false)
+        .set("iosCtasLoading", false);
+    case types.RESET_STORE:
+      return state
+        .delete("uploadedAssetData")
+        .delete("uploadedAssetData0")
+        .delete("uploadedAssetData1")
+        .delete("iosCtasData");
+    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
+        )
+        .set("editTemplateErrorMessage", fromJS(action.errorMsg));
+    case types.EDIT_TEMPLATE_FAILURE:
+      return state
+        .set("editTemplateInProgress", false)
+        .set("editTemplateError", true)
+        .set("editTemplateErrorMessage", fromJS(action.errorMsg));
+    case types.GET_TEMPLATE_DETAILS_REQUEST:
+      return state.set("getTemplateDetailsInProgress", true);
+    case types.GET_TEMPLATE_DETAILS_SUCCESS:
+    case types.SET_SELECTED_TEMPLATE:
+      return state
+        .set("getTemplateDetailsInProgress", false)
+        .set("templateDetails", action.data);
+    case types.GET_TEMPLATE_DETAILS_FAILURE:
+      return state.set("getTemplateDetailsInProgress", false);
+    case types.CLEAR_EDIT_RESPONSE_REQUEST:
+      return state.set("editResponse", {});
+    case types.CLEAR_DATA:
+      return state
+        .delete("uploadedAssetData")
+        .delete("uploadedAssetData0")
+        .delete("uploadedAssetData1")
+        .delete("metaEntities")
+        .delete("templateDetails")
+        .delete("iosCtasData");
+    case types.GET_WECRM_ACCOUNTS_REQUEST:
+      return state
+        .set("fetchingWeCrmAccounts", true)
+        .set("weCrmAccountFetchingError", false);
+    case types.GET_WECRM_ACCOUNTS_SUCCESS:
+      return state
+        .set("fetchingWeCrmAccounts", false)
+        .set("weCrmAccounts", fromJS(action.data));
+    case types.GET_WECRM_ACCOUNTS_FAILURE:
+      return state
+        .set("fetchingWeCrmAccounts", false)
+        .set("weCrmAccountFetchingError", true);
+    case types.SET_WECHAT_ACCOUNT:
+      return state
+        .set("selectedWeChatAccount", fromJS(action.weChatAccount))
+        .delete("mobilepushTemplates");
+    case types.GET_MOBILEPUSH_TEMPLATES_LIST_REQUEST:
+      return state.set("fetchingDefaultTemplates", true);
+    case types.GET_MOBILEPUSH_TEMPLATES_LIST_SUCCESS:
+      return state
+        .set("fetchingDefaultTemplates", false)
+        .set("mobilepushTemplates", fromJS(action.data));
+    case types.GET_MOBILEPUSH_TEMPLATES_LIST_FAILURE:
+      return state
+        .set("fetchingDefaultTemplates", false)
+        .set("errorFetchingDefaultTempalte", true);
+    default:
+      return state;
+  }
+}
+
+export default mobilePushReducer;