ordering-ui-admin-external 1.8.5 → 1.10.0

package/src/components/Settings/PickerExpress/styles.js

@@ -0,0 +1,330 @@
+import styled, { css } from 'styled-components'
+
+export const PickerExpressContainer = styled.div`
+  padding: 26px 20px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+  position: relative;
+
+  @media (min-width: 768px) {
+    padding: 26px 40px;
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 35px;
+  ` : css`
+    margin-right: 35px;
+  `}
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0px;
+    text-transform: capitalize;
+  }
+
+  button {
+    line-height: 12px;
+    height: 16px;
+    font-size: 10px;
+    margin-left: 15px;
+    padding: 2px 8px;
+    border-radius: 50px;
+    ${props => props.theme.rtl && css`
+      margin-right: 15px;
+      margin-left: 0px;
+    `}
+  }
+`
+
+export const ApiKeysListTable = styled.table`
+  width: 100%;
+  margin-top: 25px;
+
+  thead {
+    border-bottom: 1px solid ${props => props.theme.colors.secundaryLight};
+    th {
+      padding: 10px 0;
+      &:last-child {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+  }
+  tr {
+    width: 100%;
+    th,
+    td {
+      font-size: 12px;
+      word-break: break-all;
+
+      &:last-child {
+        width: 100px;
+        > div {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+      }
+    }
+  }
+
+  tbody {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    td {
+      padding-top: 9px;
+      padding-bottom: 9px;
+
+      &:last-child {
+        > div {
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+`
+
+export const DropdownButtonWrapper = styled.div`
+  ${props => props?.theme?.rtl ? css`
+    border-right: 1px solid ${props => props.theme.colors.borderColor};
+  ` : css`
+    border-left: 1px solid ${props => props.theme.colors.borderColor};
+  `}
+  padding: 5px 20px;
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => props.theme.colors.secundary} !important;
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`
+export const AddNewButton = styled.div`
+  cursor: pointer;
+  font-size: 12px;
+  color: ${props => props.theme.colors.lightGray};
+  margin: 20px 0;
+  width: fit-content;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const AllSetting = styled.div`
+  user-select: none;
+  cursor: pointer;
+  margin-top: 36px;
+  cursor: pointer;
+  span {
+    font-weight: 600;
+    font-size: 14px;
+    color: ${props => props.theme.colors.primary};
+  }
+  svg {
+    color: ${props => props.theme.colors.primary};
+    margin-left: 5px;
+    transition: 0.2s linear;
+    ${props => props.theme.rtl && css`
+      margin-right: 5px;
+      margin-left: 0px;
+    `}
+  }
+  &:hover {
+    svg {
+      transform: translateX(3px);
+    }
+  }
+`
+
+export const Description = styled.p`
+  margin-top: 40px;
+  font-size: 14px;
+  margin-bottom: 0px;
+  text-align: justify;
+
+  @media (min-width: 768px) {
+    text-align: initial;
+  }
+`
+
+export const CategoryExtraContent = styled.div`
+  position: relative;
+  padding: 26px 26px 60px 26px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: auto;
+
+  ${props => props.theme?.rtl ? css`
+    border-right: 1px solid #E9ECEF;
+  ` : css`
+    border-left: 1px solid #E9ECEF;
+  `}
+
+  > button {
+    z-index: 100;
+    position: absolute;
+    top: 25px;
+    ${props => props.theme?.rtl ? css`
+      left: 20px;
+    ` : css`
+      right: 20px;
+    `}
+  }
+`
+
+export const Container = styled.div`
+  display: flex;
+  width: 0;
+  position: fixed;
+  box-shadow: -4px 0px 7px #ccc;
+
+  ${({ isDriverOrders }) => isDriverOrders && css`
+    position: absolute;
+    box-shadow: none;
+
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid #CCC;
+    ` : css`
+      border-left: 1px solid #CCC;
+    `}
+  `}
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  height: calc(var(--vh, 1vh) * 100);
+  top: 0px;
+  z-index: 1001;
+  overflow-x: hidden;
+  transition: 0.3s;
+
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+    ` : css`
+    right: 0px;
+  `}
+  @media print {
+    box-shadow: none;
+  }
+`
+
+export const DescriptionHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`
+
+export const HeaderIcons = styled.div`
+  display: flex;
+  position: absolute;
+  top: 25px;
+  right: 20px;
+
+  > button:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+`
+
+export const SettingListConatiner = styled.div`
+  width: 100%;
+  margin: 20px 0;
+  border-bottom: 1px solid #E9ECEF;
+`
+
+export const Tab = styled.div`
+  user-select: none;
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  font-size: 14px;
+  white-space: nowrap;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    border-bottom: 2px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: #909BA9;
+  `}
+`
+
+export const Paragraph = styled.div`
+  margin-top: 20px;
+  h2{
+    font-size: 16px;
+  }
+  p{
+    white-space: pre-line;
+    font-size: 12px;
+    margin: 0;
+  }
+  span {
+    font-size: 12px;
+  }
+  a {
+    text-decoration: underline !important;
+    cursor: pointer;
+    font-size: 12px;
+    color: ${props => props.theme.colors.primary} !important;
+  }
+  .bold {
+    font-weight: 600;
+  }
+`
+
+export const PurchaseWrapper = styled.div`
+  button {
+    border-radius: 5px;
+  }
+  margin-top: 15px;
+`

package/src/components/Settings/index.js

@@ -29,6 +29,7 @@ import { InsertVideo } from './InsertVideo'
 import { InsertImage } from './InsertImage'
 import { LanguageTransSpread } from './LanguageTransSpread'
 import { LanguageTransTable } from './LanguageTransTable'
+import { MultiCountrySettings } from './MultiCountrySettings'
 
 export {
   Cms,
@@ -61,5 +62,6 @@ export {
   InsertVideo,
   InsertImage,
   LanguageTransSpread,
-  LanguageTransTable
+  LanguageTransTable,
+  MultiCountrySettings
 }

package/src/components/Shared/Modal/styles.js

@@ -16,7 +16,7 @@ export const ModalDialog = styled.div`
   box-sizing: border-box;
   margin-top: auto;
   margin-bottom: auto;
-  overflow: hidden;
+  overflow: auto;
   max-height: calc(var(--vh, 1vh) * 90);
   @media (max-width: 860px) {
     width: 80%;

package/src/components/SidebarMenu/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from 'react'
+import React, { useEffect, useContext, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { LogoutButton } from '../LogoutButton'
 import {
@@ -19,7 +19,8 @@ import {
   Cart3,
   Cash,
   BagCheck,
-  CloudDownload
+  CloudDownload,
+  X as CloseIcon
 } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import { SidebarMenu as SidebarMenuController, useEvent, useLanguage, useSession, useConfig, useApi } from 'ordering-components-admin-external'
@@ -41,7 +42,8 @@ import {
   SubMenu,
   LanguageSelectorContainer,
   LogoWrapper,
-  PoweredWrapper
+  PoweredWrapper,
+  MobileMessage
 } from './styles'
 
 const SidebarMenuUI = (props) => {
@@ -58,6 +60,8 @@ const SidebarMenuUI = (props) => {
   const windowSize = useWindowSize()
   const isPoweredByOrderingModule = configs?.powered_by_ordering_module?.value
 
+  const [showMessage, setShowMessage] = useState(false)
+
   const ordersSubMenus = [
     {
       id: 1,
@@ -359,8 +363,22 @@ const SidebarMenuUI = (props) => {
     }
   }
 
+  useEffect(() => {
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      setShowMessage(true)
+    }
+  }, [])
+
   return (
     <>
+      {showMessage && (
+        <MobileMessage>
+          <div>
+            <CloseIcon onClick={() => setShowMessage(false)} />
+            {t('FOR_THE_BEST_EXPERIENCE_WHILE_SETTING_UP', 'For the best experience while setting up your project, we recommend using a computer.')}
+          </div>
+        </MobileMessage>
+      )}
       <SidebarContainer
         id='side_bar'
         isCollapse={isCollapse}

package/src/components/SidebarMenu/styles.js

@@ -240,3 +240,29 @@ export const PoweredWrapper = styled.div`
   font-size: 14px;
   font-weight: 600;
 `
+
+export const MobileMessage = styled.div`
+  position: fixed;
+  top: 100px;
+  left: calc(50% - 130px);
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  width: 260px;
+  > div {
+    padding: 15px 15px 10px 15px;
+    font-size: 12px;
+    line-height: 18px;
+    position: relative;
+    > svg {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      cursor: pointer;
+      font-size: 21px;
+    }
+  }
+`

package/src/components/Stores/BusinessAdd/BusinessDetails/index.js

@@ -0,0 +1,106 @@
+import React from 'react'
+import { useLanguage, useConfig, GoogleAutocompleteInput, GoogleMapsMap } from 'ordering-components-admin-external'
+import {
+  BusinessDetailsContainer,
+  ContentWrapper,
+  FormControl,
+  WrapperMap,
+  GoogleMapContainer
+} from './styles'
+import { Input } from '../../../../styles'
+import { stringToSlug } from '../../../../utils'
+
+export const BusinessDetails = (props) => {
+  const {
+    formState,
+    handleChangeAddress,
+    handleChangeInput,
+    handleChangeCenter
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+
+  const googleMapsApiKey = configs?.google_maps_api_key?.value
+  const googleMapsControls = {
+    defaultZoom: 15,
+    zoomControl: true,
+    streetViewControl: false,
+    fullscreenControl: false,
+    mapTypeId: 'roadmap', // 'roadmap', 'satellite', 'hybrid', 'terrain'
+    mapTypeControl: false,
+    mapTypeControlOptions: {
+      mapTypeIds: ['roadmap', 'satellite']
+    }
+  }
+
+  const defaultPosition = { lat: 40.77473399999999, lng: -73.9653844 }
+
+  return (
+    <BusinessDetailsContainer>
+      <h2>{t('BUSINESS_DETAILS', 'Business details')}</h2>
+      <ContentWrapper>
+        <FormControl>
+          <label>{t('BUSINESS_NAME', 'Business Name')}</label>
+          <Input
+            name='name'
+            placeholder={t('NAME', 'Name')}
+            defaultValue={formState?.changes?.name ?? ''}
+            onChange={e => {
+              handleChangeInput([{ name: 'name', value: e.target.value }, { name: 'slug', value: stringToSlug(e.target.value) }], true)
+            }}
+          />
+        </FormControl>
+        <FormControl>
+          <label>{t('ADDRESS', 'Address')}</label>
+          <GoogleAutocompleteInput
+            name='address'
+            className='input-autocomplete'
+            apiKey={googleMapsApiKey}
+            placeholder={t('ADDRESS', 'Address')}
+            onChangeAddress={(e) => {
+              handleChangeAddress(e)
+            }}
+            onChange={(e) => {
+              handleChangeInput(e)
+            }}
+            defaultValue={formState?.changes?.address ?? ''}
+            autoComplete='new-password'
+            countryCode={configs?.country_autocomplete?.value || '*'}
+          />
+        </FormControl>
+        <FormControl>
+          <label>{t('ZIPCODE', 'Zipcode')}</label>
+          <Input
+            name='zipcode'
+            placeholder={t('ZIPCODE', 'Zipcode')}
+            defaultValue={formState?.changes?.zipcode ?? ''}
+            onChange={handleChangeInput}
+          />
+        </FormControl>
+        <GoogleMapContainer>
+          <label>{t('GOOGLE_PLACE_ID', 'Google place ID')}</label>
+          <p>{googleMapsApiKey}</p>
+          <WrapperMap>
+            <GoogleMapsMap
+              apiKey={configs?.google_maps_api_key?.value}
+              location={formState?.changes?.location ?? defaultPosition}
+              mapControls={googleMapsControls}
+              handleChangeCenter={handleChangeCenter}
+              isFitCenter
+            />
+          </WrapperMap>
+        </GoogleMapContainer>
+        <FormControl noBottom>
+          <label>{t('INT_NUMBER', 'Int. number')}</label>
+          <Input
+            name='cellphone'
+            placeholder={t('INT_NUMBER', 'Int. number')}
+            defaultValue={formState?.changes?.cellphone ?? ''}
+            onChange={handleChangeInput}
+          />
+        </FormControl>
+      </ContentWrapper>
+    </BusinessDetailsContainer>
+  )
+}

package/src/components/Stores/BusinessAdd/BusinessDetails/styles.js

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const BusinessDetailsContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0;
+  }
+`
+
+export const ContentWrapper = styled.div`
+  margin-top: 23px;
+`
+
+export const FormControl = styled.div`
+  margin-bottom: 23px;
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 12px;
+  }
+  input {
+    width: 100%;
+    height: 44px;
+  }
+  .input-autocomplete {
+    width: 100%;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    border: 1px solid ${props => props.theme.colors.borderColor};
+    border-radius: 8px;
+    font-size: 14px;
+    padding: 10px 15px;
+    outline: none;
+    ::placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &:-ms-input-placeholder {
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+    &:focus {
+      border-color: ${() => darken(0.07, '#CCC')};
+    }
+  }
+
+  ${({ noBottom }) => noBottom && css`
+    margin-bottom: 0px;
+  `}
+`
+
+export const GoogleMapContainer = styled.div`
+  margin-bottom: 23px;
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 12px;
+    margin-bottom: 9px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0;
+    color: ${props => props.theme.colors.lightGray};
+  }
+`
+
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 150px;
+  margin-top: 30px;
+
+  > div {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 8px;
+  }
+
+  @media (min-width: 768px) {
+    height: 200px;
+  }
+`
+
+export const FormGroup = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  > div {
+    width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    > div {
+      width: 48%;
+    }
+  }
+`