sag_components 1.0.950 → 1.0.951

package/dist/stories/components/Popup/Popup.stories.js

@@ -0,0 +1,704 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExamplePopup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Popup = _interopRequireDefault(require("./Popup"));
+/// /////////////////////////////////////////////// OFFER DETAILS DATA - START /////////////////////////////////////////////
+const FieldsDataRow1OfferDetails = [{
+  name: 'FundationSource',
+  label: 'Fundation Source',
+  disabled: false,
+  required: true,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Source',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Source 1'
+  }, {
+    value: 2,
+    label: 'Source 2'
+  }, {
+    value: 3,
+    label: 'Source 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'Category',
+  label: 'Category',
+  disabled: false,
+  required: true,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Category',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Category 1'
+  }, {
+    value: 2,
+    label: 'Category 2'
+  }, {
+    value: 3,
+    label: 'Category 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'Supplier',
+  label: 'Supplier',
+  disabled: false,
+  required: true,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Supplier',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Supplier 1'
+  }, {
+    value: 2,
+    label: 'Supplier 2'
+  }, {
+    value: 3,
+    label: 'Supplier 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'ContactName',
+  label: 'Contact Name',
+  disabled: false,
+  required: true,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Contact Name',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2OfferDetails = [{
+  name: 'BrandName',
+  label: 'Brand Name',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Brand',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Brand 1'
+  }, {
+    value: 2,
+    label: 'Brand 2'
+  }, {
+    value: 3,
+    label: 'Brand 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'Budget',
+  label: 'Budget',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Budget',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Budget 1'
+  }, {
+    value: 2,
+    label: 'Budget 2'
+  }, {
+    value: 3,
+    label: 'Budget 3'
+  }],
+  dropdownDefaultValue: {
+    value: 1,
+    label: 'Budget 1'
+  }
+}, {
+  name: 'CategoryManager',
+  label: 'Category Manager',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Category Manager',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Category Manager 1'
+  }, {
+    value: 2,
+    label: 'Category Manager 2'
+  }, {
+    value: 3,
+    label: 'Category Manager 3'
+  }],
+  dropdownDefaultValue: {
+    value: 3,
+    label: 'Category Manager 3'
+  }
+}, {
+  name: 'ContactEmail',
+  label: 'Contact Email',
+  disabled: false,
+  required: true,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Contact Email',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3OfferDetails = [{
+  name: 'Broker',
+  label: 'Broker',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Broker',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Broker 1'
+  }, {
+    value: 2,
+    label: 'Broker 2'
+  }, {
+    value: 3,
+    label: 'Broker 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'SupplierOfferID',
+  label: 'Supplier Offer ID',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Supplier Offer ID',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'VendorID',
+  label: 'Vendor ID',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Vendor ID',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'ContactPhone',
+  label: 'Contact Phone',
+  disabled: false,
+  required: true,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Contact Phone',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsDataOfferDetails = [{
+  fieldsArray: FieldsDataRow1OfferDetails
+}, {
+  fieldsArray: FieldsDataRow2OfferDetails
+}, {
+  fieldsArray: FieldsDataRow3OfferDetails
+}];
+/// /////////////////////////////////////////////// OFFER DETAILS DATA - END /////////////////////////////////////////////
+
+/// /////////////////////////////////////////////// TARGETING DATA - START /////////////////////////////////////////////
+const FieldsDataRow1Targeting = [{
+  name: 'TargetAudienceType',
+  label: 'Target Audience Type',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Audience Type',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Audience Type 1'
+  }, {
+    value: 2,
+    label: 'Audience Type 2'
+  }, {
+    value: 3,
+    label: 'Audience Type 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'MaxIssuances',
+  label: 'Max Issuances',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Max Issuances',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'RedemptionID',
+  label: 'Redemption ID',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Redemption ID',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2Targeting = [{
+  name: 'AllowInStoreGroups',
+  label: 'Allow In Store Groups',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Total'
+  }, {
+    value: 2,
+    label: 'In Store'
+  }, {
+    value: 3,
+    label: 'Online'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'BlockInStoreGroups',
+  label: 'Block In Store Groups',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Total'
+  }, {
+    value: 2,
+    label: 'In Store'
+  }, {
+    value: 3,
+    label: 'Online'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'ConsiderStoreAvailability',
+  label: 'Consider Store Availability',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select',
+  dropdownOptions: [{
+    value: 1,
+    label: 'YES'
+  }, {
+    value: 2,
+    label: 'NO'
+  }],
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3Targeting = [{
+  name: 'TargetingNotes',
+  label: 'Targeting Notes',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Note',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsDataTargeting = [{
+  fieldsArray: FieldsDataRow1Targeting
+}, {
+  fieldsArray: FieldsDataRow2Targeting
+}, {
+  fieldsArray: FieldsDataRow3Targeting
+}];
+/// /////////////////////////////////////////////// TARGETING DATA - END /////////////////////////////////////////////
+
+/// /////////////////////////////////////////////// MORE DATA - START /////////////////////////////////////////////
+const FieldsDataRow1More = [{
+  name: 'SummaryPodHeader)',
+  label: 'Summary (Pod Header)',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Summary (Pod Header)',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'CategoryLevel1',
+  label: 'Category Level 1',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Category Level 1 1'
+  }, {
+    value: 2,
+    label: 'Category Level 1 2'
+  }, {
+    value: 3,
+    label: 'Category Level 1 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'ConditionMinQuantityPurchased',
+  label: 'Condition-Min Quantity Purchased',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Condition-Min Quantity Purchased',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2More = [{
+  name: 'BrandDescription',
+  label: 'Brand Description',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Brand Description',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'StartDatetimePDN',
+  label: 'Start Datetime PDN',
+  disabled: false,
+  required: false,
+  inputType: 'datepicker',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'MM/DD/YYYY',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'ConditionMinBasketValue',
+  label: 'Condition-Min Basket Value',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Condition-Min Basket Value',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3More = [{
+  name: 'DescriptionLowCase',
+  label: 'Description lowCase',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Description lowCase 1'
+  }, {
+    value: 2,
+    label: 'Description lowCase 2'
+  }, {
+    value: 3,
+    label: 'Description lowCase 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'ShutoffDatetimePDN',
+  label: 'Shutoff Datetime PDN',
+  disabled: false,
+  required: false,
+  inputType: 'datepicker',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'MM/DD/YYYY',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'ShutoffDatetimePDN2',
+  label: 'Shutoff Datetime PDN2',
+  disabled: false,
+  required: false,
+  inputType: 'datepicker',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'MM/DD/YYYY',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow4More = [{
+  name: 'DiscountType',
+  label: 'Discount Type',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Discount Type',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Discount Type 1'
+  }, {
+    value: 2,
+    label: 'Discount Type 2'
+  }, {
+    value: 3,
+    label: 'Discount Type 3'
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: 'ExpirationDatetimePDN',
+  label: 'Expiration Datetime PDN',
+  disabled: false,
+  required: false,
+  inputType: 'datepicker',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'MM/DD/YYYY',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'TypeReward',
+  label: 'Type (Reward)',
+  disabled: false,
+  required: false,
+  inputType: 'dropdown',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Select Type',
+  dropdownOptions: [{
+    value: 1,
+    label: 'Type 1'
+  }, {
+    value: 2,
+    label: 'Type 2'
+  }, {
+    value: 3,
+    label: 'Type 3'
+  }],
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow5More = [{
+  name: 'RewardQuantity',
+  label: 'Reward Quantity',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Reward Quantity',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'PurchaseOrderPDN',
+  label: 'Purchase Order PDN',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Purchase Order PDN',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'PurchaseOrder',
+  label: 'Purchase Order',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Purchase Order',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow6More = [{
+  name: 'OfferInventory',
+  label: 'Offer Inventory',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Offer Inventory',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'Image',
+  label: 'Image',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Add Image',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: 'MaxTransactions',
+  label: 'Max Transactions',
+  disabled: false,
+  required: false,
+  inputType: 'textbox',
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: 'Enter Max Transactions',
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsDataMore = [{
+  fieldsArray: FieldsDataRow1More
+}, {
+  fieldsArray: FieldsDataRow2More
+}, {
+  fieldsArray: FieldsDataRow3More
+}, {
+  fieldsArray: FieldsDataRow4More
+}, {
+  fieldsArray: FieldsDataRow5More
+}, {
+  fieldsArray: FieldsDataRow6More
+}];
+/// /////////////////////////////////////////////// MORE DATA - END /////////////////////////////////////////////
+
+const popupItemsData1 = [{
+  title: 'Offer Details',
+  rowsData: RowsDataOfferDetails
+}, {
+  title: 'Campaigns',
+  rowsData: []
+}, {
+  title: 'Products',
+  rowsData: []
+}, {
+  title: 'Targeting',
+  rowsData: RowsDataTargeting
+}, {
+  title: 'More',
+  rowsData: RowsDataMore
+}];
+var _default = exports.default = {
+  title: 'Sag Campaign Tool/Popup',
+  component: _Popup.default,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      name: 'title',
+      control: {
+        type: 'text'
+      },
+      description: 'title'
+    },
+    isPopupOpen: {
+      name: 'isPopupOpen',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - open or close popup'
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the form'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the form'
+    },
+    borderColor: {
+      name: 'borderColor',
+      description: 'Sets the border color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    subtitleTextColor: {
+      name: 'subtitleTextColor',
+      description: 'Sets the subtitle Text Color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    onSaveClick: {
+      name: 'Click on save event',
+      action: 'onClick',
+      description: 'Click on save event'
+    },
+    onCancelClick: {
+      name: 'Click on cancel event',
+      action: 'onClick',
+      description: 'Click on cancel event'
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'onChange event  '
+    },
+    popupItemsData: {
+      description: 'array [] of objects: {title: string, content } to fill the accordion items. '
+    }
+  }
+}; // const Template = (args) => (
+//   <Popup {...args}>
+//     <div>
+//       <div>table1</div>
+//       <div>table2</div>
+//     </div>
+//   </Popup>
+// );
+const ExamplePopup = exports.ExamplePopup = {
+  args: {
+    title: 'Offer Details',
+    isPopupOpen: true,
+    popupItemsData: popupItemsData1,
+    width: '1000px',
+    height: '800px',
+    borderColor: '#9BAFCE',
+    subtitleTextColor: '#7E7E7E'
+  }
+};