sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/CampaignTool/Popup.style.js

@@ -1,122 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.InputCommit = exports.Close = exports.ButtonsContainer = exports.AccordionItemTitle = exports.AccordionItemMainContainer = exports.AccordionItemIconContainer = exports.AccordionItemContainer = exports.AccordionContentContainer = exports.AccordionContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MainContainer = exports.MainContainer = _styledComponents.default.div``;
-const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div`
-  position: fixed;
-  z-index: 100;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const ModalContent = exports.ModalContent = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  font-weight: 500;
-  font-size: 18px;
-  background-color: #fefefe;
-  padding: 30px 20px 60px 40px;
-  border: 1px solid #888;
-  border-radius: 10px;
-  height: ${props => props.height};
-  width: ${props => props.width};
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-`;
-const Close = exports.Close = _styledComponents.default.span`
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-  cursor: pointer;
-
-  .close:hover,
-  .close:focus {
-    color: black;
-    text-decoration: none;
-  }
-`;
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0 0 20px 0;
-`;
-const Title = exports.Title = _styledComponents.default.p`
-  font-weight: 600;
-  font-size: 30px;
-  margin: 0;
-`;
-const AccordionContainer = exports.AccordionContainer = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: column;
-  overflow-y: auto;
-  padding: 0 20px 0 0;
-  max-height: ${props => props.maxHeight};
-`;
-const AccordionItemMainContainer = exports.AccordionItemMainContainer = _styledComponents.default.div`
-  margin: 0 0 20px 0;
-  border: ${props => `1px solid ${props.borderColor}`};
-  border-radius: 10px;
-`;
-const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 10px;
-`;
-const AccordionItemTitle = exports.AccordionItemTitle = _styledComponents.default.h3`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 25px;
-  margin: 0 10px;
-  color: ${props => props.subtitleTextColor};
-`;
-const AccordionItemIconContainer = exports.AccordionItemIconContainer = _styledComponents.default.h3`
-  margin: 0 0 0 10px;
-`;
-const AccordionContentContainer = exports.AccordionContentContainer = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 14px;
-  margin: 0;
-`;
-const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div`
-  display: flex;
-  //align-items: flex-end;
-  flex-direction: row-reverse;
-  //flex-wrap: nowrap;
-  //flex-direction: column;
-  padding: 20px 20px 0 0;
-  gap: 20px;
-  
-`;
-const InputCommit = exports.InputCommit = _styledComponents.default.input`
-  font-family: "Poppins", sans-serif;  
-  border:  ${props => `1px solid ${props.borderColor}`};
-  border-radius: 8px;
-  font-weight: 400;
-  font-size: 14px;
-  @media (max-width: 1536px) {
-    font-size: 12px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-  height: 40px;
-  width: 100px;
-  cursor: pointer;
-   
-   &:hover {
-    background-Color: #f1f1f1;
-  } 
- 
-`;

package/dist/components/CampaignTool/PopupContent.js

@@ -1,84 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PopupContent = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactHookForm = require("react-hook-form");
-var _FormSelect = require("./FormSelect");
-var _FormInput = require("./FormInput");
-var _Datepicker = require("../Datepicker/Datepicker");
-var _PopupContent = require("./PopupContent.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* PopupContent */
-const PopupContent = props => {
-  let {
-    width,
-    height,
-    children
-  } = props;
-  const methods = (0, _reactHookForm.useFormContext)();
-  const {
-    rowsData,
-    onClick,
-    onChange,
-    borderColor
-  } = props;
-  const [RowsDataState, setRowsDataState] = (0, _react.useState)(rowsData);
-  (0, _react.useEffect)(() => {
-    //console.log("RowsDataState", RowsDataState);
-  }, [RowsDataState]);
-  const displayRowFields = (data, height, paddingBottom = "5px") => {
-    if (data && data.length > 0) {
-      return <_PopupContent.FieldsContainer id="FieldsContainer" height={height} paddingBottom={paddingBottom}>
-          {children}
-          {data?.map(item => <_PopupContent.FieldContainer id="FieldContainer">
-              {item.inputType === "dropdown" ? <_FormSelect.FormSelect id="Select" name={item.name} control={methods.control} errorMessage="" label={item.label} required={item.required} placeHolder={item.placeHolder}
-          //onChange={item.onChange}
-          options={item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : []} height="45px" width="100%" /> : item.inputType === "textbox" ? <_FormInput.FormInput id="FormInput" name={item.name} control={methods.control} borderRadius="4px" required={item.required} label={item.label} placeholder={item.placeHolder} height="45px" width="100%"
-          //onChange={item.onChange}
-          borderColor={borderColor} /> : item.inputType === "datepicker" ? <_PopupContent.DatePickerContainer id="DatePickerContainer">
-                  <_Datepicker.Datepicker id="Datepicker" name={item.name} required={item.required} placeholder={item.placeHolder} borderColor={borderColor} format="MM/DD/YYYY" labelColor={borderColor} onChange={() => {}} shape="square" text={item.label} height="45px" width="100%" />
-                </_PopupContent.DatePickerContainer> : ""}
-            </_PopupContent.FieldContainer>)}
-        </_PopupContent.FieldsContainer>;
-    }
-  };
-  const displayRows = () => {
-    if (RowsDataState && RowsDataState.length > 0) {
-      return <_PopupContent.AllFieldsContainer id="AllFieldsContainer">
-          {RowsDataState.map((row, i) => <>{displayRowFields(row.fieldsArray, height = "160px", "20px")}</>)}
-        </_PopupContent.AllFieldsContainer>;
-    }
-  };
-
-  //= ======================================== MAIN RETURN ====================================
-  return <_PopupContent.MainContainer id="MainContainer" height={height} width={width}>
-      <_PopupContent.PanelContainer id="PanelContainer">{displayRows()}</_PopupContent.PanelContainer>
-    </_PopupContent.MainContainer>;
-  //= ======================================== MAIN RETURN END====================================
-};
-exports.PopupContent = PopupContent;
-var _default = exports.default = PopupContent;
-PopupContent.propTypes = {
-  RowsData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string,
-    checked: _propTypes.default.bool,
-    disabled: _propTypes.default.bool
-  })),
-  borderColor: _propTypes.default.string,
-  height: _propTypes.default.string,
-  width: _propTypes.default.string,
-  onClick: _propTypes.default.func
-};
-PopupContent.defaultProps = {
-  RowsData: [],
-  borderColor: "#066768",
-  width: "100%",
-  height: "100%",
-  onClick: () => {}
-};

package/dist/components/CampaignTool/PopupContent.style.js

@@ -1,74 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PanelContainer = exports.MainContainer = exports.FieldsContainer = exports.FieldTitle = exports.FieldContainer = exports.DatePickerContainer = exports.AllFieldsContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MainContainer = exports.MainContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-size: 1rem;
-  border-radius: 12px;
-  width: ${props => {
-  return props.width;
-}};
-  height: ${props => {
-  return props.height;
-}};
-`;
-const PanelContainer = exports.PanelContainer = _styledComponents.default.div`
-  display: flex;
-  align-content: center;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  border-radius: 12px;
-  background: #ffffff;
-  padding: 0 10px ;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  white-space: pre-wrap;
-  overflow: hidden;
-  width: 100%;
-`;
-const FieldTitle = exports.FieldTitle = _styledComponents.default.h4`
-  font-weight: 600;
-  font-size: 14px;
-  margin: 5px;
-  @media (max-width: 1536px) {
-    font-size: 11px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;
-const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  width: 100%;
-`;
-const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: row;
-  white-space: wrap;
-  padding: 10px;
-  gap: 20px;
-  width: 100%;
- 
-`;
-const FieldContainer = exports.FieldContainer = _styledComponents.default.div` 
-  width: 100%;
-  margin: 0;
- 
-`;
-const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div`
- 
-`;

package/dist/components/CampaignTool/PopupFieldsRules.js

@@ -1,168 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPopupFieldsRules = void 0;
-var _Email = require("../../utils/regex/Email.regex");
-var _Phone = require("../../utils/regex/Phone.regex");
-var _LatinWithSpaces = require("../../utils/regex/LatinWithSpaces.regex");
-const getPopupFieldsRules = name => {
-  switch (name) {
-    case 'AllowInStoreGroups':
-      return {
-        required: false
-      };
-    case 'BlockInStoreGroups':
-      return {
-        required: false
-      };
-    case 'BrandDescription':
-      return {
-        required: false
-      };
-    case 'BrandName':
-      return {
-        required: false
-      };
-    case 'Broker':
-      return {
-        required: false
-      };
-    case 'Budget':
-      return {
-        required: false
-      };
-    case 'Category':
-      return {
-        required: 'Category is required'
-      };
-    case 'CategoryLevel1':
-      return {
-        required: false
-      };
-    case 'CategoryManager':
-      return {
-        required: false
-      };
-    case 'ConditionMinBasketValue':
-      return {
-        required: false
-      };
-    case 'ConditionMinQuantityPurchased':
-      return {
-        required: false
-      };
-    case 'ConsiderStoreAvailability':
-      return {
-        required: false
-      };
-    case 'ContactEmail':
-      return {
-        required: 'Contact Email is required',
-        pattern: {
-          value: _Email.EmailRegex,
-          message: 'invalid contact email address'
-        }
-      };
-    case 'ContactName':
-      return {
-        required: 'Contact Name is required',
-        maxLength: {
-          value: 17,
-          message: 'Maximum 17 letters'
-        },
-        minLength: {
-          value: 2,
-          message: 'Contact Name should include at least two letters'
-        },
-        pattern: {
-          value: _LatinWithSpaces.OnlyLatinWithSpacesRegex,
-          message: 'Only english letters allowed'
-        }
-      };
-    case 'ContactPhone':
-      return {
-        required: false,
-        pattern: {
-          value: _Phone.PhoneRegex,
-          message: 'Please provide a valid phone number'
-        }
-      };
-    case 'DescriptionLowCase':
-      return {
-        required: false
-      };
-    case 'DiscountType':
-      return {
-        required: false
-      };
-    case 'FundationSource':
-      return {
-        required: 'Fundation Source is required'
-      };
-    case 'Image':
-      return {
-        required: false
-      };
-    case 'MaxIssuances':
-      return {
-        required: false
-      };
-    case 'MaxTransactions':
-      return {
-        required: false
-      };
-    case 'OfferInventory':
-      return {
-        required: false
-      };
-    case 'PurchaseOrder':
-      return {
-        required: false
-      };
-    case 'PurchaseOrderPDN':
-      return {
-        required: false
-      };
-    case 'RedemptionID':
-      return {
-        required: false
-      };
-    case 'RewardQuantity':
-      return {
-        required: false
-      };
-    case 'SummaryPodHeader':
-      return {
-        required: false
-      };
-    case 'Supplier':
-      return {
-        required: 'Supplier is required'
-      };
-    case 'SupplierOfferID':
-      return {
-        required: false
-      };
-    case 'TargetAudienceType':
-      return {
-        required: false
-      };
-    case 'TargetingNotes':
-      return {
-        required: false
-      };
-    case 'TypeReward':
-      return {
-        required: false
-      };
-    case 'VendorID':
-      return {
-        required: false
-      };
-    default:
-      return '';
-  }
-};
-exports.getPopupFieldsRules = getPopupFieldsRules;

package/dist/components/CampaignTool/Table.js

@@ -1,223 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Table = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Table = require("./Table.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Table = props => {
-  const {
-    tableKey,
-    data,
-    width,
-    height,
-    onCheckAllInput,
-    onSortClick,
-    onRowClick,
-    onRowInputClick,
-    onPaginationClick,
-    actionsColumn,
-    sizingTable,
-    showPagination,
-    rangePagination
-  } = props;
-  const [sortBy, setSortBy] = (0, _react.useState)(null);
-  const [sortOrder, setSortOrder] = (0, _react.useState)('asc');
-  const [resizing, setResizing] = (0, _react.useState)(false);
-  const [resizeColumn, setResizeColumn] = (0, _react.useState)(null);
-  const checkedRef = (0, _react.useRef)([]);
-  const [checkEvent, setCheckEvent] = (0, _react.useState)({
-    isSelectAll: false,
-    selected: [],
-    unselected: []
-  });
-  const [activePage, setActivePage] = (0, _react.useState)(1);
-  const [arrow, setArrow] = (0, _react.useState)(null);
-  const handleSort = (event, columnName) => {
-    if (!event.target.classList.contains('dragger')) {
-      setSortBy(columnName);
-      setSortOrder(prevSortOrder => prevSortOrder === 'asc' ? 'desc' : 'asc');
-      setArrow(prevArrow => prevArrow === '⭣' ? '⭡' : '⭣');
-      onSortClick({
-        sortType: sortOrder,
-        column: columnName,
-        data: sortedData
-      });
-    }
-  };
-
-  // the Server do the sorting so this function used for displaying Action data
-  const sortedData = [...data].sort((a, b) => {
-    if (sortOrder === 'asc') {
-      return a[sortBy] > b[sortBy] ? 1 : -1;
-    }
-    return a[sortBy] < b[sortBy] ? 1 : -1;
-  });
-  const handleSelectAllChange = event => {
-    setCheckEvent({
-      isSelectAll: event.target.checked,
-      selected: [],
-      unselected: []
-    });
-    checkedRef.current.map(item => {
-      item.checked = event.target.checked;
-    });
-  };
-  const m_pos = (0, _react.useRef)(null);
-  const handleMouseDown = (e, columnName) => {
-    m_pos.current = e.clientX;
-    setResizing(true);
-    setResizeColumn(columnName);
-  };
-  const handleMouseMove = e => {
-    if (resizing) {
-      const th = document.querySelector(`th[data-column="${resizeColumn}"]`);
-      const dx = e.clientX - m_pos.current;
-      m_pos.current = e.clientX;
-      th.style.width = `${parseInt(getComputedStyle(th, '').width) + dx}px`;
-    }
-  };
-  const handleMouseUp = () => {
-    setResizing(false);
-    setResizeColumn(null);
-  };
-  const onRowClickHandler = (event, row) => {
-    if (event.target.type !== 'checkbox') {
-      onRowClick(row);
-    }
-  };
-  const handleCheckboxChange = (event, row) => {
-    if (event.target.checked) {
-      const updatedUnSelected = checkEvent.unselected.filter(item => item.key !== row.key);
-      setCheckEvent({
-        ...checkEvent,
-        unselected: updatedUnSelected,
-        selected: [...checkEvent.selected, row]
-      });
-    } else {
-      const updatedSelected = checkEvent.selected.filter(item => item.key !== row.key);
-      setCheckEvent({
-        ...checkEvent,
-        unselected: [...checkEvent.unselected, row],
-        selected: updatedSelected
-      });
-    }
-  };
-  const onPaginationClickHandler = (event, page) => {
-    setActivePage(page);
-    onPaginationClick(event, page);
-  };
-  (0, _react.useEffect)(() => {
-    onCheckAllInput(checkEvent);
-  }, [checkEvent]);
-  (0, _react.useEffect)(() => {
-    document.addEventListener('mousemove', handleMouseMove, false);
-    document.addEventListener('mouseup', handleMouseUp, false);
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove, false);
-      document.removeEventListener('mouseup', handleMouseUp, false);
-    };
-  }, [resizing]);
-  const pages = Array.from({
-    length: rangePagination
-  }, (_, index) => index + 1);
-  return <_Table.TableWrapper key={tableKey}>
-      <_Table.TableTag width={width} height={height}>
-        <_Table.Thead>
-          <tr>
-            {actionsColumn && <th className='actions-th'>
-              <input type="checkbox" onChange={handleSelectAllChange} />
-            </th>}
-            {Object.keys(data[0]).map(column => <th key={column} data-column={column} onClick={event => handleSort(event, column)}>
-                <span>{column}</span>
-                {sortBy === column && <span dangerouslySetInnerHTML={{
-              __html: arrow
-            }} />}
-                {sizingTable && <_Table.Dragger className="dragger" onMouseDown={e => handleMouseDown(e, column)} />}
-              </th>)}
-          </tr>
-        </_Table.Thead>
-        <_Table.Tbody>
-          {data.map(row => <tr key={row.key} onClick={event => onRowClickHandler(event, row)}>
-               {actionsColumn && <td>
-                <input ref={el => checkedRef.current[row.key] = el} type="checkbox" onChange={event => handleCheckboxChange(event, row)} />
-              </td>}
-              {Object.keys(row).map(column => <td key={column}>{row[column]}</td>)}
-            </tr>)}
-        </_Table.Tbody>
-      </_Table.TableTag>
-
-      {showPagination && <_Table.Pagination>
-           <li>
-             <_Table.PaginationButton className="double-arrow" onClick={event => onPaginationClickHandler(event, 1)}>
-               &laquo;
-             </_Table.PaginationButton>
-           </li>
-           <li>
-             <_Table.PaginationButton className="single-arrow" onClick={event => onPaginationClickHandler(event, activePage - 1)}>
-               &lsaquo;
-             </_Table.PaginationButton>
-           </li>
-           {pages.map(page => <li key={page}>
-               <_Table.PaginationButton className={page === activePage ? 'active' : ''} onClick={event => onPaginationClickHandler(event, page)}>
-                 {page}
-               </_Table.PaginationButton>
-             </li>)}
-           <li>
-             <_Table.PaginationButton className="single-arrow" onClick={event => onPaginationClickHandler(event, activePage + 1)}>
-               &rsaquo;
-             </_Table.PaginationButton>
-           </li>
-           <li>
-             <_Table.PaginationButton className="double-arrow" onClick={event => onPaginationClickHandler(event, pages.length)}>
-               &raquo;
-             </_Table.PaginationButton>
-           </li>
-         </_Table.Pagination>}
-    </_Table.TableWrapper>;
-};
-exports.Table = Table;
-var _default = exports.default = Table;
-Table.propTypes = {
-  tableKey: _propTypes.default.string,
-  data: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string,
-    name: _propTypes.default.string,
-    age: _propTypes.default.number
-  })),
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  onCheckAllInput: _propTypes.default.func,
-  onSortClick: _propTypes.default.func,
-  onRowClick: _propTypes.default.func,
-  onRowInputClick: _propTypes.default.func,
-  onPaginationClick: _propTypes.default.func,
-  showPagination: _propTypes.default.bool,
-  sizingTable: _propTypes.default.bool,
-  actionsColumn: _propTypes.default.bool,
-  rangePagination: _propTypes.default.number
-};
-Table.defaultProps = {
-  tableKey: '1',
-  data: [{
-    key: '',
-    name: '',
-    age: 2
-  }],
-  width: '100%',
-  height: 'auto',
-  onCheckAllInput: () => {},
-  onSortClick: () => {},
-  onRowClick: () => {},
-  onRowInputClick: () => {},
-  onPaginationClick: () => {},
-  showPagination: true,
-  sizingTable: true,
-  actionsColumn: true,
-  rangePagination: 5
-};