sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/CampaignTool/Popup.stories.js

@@ -0,0 +1,697 @@
+"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("../components/CampaignTool/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: "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 => /*#__PURE__*/_react.default.createElement(_Popup.default, args, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, "table1"), /*#__PURE__*/_react.default.createElement("div", null, "table2")));
+const ExamplePopup = exports.ExamplePopup = Template.bind({});
+ExamplePopup.args = {
+  title: "Offer Details",
+  isPopupOpen: true,
+  popupItemsData: popupItemsData1,
+  width: "1000px",
+  height: "800px",
+  borderColor: "#9BAFCE",
+  subtitleTextColor: "#7E7E7E"
+};