@capillarytech/creatives-library 8.0.249 → 8.0.250-alpha.0

package/v2Containers/InAppWrapper/index.js

@@ -0,0 +1,148 @@
+/*
+ *
+ * InAppWrapper
+ *
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from 'react-intl';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import withCreatives from '../../hoc/withCreatives';
+import useInAppWrapper from './hooks/useInAppWrapper';
+import InAppWrapperView from './components/InAppWrapperView';
+import messages from './messages';
+import * as inAppActions from '../InApp/actions';
+const InAppWrapper = (props) => {
+  // Destructure props for clarity before passing to hook
+  const {
+    intl,
+    inAppEditorType,
+    step,
+    isFullMode,
+    onInAppEditorTypeChange,
+    showNextStep,
+    onResetStep,
+    setIsLoadingContent,
+    isGetFormData,
+    getFormdata,
+    type,
+    cap,
+    showTemplateName,
+    showLiquidErrorInFooter,
+    onValidationFail,
+    forwardedTags,
+    selectedOfferDetails,
+    onPreviewContentClicked,
+    onTestContentClicked,
+    eventContextTags,
+    onCreateComplete,
+    handleClose,
+    templateData,
+    getDefaultTags,
+    onEnterTemplateName,
+    onRemoveTemplateName,
+  } = props;
+
+  // Pass destructured props to the custom hook
+  const {
+    templateName,
+    isTemplateNameEmpty,
+    selectedEditorType,
+    modes,
+    isShowInAppCreate,
+    inAppProps,
+    onTemplateNameChange,
+    onChange,
+    handleEditorTypeSelection,
+  } = useInAppWrapper({
+    intl,
+    onInAppEditorTypeChange,
+    inAppEditorType,
+    step,
+    showNextStep,
+    onResetStep,
+    onEnterTemplateName,
+    onRemoveTemplateName,
+    setIsLoadingContent,
+    isGetFormData,
+    getFormdata,
+    type,
+    isFullMode,
+    cap,
+    showTemplateName,
+    showLiquidErrorInFooter,
+    onValidationFail,
+    forwardedTags,
+    selectedOfferDetails,
+    onPreviewContentClicked,
+    onTestContentClicked,
+    eventContextTags,
+    onCreateComplete,
+    handleClose,
+    templateData,
+    getDefaultTags,
+  });
+
+  // Render using the presentation component with data from the hook
+  return (
+    <InAppWrapperView
+      inAppEditorType={inAppEditorType}
+      step={step}
+      isFullMode={isFullMode}
+      templateName={templateName}
+      onTemplateNameChange={onTemplateNameChange}
+      isTemplateNameEmpty={isTemplateNameEmpty}
+      modes={modes}
+      onChange={onChange}
+      isShowInAppCreate={isShowInAppCreate}
+      inAppProps={inAppProps}
+      handleEditorTypeSelection={handleEditorTypeSelection}
+      templateNamePlaceholder={intl.formatMessage(messages.templateNamePlaceholder)}
+    />
+  );
+};
+
+InAppWrapper.propTypes = {
+  onInAppEditorTypeChange: PropTypes.func.isRequired,
+  isGetFormData: PropTypes.bool,
+  type: PropTypes.string,
+  inAppEditorType: PropTypes.string,
+  step: PropTypes.string,
+  showNextStep: PropTypes.func,
+  getFormdata: PropTypes.func,
+  intl: intlShape,
+  cap: PropTypes.object,
+  onResetStep: PropTypes.func,
+  isFullMode: PropTypes.bool,
+  setIsLoadingContent: PropTypes.func,
+  showTemplateName: PropTypes.func,
+  showLiquidErrorInFooter: PropTypes.func,
+  onValidationFail: PropTypes.func,
+  forwardedTags: PropTypes.object,
+  selectedOfferDetails: PropTypes.array,
+  onPreviewContentClicked: PropTypes.func,
+  onTestContentClicked: PropTypes.func,
+  eventContextTags: PropTypes.array,
+  onCreateComplete: PropTypes.func,
+  handleClose: PropTypes.func,
+  templateData: PropTypes.object,
+  getDefaultTags: PropTypes.string,
+  onEnterTemplateName: PropTypes.func,
+  onRemoveTemplateName: PropTypes.func,
+};
+
+const mapStateToProps = createStructuredSelector({
+  // Add selectors here if needed
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(inAppActions, dispatch),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(InAppWrapper),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/InAppWrapper/messages.js

@@ -0,0 +1,49 @@
+/*
+ * InAppWrapper Messages
+ *
+ * This contains all the text for the InAppWrapper component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.containersV2.InAppWrapper.header',
+    defaultMessage: 'Create In App Message',
+  },
+  htmlEditor: {
+    id: 'creatives.containersV2.InAppWrapper.htmlEditor',
+    defaultMessage: 'HTML editor',
+  },
+  htmlEditorDesc: {
+    id: 'creatives.containersV2.InAppWrapper.htmlEditorDesc',
+    defaultMessage: 'Use a basic HTML editor to write and format your content. Suitable if you\'re familiar with HTML.',
+  },
+  dragDropEditor: {
+    id: 'creatives.containersV2.InAppWrapper.dragDropEditor',
+    defaultMessage: 'Drag & drop editor',
+  },
+  dragDropEditorDesc: {
+    id: 'creatives.containersV2.InAppWrapper.dragDropEditorDesc',
+    defaultMessage: 'Create your content visually by dragging blocks - no coding needed. Great for quick, easy designs.',
+  },
+  creativeName: {
+    id: 'creatives.containersV2.InAppWrapper.creativeName',
+    defaultMessage: 'Creative name',
+  },
+  editorType: {
+    id: 'creatives.containersV2.InAppWrapper.editorType',
+    defaultMessage: 'Editor type',
+  },
+  emptyTemplateName: {
+    id: 'creatives.containersV2.InAppWrapper.emptyTemplateName',
+    defaultMessage: 'Please enter template name.',
+  },
+  next: {
+    id: 'creatives.containersV2.InAppWrapper.next',
+    defaultMessage: 'Next',
+  },
+  templateNamePlaceholder: {
+    id: 'creatives.containersV2.InAppWrapper.templateNamePlaceholder',
+    defaultMessage: 'Enter the template name',
+  },
+});