ordering-ui-external 1.8.8 → 1.8.9

package/src/themes/callcenterOriginal/src/components/Shared/SelectUsers/index.js

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, UsersList as UsersListController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { Pagination } from '../Pagination'
+import { SearchBar } from '../SearchBar'
+import { Button, Checkbox } from '../../../styles'
+import {
+  UsersContainer,
+  SearchBarWrapper,
+  UserItem,
+  WrapperPagination
+} from './styles'
+
+const SelectUsersUI = (props) => {
+  const {
+    usersList,
+    paginationProps,
+    getUsers,
+    searchValue,
+    onSearch,
+    isAddMode,
+    isDisabled,
+    selectedUserIds,
+    handleSelectUser,
+    handleAddPromotion,
+    handleUpdateClick,
+    handleSelectAllUsers
+  } = props
+  const [, t] = useLanguage()
+  const [all, setAll] = useState(false)
+  const [paginationSize, setPaginationSize] = useState(10)
+
+  const handleChangePage = (page) => {
+    getUsers(page, paginationSize)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(paginationProps.from / pageSize)
+    setPaginationSize(pageSize)
+    getUsers(expectedPage, pageSize)
+  }
+
+  useEffect(() => {
+    setAll(!!!selectedUserIds?.length)
+  }, [selectedUserIds])
+
+  const handleAllCheck = (check) => {
+    if (!check) {
+      handleSelectAllUsers()
+      setAll(true)
+    } else {
+      setAll(false)
+    }
+  }
+
+  return (
+    <UsersContainer>
+      <SearchBarWrapper>
+        <SearchBar
+          isCustomLayout
+          placeholder={t('SEARCH', 'Search')}
+          searchValue={searchValue}
+          onSearch={onSearch}
+        />
+      </SearchBarWrapper>
+      {usersList.loading ? (
+        [...Array(10).keys()].map(i => (
+          <UserItem key={i}>
+            <Skeleton width={18} height={18} />
+            <span className='name'>
+              <Skeleton width={100} />
+            </span>
+          </UserItem>
+        ))
+      ) : (
+        <>
+          <UserItem>
+            <Checkbox
+              checked={all}
+              onChange={() => handleAllCheck(all)}
+            />
+            <span className='name'>{t('ALL', 'All')}</span>
+          </UserItem>
+          {(!all || !!searchValue?.length) &&
+            usersList.users.map(user => (
+              <UserItem key={user.id}>
+                <Checkbox
+                  checked={selectedUserIds.includes(user.id)}
+                  onChange={(e) => handleSelectUser(e.target.checked, user.id)}
+                />
+                <span className='name'>{user?.name} {user?.lastname}</span>
+              </UserItem>
+            )
+            )}
+        </>
+      )}
+      {(!all || !!searchValue?.length) &&
+        usersList?.users.length > 0 && (
+          <WrapperPagination>
+            <Pagination
+              paginationSize={paginationSize}
+              currentPage={paginationProps.currentPage}
+              totalPages={paginationProps.totalPages}
+              handleChangePage={handleChangePage}
+              handleChangePageSize={handleChangePageSize}
+            />
+          </WrapperPagination>
+        )
+      }
+
+      <Button
+        borderRadius='8px'
+        color='primary'
+        disabled={isDisabled}
+        onClick={() => {
+          isAddMode ? handleAddPromotion() : handleUpdateClick()
+        }}
+      >
+        {isAddMode ? t('ADD', 'Add') : t('SAVE', 'Save')}
+      </Button>
+    </UsersContainer>
+  )
+}
+
+export const SelectUsers = (props) => {
+  const usersProps = {
+    ...props,
+    defaultUserTypesSelected: [3],
+    UIComponent: SelectUsersUI,
+    isSearchByUserEmail: true,
+    isSearchByUserPhone: true,
+    isSearchByUserName: true
+  }
+  return <UsersListController {...usersProps} />
+}

package/src/themes/callcenterOriginal/src/components/Shared/SelectUsers/styles.js

@@ -0,0 +1,33 @@
+import styled, { css } from 'styled-components'
+
+export const UsersContainer = styled.div`
+  margin-top: 27px;
+
+  > button {
+    height: 44px;
+    margin-top: 20px;
+  }
+`
+export const SearchBarWrapper = styled.div`
+  margin-bottom: 15px;
+`
+export const UserItem = styled.div`
+  padding: 15px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  display: flex;
+  align-items: center;
+
+  span.name {
+    font-size: 14px;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 14px;
+    ` : css`
+      margin-left: 14px;
+    `}
+  }
+`
+export const WrapperPagination = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 15px;
+`

package/src/themes/callcenterOriginal/src/components/Shared/SideBar/index.js

@@ -0,0 +1,79 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+import { XLg } from 'react-bootstrap-icons'
+import { IconButton } from '../../../styles'
+import {
+  BarContainer
+} from './styles'
+
+export const SideBar = (props) => {
+  const {
+    open,
+    defaultSideBarWidth,
+    moveDistance,
+    isBorderShow,
+    noAnimation,
+    handleCloseWizard,
+    IconTop
+  } = props
+
+  const sideBarRef = useRef(null)
+  const { width } = useWindowSize()
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const sideBarWidth = defaultSideBarWidth || 500
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      props.onClose()
+    }
+    setIsMenuOpen(value)
+  }
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      if (width <= 768 || width <= sideBarWidth) {
+        sideBarRef.current.style.width = '100vw'
+      } else {
+        sideBarRef.current.style.width = `${sideBarWidth}px`
+      }
+    }
+  }, [width, sideBarWidth, isMenuOpen])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open, defaultSideBarWidth])
+
+  const onCloseSidebar = (e) => {
+    if (e.code === 'Escape') {
+      props.onClose && props.onClose()
+      handleCloseWizard && handleCloseWizard()
+    }
+  }
+
+  useEffect(() => {
+    if (!open) return
+    document.addEventListener('keydown', onCloseSidebar)
+    return () => document.removeEventListener('keydown', onCloseSidebar)
+  }, [open])
+
+  return (
+    <>
+      <BarContainer
+        ref={sideBarRef}
+        isBorderShow={isBorderShow}
+        moveDistance={moveDistance}
+        noAnimation={noAnimation}
+        IconTop={IconTop}
+      >
+        <IconButton
+          color='black'
+          onClick={() => props.onClose()}
+        >
+          <XLg />
+        </IconButton>
+        {props.children}
+      </BarContainer>
+    </>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Shared/SideBar/styles.js

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components'
+
+export const BarContainer = styled.div`
+  display: flex;
+  width: 0;
+  position: fixed;
+  z-index: 1005;
+  top: 0;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  overflow-x: hidden;
+  ${({ noAnimation }) => !noAnimation && css`
+    transition: 0.3s;
+  `}
+  height: calc(var(--vh, 1vh) * 100);
+  ${({ isBorderShow }) => isBorderShow ? css`
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid ${props => props.theme.colors.borderColor};
+    ` : css`
+      border-left: 1px solid ${props => props.theme.colors.borderColor};
+    `}
+  ` : css`
+    box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.16);
+  `}
+
+  ${props => props.theme?.rtl ? css`
+    left: 0;
+    padding-left: ${({ moveDistance }) => moveDistance ? `${moveDistance}px` : '0px'};
+  ` : css`
+    right: 0;
+    padding-right: ${({ moveDistance }) => moveDistance ? `${moveDistance}px` : '0px'};
+  `}
+
+  > button {
+    position: absolute;
+    z-index: 10;
+    top: 20px;
+    ${props => props.theme?.rtl ? css`
+      left: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
+    ` : css`
+      right: ${({ moveDistance }) => moveDistance ? `${moveDistance + 20}px` : '20px'};
+    `}
+  }
+
+  ${({ IconTop }) => IconTop && css`
+    > button {
+      top: ${IconTop}
+    }
+  `}
+`

package/src/themes/callcenterOriginal/src/components/Shared/SpinnerLoader/index.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import {
+  Container,
+  Logo,
+  Content,
+  Spinner
+} from './styles'
+
+export const SpinnerLoader = (props) => {
+  const {
+    primary,
+    logotype,
+    content,
+    style
+  } = props
+  return (
+    <Container style={style} primary={primary}>
+      {logotype && (
+        <Logo>
+          <img src={logotype} alt='logo' />
+        </Logo>
+      )}
+      {content && (
+        <Content>
+          {content}
+        </Content>
+      )}
+      <Spinner className='spinner'>
+        <div className='spinner-content'>
+          <div />
+        </div>
+      </Spinner>
+    </Container>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Shared/SpinnerLoader/styles.js

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  ${({ primary }) => primary && css`
+    top: 0px;
+    position: fixed;
+    width: 100vw;
+    left: 0px;
+    z-index: 100;
+  `}
+`
+
+export const Logo = styled.div`
+  img {
+    max-height: 150px;
+  }
+`
+
+export const Content = styled.h1`
+  font-weight: normal;
+  text-transform: capitalize;
+  margin-top: 0px;
+  padding-bottom: 50px;
+  font-size: 24px;
+  text-align: center;
+  color: ${props => props.theme.colors.headingColor};
+
+  @media (min-width: 768px) {
+    font-size: 32px;
+  }
+`
+
+export const Spinner = styled.div`
+  @keyframes spinner-content {
+    0% { transform: rotate(0) }
+    100% { transform: rotate(360deg) }
+  }
+
+  .spinner-content div {
+    box-sizing: border-box!important
+  }
+
+  .spinner-content > div {
+    width: 108px;
+    height: 108px;
+    border-radius: 50%;
+    border: 8px solid #000;
+    border-color: ${props => `${props.theme.colors.primary} transparent ${props.theme.colors.primary} transparent`};
+    animation: spinner-content 1.8518518518518516s linear infinite;
+  }
+
+  .spinner-content > div:nth-child(2) { border-color: transparent }
+  .spinner-content > div:nth-child(2) div {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: rotate(45deg);
+  }
+
+  .spinner-content > div:nth-child(2) div:before,
+  .spinner-content > div:nth-child(2) div:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    top: -8px;
+    left: 42px;
+    background: ${props => props.theme.colors.primary};
+    border-radius: 50%;
+    box-shadow: 0 100px 0 0 ${props => props.theme.colors.primary};
+  }
+
+  .spinner-content > div:nth-child(2) div:after {
+    left: -8px;
+    top: 42px;
+    box-shadow: 100px 0 0 0 ${props => props.theme.colors.primary};
+  }
+
+  .spinner {
+    width: 200px;
+    height: 200px;
+    display: inline-block;
+    overflow: hidden;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  }
+
+  .spinner-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: translateZ(0) scale(1);
+    backface-visibility: hidden;
+    transform-origin: 0 0;
+  }
+
+  .spinner-content div {
+    box-sizing: content-box;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Shared/SpreadSheetEditor/index.js

@@ -0,0 +1,201 @@
+import React, { useCallback, useEffect, useRef, useState, memo } from 'react'
+import { HotTable, HotColumn } from '@handsontable/react'
+import 'handsontable/dist/handsontable.full.css'
+import { useLanguage } from 'ordering-components-external'
+import {
+  SpreadSheetContainer
+} from './styles'
+
+const SpreadSheetEditor = (props) => {
+  const {
+    headerItems,
+    hotTableData,
+    handleItemChange,
+    handleRowRemove,
+    handleAfterSectionEnd,
+    handleoutsideClickDeselects,
+    isRemove,
+    isUndo,
+    isRedo,
+    isBusinessProducts,
+    hiddenColumns
+  } = props
+  const [, t] = useLanguage()
+  const [cache, setCache] = useState(null)
+
+  const hotTableRef = useRef(null)
+
+  const productIdColumnRenderer = (instance, td, row, col, prop, value, cellProperties) => {
+    if (value !== null) {
+      td.innerHTML = '<span class="product-id">' + value + '</span>'
+    }
+  }
+
+  const settings = {
+    // data: hotTableData,
+    licenseKey: 'non-commercial-and-evaluation',
+    autoRowSize: false,
+    autoColumnSize: false,
+    width: '100%',
+    height: '100%',
+    minSpareRows: 1,
+    stretchH: 'all',
+    copyPaste: true,
+    undo: true,
+    contextMenu: {
+      items: {
+        copy: {
+          name: t('SPREADSHEET_COPY')
+        },
+        ...(isUndo && { undo: { name: t('SPREADSHEET_UNDO') } }),
+        ...(isRedo && { redo: { name: t('SPREADSHEET_REDO') } }),
+        ...(isRemove && { remove_row: { name: t('SPREADSHEET_REMOVE_ROW') } }),
+        paste: {
+          key: 'paste',
+          name: t('SPREADSHEET_PASTE'),
+          disabled: function () {
+            return cache
+          },
+          callback: function () {
+            if (hotTableRef?.current?.hotInstance) {
+              const hotRef = hotTableRef?.current?.hotInstance
+              const plugin = hotRef?.getPlugin('copyPaste')
+              // eslint-disable-next-line no-unused-expressions
+              hotRef?.listen()
+              plugin.paste(cache)
+            }
+          }
+        }
+      }
+    },
+    cells: (row, column, prop) => {
+      const cellProperties = { readOnly: false }
+      if (hotTableRef?.current?.hotInstance && isBusinessProducts) {
+        const visualColIndex = hotTableRef?.current?.hotInstance?.toVisualColumn(column)
+        if (visualColIndex === 0) {
+          cellProperties.readOnly = true
+        }
+      }
+      if (isBusinessProducts && column === 0) {
+        cellProperties.renderer = productIdColumnRenderer
+      }
+      return cellProperties
+    },
+    beforeKeyDown: function (e) {
+      const selectedLast = this.getSelectedLast()
+      if (!selectedLast) {
+        return
+      }
+      const row = selectedLast[0]
+      const col = selectedLast[1]
+      const celltype = this.getCellMeta(row, col).type
+
+      if (celltype === 'numeric') {
+        const evt = e || window.event
+        const key = evt.charCode || evt.keyCode || 0
+
+        // check for cut and paste
+        let isClipboard = false
+        const ctrlDown = evt.ctrlKey || evt.metaKey // Mac support
+
+        // Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
+        if (ctrlDown && evt.altKey) isClipboard = false
+        // Check for ctrl+c, v and x
+        else if (ctrlDown && key === 67) isClipboard = true // c
+        else if (ctrlDown && key === 86) isClipboard = true // v
+        else if (ctrlDown && key === 88) isClipboard = true // x
+
+        const isNumeric = ((key === 8) || (key === 9) || (key === 13) || (key === 46) || (key === 110) ||
+          (key === 116) || (key === 123) || (key === 189) || (key === 190) || ((key >= 35) && (key <= 40)) ||
+          ((key >= 48) && (key <= 57)) || ((key >= 96) && (key <= 105)))
+
+        if (!isNumeric && !isClipboard) {
+          e.stopImmediatePropagation()
+          e.preventDefault()
+        }
+      }
+    }
+  }
+
+  const handleAfterChange = (changes, accionHanson) => {
+    if (hotTableRef?.current?.hotInstance) {
+      const hotTableObj = hotTableRef?.current?.hotInstance
+      handleItemChange && handleItemChange(changes, accionHanson, hotTableObj)
+    }
+  }
+
+  const handleBeforeRemoveRow = (index, amount, physicalRows) => {
+    if (hotTableRef?.current?.hotInstance) {
+      const hotTableObj = hotTableRef?.current?.hotInstance
+      handleRowRemove && handleRowRemove(index, amount, physicalRows, hotTableObj)
+    }
+  }
+
+  const afterSelectionEnd = (row, col, row1, col1) => {
+    if (hotTableRef?.current?.hotInstance) {
+      const hotTableObj = hotTableRef?.current?.hotInstance
+      handleAfterSectionEnd && handleAfterSectionEnd(row, col, row1, col1, hotTableObj)
+    }
+  }
+
+  const outsideClickDeselects = (event) => {
+    if (hotTableRef?.current?.hotInstance) {
+      handleoutsideClickDeselects && handleoutsideClickDeselects(event)
+    }
+  }
+
+  useEffect(() => {
+    if (typeof hiddenColumns === 'undefined') return
+    if (hotTableRef?.current?.hotInstance) {
+      const hotTableObj = hotTableRef?.current?.hotInstance
+      hotTableObj.updateSettings({
+        hiddenColumns: {
+          columns: hiddenColumns
+        }
+      })
+    }
+  }, [hiddenColumns])
+
+  const handleCache = useCallback(() => {
+    const interVal = setInterval(() => {
+      if (navigator.clipboard) {
+        navigator.clipboard.readText && navigator.clipboard.readText().then(function (clipboardData) {
+          if (clipboardData) setCache(clipboardData)
+        }).catch(function (e) { })
+      }
+    }, 500)
+    return () => clearInterval(interVal)
+  }, [cache])
+
+  useEffect(() => {
+    handleCache()
+  }, [handleCache])
+
+  return (
+    <SpreadSheetContainer>
+      <HotTable
+        data={hotTableData}
+        settings={settings}
+        ref={hotTableRef}
+        beforeRemoveRow={(index, amount, physicalRows) => handleBeforeRemoveRow(index, amount, physicalRows)}
+        afterChange={(changes, accionHanson) => handleAfterChange(changes, accionHanson)}
+        afterSelectionEnd={(row, col, row1, col1) => afterSelectionEnd(row, col, row1, col1)}
+        outsideClickDeselects={(event) => outsideClickDeselects(event)}
+      >
+        {
+          headerItems && headerItems.length > 0 && headerItems.map((item, i) => (
+            <HotColumn
+              key={i}
+              title={item.title}
+              readOnly={item.readOnly}
+              data={item.code}
+              type={item.type}
+            />
+          ))
+        }
+      </HotTable>
+    </SpreadSheetContainer>
+  )
+}
+
+export default memo(SpreadSheetEditor)

package/src/themes/callcenterOriginal/src/components/Shared/SpreadSheetEditor/styles.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components'
+
+export const SpreadSheetContainer = styled.div`
+  overflow: auto;
+  > div {
+    min-width: 900px !important;
+  }
+
+  .ht_clone_top {
+    height: auto !important;
+  }
+  .wtHider {
+    width: 100% !important;
+    .wtSpreader {
+      width: 100% !important;
+    }
+  }
+
+  .ht_master .wtHolder {
+    @media (min-width: 768px) {
+      max-height: calc(100vh - 230px);
+    }
+  }
+
+  .wtHolder {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  table {
+    min-width: 900px;
+
+    td {
+      padding: 15px;
+      text-align: left !important;
+      font-size: 13px;
+      color: ${props => props.theme.colors.headingColor} !important;
+      border: none !important;
+      border-bottom: 1px solid #E9ECEF !important;
+    }
+    th {
+      text-align: left;
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+      border: none !important;
+      border-bottom: 1px solid #B1BCCC !important;
+      > div {
+        padding: 15px !important;
+        font-size: 14px;
+        font-weight: bold;
+        color: ${props => props.theme.colors.headingColor} !important;
+      }
+    }
+  }
+
+  #hot-display-license-info {
+    display: none;
+  }
+`