ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,66 @@
+import { AutoScroll } from './AutoScroll'
+import { CitySelector } from './CitySelector'
+import { ColumnAllowSettingPopover } from './ColumnAllowSettingPopover'
+import { Alert, Confirm } from './Confirm'
+import { ConfirmAdmin } from './ConfirmAdmin'
+import { DragScroll } from './DragScroll'
+import { Image } from './Image'
+import { ImageCrop } from './ImageCrop'
+import { InputPhoneNumber } from './InputPhoneNumber'
+import { Modal } from './Modal'
+import { MoreSidebarLayout } from './MoreSidebarLayout'
+import { NotFoundSource } from './NotFoundSource'
+import { Pagination } from './Pagination'
+import { PaginationButton } from './PaginationButton'
+import { Personalization } from './Personalization'
+import { ProtectedRoute } from './ProtectedRoute'
+import { Schedule } from './Schedule'
+import { SearchBar } from './SearchBar'
+import { RangeCalendar } from './RangeCalendar'
+
+import { SelectBusinessCategories } from './SelectBusinessCategories'
+import { SelectBusinessProducts } from './SelectBusinessProducts'
+import { SelectBusinesses } from './SelectBusinesses'
+import { SelectSites } from './SelectSites'
+import { SelectUsers } from './SelectUsers'
+import { SelectLoyaltyLevels } from './SelectLoyaltyLevels'
+import { SideBar } from './SideBar'
+import { SpinnerLoader } from './SpinnerLoader'
+import SpreadSheetEditor from './SpreadSheetEditor'
+import { ProgressRing } from './ProgressRing'
+import { ColorPicker } from './ColorPicker'
+
+export {
+  AutoScroll,
+  CitySelector,
+  ColumnAllowSettingPopover,
+  Alert,
+  Confirm,
+  ConfirmAdmin,
+  DragScroll,
+  Image,
+  ImageCrop,
+  InputPhoneNumber,
+  Modal,
+  MoreSidebarLayout,
+  NotFoundSource,
+  Pagination,
+  PaginationButton,
+  Personalization,
+  ProtectedRoute,
+  Schedule,
+  SearchBar,
+  RangeCalendar,
+
+  SelectBusinessCategories,
+  SelectBusinessProducts,
+  SelectBusinesses,
+  SelectSites,
+  SelectUsers,
+  SelectLoyaltyLevels,
+  SideBar,
+  SpinnerLoader,
+  SpreadSheetEditor,
+  ProgressRing,
+  ColorPicker
+}

package/src/themes/callcenterOriginal/src/components/Stores/BusinessSelectHeader/index.js

@@ -0,0 +1,142 @@
+import React, { useEffect, useRef } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import {
+  useLanguage,
+  useUtils,
+  DashboardBusinessList as BusinessListController
+} from 'ordering-components-'
+import { Button } from '../../../styles'
+import {
+  PopMenuContatiner,
+  BusinessSearch,
+  OptionItem,
+  BusinessList,
+  WrapperPagination,
+  SelectHeaderContent
+} from './styles'
+import { Pagination, SearchBar } from '../../Shared'
+
+const BusinessessListingUI = (props) => {
+  const {
+    businessList,
+    pagination,
+    searchValue,
+    onSearch,
+    getPageBusinesses,
+    isOpen,
+    close,
+    changeBusinessState,
+    handleOpenAddBusiness
+  } = props
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const dropdownReference = useRef()
+
+  const handleChangePage = (page) => {
+    getPageBusinesses(pagination.pageSize, page)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(pagination.from / pageSize)
+    getPageBusinesses(pageSize, expectedPage)
+  }
+
+  const closeSelect = (e) => {
+    if (isOpen) {
+      const outsideDropdown = !dropdownReference.current?.contains(e.target)
+      if (outsideDropdown) {
+        close()
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+    document.addEventListener('mouseup', closeSelect)
+    return () => document.removeEventListener('mouseup', closeSelect)
+  }, [isOpen])
+
+  return (
+    <PopMenuContatiner ref={dropdownReference}>
+      <SelectHeaderContent>
+        <BusinessSearch>
+          <SearchBar
+            isCustomLayout
+            lazyLoad
+            onSearch={onSearch}
+            search={searchValue}
+            placeholder={t('SEARCH', 'Search')}
+          />
+        </BusinessSearch>
+        <BusinessList>
+          {businessList.loading ? (
+            [...Array(pagination.pageSize).keys()].map(i => (
+              <OptionItem key={i}>
+                <Skeleton width={38} height={38} style={{ borderRadius: '7.6px' }} />
+                <div style={{ marginLeft: '8px', marginRight: '8px' }}>
+                  <Skeleton height={15} width={140} />
+                  <Skeleton height={12} width={80} style={{ marginTop: '7px' }} />
+                </div>
+              </OptionItem>
+            ))
+          ) : (
+            <>
+              {businessList.businesses.map(business => (
+                <OptionItem key={business.id} onClick={() => changeBusinessState(business)}>
+                  <img src={optimizeImage(business?.logo, 'h_50,c_limit')} alt='' />
+                  <div>
+                    <b>{business?.name}</b>
+                    <p>{business?.city?.name}</p>
+                  </div>
+                </OptionItem>
+              ))}
+            </>
+          )}
+        </BusinessList>
+        {pagination && pagination?.total > 0 && (
+          <WrapperPagination className='pagination-container'>
+            {pagination?.total && (
+              <Pagination
+                currentPage={pagination.currentPage}
+                totalPages={Math.ceil(pagination?.total / pagination.pageSize)}
+                handleChangePage={handleChangePage}
+                defaultPageSize={pagination.pageSize}
+                handleChangePageSize={handleChangePageSize}
+                isHidePagecontrol
+              />
+            )}
+          </WrapperPagination>
+        )}
+
+        {!businessList.loading && pagination?.total === 0 && (
+          <Button
+            color='primary'
+            borderRadius='8px'
+            onClick={() => handleOpenAddBusiness()}
+          >
+            {t('ADD_NEW_STORE', 'Add new store')}
+          </Button>
+        )}
+      </SelectHeaderContent>
+    </PopMenuContatiner>
+  )
+}
+
+export const BusinessSelectHeader = (props) => {
+  const businessListingProps = {
+    ...props,
+    UIComponent: BusinessessListingUI,
+    asDashboard: true,
+    loadMorePageSize: props.defaultPageSize ?? 6,
+    paginationSettings: {
+      pageSize: props.defaultPageSize ?? 6
+    },
+    isSearchByBusinessName: true,
+    isSearchByBusinessEmail: true,
+    isSearchByBusinessPhone: true,
+    propsToFetch: props.defaultPropsToFetch ?? ['name', 'slug', 'logo', 'city']
+  }
+  return (
+    <BusinessListController {...businessListingProps} />
+  )
+}

package/src/themes/callcenterOriginal/src/components/Stores/BusinessSelectHeader/styles.js

@@ -0,0 +1,97 @@
+import styled, { css } from 'styled-components'
+
+export const PopMenuContatiner = styled.div`
+  position: absolute;
+  left:0px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  width: 280px;
+  border: 1px solid #E9ECEF;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgb(0 0 0 / 12%);
+  border-radius: 7.6px;
+  padding: 8px;
+  z-index: 999;
+`
+export const SelectHeaderContent = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  > button {
+    margin-top: 10px;
+    width: 100%;
+  }
+`
+export const BusinessSearch = styled.div`
+  display: flex;
+  margin-bottom: 5px;
+  padding: 5px;
+
+  > div {
+   width: 100%;
+
+   > input {
+    background: ${props => props.theme.colors.secundary};
+   }
+  }
+`
+export const OptionItem = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 7.6px;
+  &:hover {
+    background-color: ${props => props.theme.colors.lightPrimary};
+  }
+  img {
+    min-height: 38px;
+    min-width: 38px;
+    height: 38px;
+    width: 38px;
+    border-radius: 8px;
+    object-fit: cover;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    margin-right: 8px;
+    ${props => props.theme?.rtl && css`
+      margin-right: 0px;
+      margin-left: 8px;
+    `}
+  }
+  > div {
+    display: flex;
+    flex-direction: column;
+    max-width: 210px;
+    b {
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 400;
+      color: ${props => props.theme.colors.textBlack};
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    p {
+      margin: 0;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      color: ${props => props.theme.colors.textGray};
+    }
+  }
+  span {
+    display: flex;
+  }
+`
+export const BusinessList = styled.div`
+`
+export const WrapperPagination = styled.div`
+  margin-top: 10px;
+  >div>div{
+    margin: 0;
+    button {
+      font-size: 12px;
+    }
+  }
+`

package/src/themes/callcenterOriginal/src/components/UserDetails/index.js

@@ -116,7 +116,7 @@ const UserDetailsUI = (props) => {
                   <CountryFlag>
                     {
                       userData?.country_phone_code && (
-                        <PhoneInput onChange={() => {}} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code)} ${userData?.cellphone}`)?.country} />
+                        <PhoneInput onChange={() => {}} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone}`)?.country} />
                       )
                     }
                   </CountryFlag>

package/src/themes/callcenterOriginal/src/styles/Buttons/index.js

@@ -1,6 +1,70 @@
 import styled, { css } from 'styled-components'
 import { darken } from 'polished'
 
+export const IconButton = styled.button`
+  background-color: transparent;
+  border: none;
+  border-radius: 6px;
+  height: 32px;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all .2s ease-in;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  > svg {
+    width: 20px;
+    height: 20px;
+    color: #B1BCCC;
+  }
+
+  &:hover {
+    background-color: #1507260a;
+
+    > svg {
+      color:  #151b26;
+    }
+  }
+
+  &:active {
+    background-color: #1507261a;
+  }
+
+  ${({ color }) => color === 'black' && css`
+    > svg {
+      color: ${props => props.theme.colors.headingColor};
+    }
+    &:hover {
+      background-color: ${props => props.theme.colors.secundary};
+    }
+    &:active {
+      background-color: ${props => props.theme.colors.secundaryDarkContrast};
+    }
+
+    ${({ active }) => active && css`
+      background-color: ${props => props.theme.colors.secundaryDarkContrast};
+    `}
+  `}
+
+  ${({ color }) => color === 'primary' && css`
+    > svg {
+      color: ${props => props.theme.colors.primary};
+    }
+    &:hover {
+      background-color: #1507260a;
+      > svg {
+        color: ${props => props.theme.colors.primary};
+      }
+    }
+  `}
+  ${({ isDisabled }) => isDisabled && css`
+    pointer-events: none;
+  `}
+`
+
 export const Button = styled.button`
   background: #CCC;
   color: #FFF;

package/src/themes/callcenterOriginal/src/styles/Checkbox/index.js

@@ -0,0 +1,56 @@
+import styled, { css } from 'styled-components'
+
+export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
+  position: relative;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  border: none;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    top: 0;
+    left: 0;
+    border: 1px solid #B1BCCC;
+    border-radius: 2px;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  }
+
+  &:checked:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    top: 0;
+    ${props => props.theme?.rtl ? css`
+      right: 0;
+    ` : css`
+      left: 0;
+    `}
+    background-color: ${props => props.theme.colors.primary};
+    border: none;
+  }
+  &:checked:after {
+    content: "";
+    display: block;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    position: absolute;
+    top: 3px;
+    ${props => props.theme?.rtl ? css`
+      right: 7px;
+    ` : css`
+      left: 7px;
+    `}
+  }
+`