ordering-ui-admin-external 1.10.0 → 1.11.0

package/src/components/Stores/ProductExtraOptions/styles.js

@@ -71,6 +71,7 @@ export const OptionNameContainer = styled.div`
   > input {
     flex: 1;
     height: 32px;
+    width: 32px;
     padding: 5px;
     border: none;
     outline: none;
@@ -103,8 +104,9 @@ export const OptionNameContainer = styled.div`
 `
 
 export const OptionImage = styled.div`
-  width: 38px;
-  height: 38px;
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
@@ -132,6 +134,11 @@ export const OptionImage = styled.div`
   ` : css`
     margin-right: 15px;
   `}
+
+  @media (min-width: 450px) {
+    width: 38px;
+    height: 38px;
+  }
 `
 
 export const ActionSelectorWrapper = styled.div`
@@ -195,7 +202,7 @@ export const AddOptionForm = styled.form`
   border-bottom: 1px solid ${props => props.theme.colors.borderColor};
 
   > input {
-    width: 80px;
+    width: 75px;
     height: 32px;
     padding: 5px;
     border: none;
@@ -214,6 +221,12 @@ export const AddOptionForm = styled.form`
       margin-left: 10px;
     `}
   }
+
+  @media (min-width: 450px) {
+    > input {
+      width: 80px;
+    }
+  }
 `
 export const OptionsList = styled.div`
 `
@@ -244,22 +257,28 @@ export const OptionItem = styled.div`
   `}
 `
 export const MinimumPurchase = styled.div`
-  min-width: 80px;
+  min-width: 75px;
   ${({ isHeader }) => isHeader ? css`
     font-size: 12px;
     font-weight: 700;
   ` : css`
     font-size: 14px;
   `}
+  @media (min-width: 450px) {
+    min-width: 80px;
+  }
 `
 export const MaxPurchase = styled.div`
-  min-width: 80px;
+  min-width: 75px;
   ${({ isHeader }) => isHeader ? css`
     font-size: 12px;
     font-weight: 700;
   ` : css`
     font-size: 14px;
   `}
+  @media (min-width: 450px) {
+    min-width: 80px;
+  }
 `
 export const ArrowWrpper = styled.div`
   width: 30px;
@@ -275,12 +294,19 @@ export const ArrowWrpper = styled.div`
 export const DragImageWrapper = styled.div`
   img {
     ${props => props.theme?.rtl ? css`
-      margin-left: 20px;
+      margin-left: 10px;
     ` : css`
-      margin-right: 20px;
+      margin-right: 10px;
     `}
     &:hover {
       cursor: grab;
     }
+    @media (min-width: 450px) {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 20px;
+      ` : css`
+        margin-right: 20px;
+      `}
+    }
   }
 `

package/src/components/Stores/ProductExtras/index.js

@@ -205,6 +205,7 @@ const ProductExtrasUI = (props) => {
               width='80%'
               open={openExtraDetails}
               onClose={() => handleCloseExtraDetails()}
+              padding='20px 0 0 0'
             >
               <ProductExtraOptions
                 open={openExtraDetails}

package/src/components/Stores/ProductIngredient/index.js

@@ -82,6 +82,7 @@ export const ProductIngredient = (props) => {
           width='80%'
           open={openDetails}
           onClose={() => handleCloseDetails()}
+          hideCloseDefault
         >
           <ProductIngredientDetails
             {...props}

package/src/components/Stores/ProductIngredientDetails/styles.js

@@ -43,16 +43,6 @@ export const Header = styled.div`
   > div {
     display: flex;
     align-items: center;
-    > button {
-      display: none;
-    }
-  }
-  @media (min-width: 1000px) {
-    > div {
-      > button {
-        display: block;
-      }
-    }
   }
 `
 

package/src/components/Stores/ProductStartGuide/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
-import { FileMedical, ColumnsGap } from 'react-bootstrap-icons'
+import { FileMedical, ColumnsGap, FileEarmarkArrowUp, TabletLandscape } from 'react-bootstrap-icons'
 import Skeleton from 'react-loading-skeleton'
 import {
   Container,
@@ -10,17 +10,33 @@ import {
 } from './styles'
 
 export const ProductStartGuide = (props) => {
-  const { onClose, setStep, countriesState } = props
+  const { onClose, setStep, setOption, countriesState } = props
   const [, t] = useLanguage()
 
   const guideList = [
     { id: 1, title: t('START_WITH_AN_EMPTY_MENU', 'Start with an empty Menu'), description: t('START_WITH_AN_EMPTY_MENU_DESC', 'Start with an empty Menu and enter your menu items'), icon: <FileMedical />, enabled: true },
-    { id: 2, title: t('IMPORT_MENU_ONLY_USA_CANADA', 'Import Menu (Only if USA and Canada)'), description: t('IMPORT_MENU_ONLY_USA_CANADA_DESC', 'Import your menu from the Ordering Network that includes over 1M restaurants and stores from the US and Canada.'), icon: <ColumnsGap />, enabled: countriesState?.enabled }
+    { id: 2, title: t('IMPORT_MENU_ONLY_USA_CANADA', 'Import Menu (Only if USA and Canada)'), description: t('IMPORT_MENU_ONLY_USA_CANADA_DESC', 'Import your menu from the Ordering Network that includes over 1M restaurants and stores from the US and Canada.'), icon: <ColumnsGap />, enabled: countriesState?.enabled },
+    { id: 3, title: t('UPLOAD_YOUR_MENU', 'Upload your Menu'), description: t('UPLOAD_YOUR_MENU_DESC', 'Click to upload your menu (PDF or image file) or share your menu link (For website or another online ordering system)'), icon: <FileEarmarkArrowUp />, enabled: true },
+    { id: 4, title: t('INTEGRATE_MY_POS_TO_EXTRACT_MENU', 'Integrate my POS to extract the menu'), icon: <TabletLandscape />, enabled: true }
   ]
 
   const handleChangeStep = (id) => {
-    if (id === 1) onClose()
-    else if (id === 2) setStep(2)
+    switch (id) {
+      case 2:
+        setStep(2)
+        setOption(2)
+        break
+      case 3:
+        setStep(2)
+        setOption(3)
+        break
+      case 4:
+        setStep(2)
+        setOption(4)
+        break
+      default:
+        onClose()
+    }
   }
 
   return (
@@ -51,7 +67,7 @@ export const ProductStartGuide = (props) => {
           </IconWrapper>
           <InfoWrapper>
             <h3>{guide.title}</h3>
-            <p>{guide.description}</p>
+            {guide.description && <p>{guide.description}</p>}
           </InfoWrapper>
         </GuideItemContainer>
       ))}

package/src/components/Stores/ProductStartGuide/styles.js

@@ -47,7 +47,7 @@ export const InfoWrapper = styled.div`
     font-weight: 600;
     font-size: 14px;
     line-height: 21px;
-    margin: 0%;
+    margin: 0;
   }
   p {
     margin: 0;

package/src/components/Stores/ProductStep/index.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useLanguage, useEvent, ProductStep as ProductStepController } from 'ordering-components-admin-external'
 import { ProductStartGuide } from '../ProductStartGuide'
 import { RestaurantSelectGuide } from '../RestaurantSelectGuide'
+import { UploadMenuGuide } from '../UploadMenuGuide'
 import { useTheme } from 'styled-components'
 import { Button } from '../../../styles'
 import {
@@ -10,6 +11,7 @@ import {
   ImageContent,
   ButtonWrapper
 } from './styles'
+import { SelectPosGuide } from '../SelectPosGuide'
 
 const ProductStepUI = (props) => {
   const {
@@ -30,6 +32,7 @@ const ProductStepUI = (props) => {
   const [events] = useEvent()
 
   const [step, setStep] = useState(1)
+  const [option, setOption] = useState('')
 
   const handleCheckMenu = () => {
     events.emit('go_to_page', { page: 'store', params: { store: business?._id } })
@@ -38,8 +41,8 @@ const ProductStepUI = (props) => {
 
   return (
     <Container>
-      {step === 1 && <ProductStartGuide onClose={onClose} setStep={setStep} countriesState={countriesState} />}
-      {step === 2 && (
+      {step === 1 && <ProductStartGuide onClose={onClose} setStep={setStep} setOption={setOption} countriesState={countriesState} />}
+      {step === 2 && option === 2 && (
         <RestaurantSelectGuide
           setBusiness={setBusiness}
           setStep={setStep}
@@ -52,7 +55,7 @@ const ProductStepUI = (props) => {
           isLoading={isLoading}
         />
       )}
-      {step === 3 && actionState?.loading && (
+      {step === 3 && option === 2 && actionState?.loading && (
         <ImportMenuContainer>
           <h2>{t('WE_ARE_IMPORTING_YOUR_MENU', 'We are importing your menu.')}</h2>
           <ImageContent>
@@ -60,7 +63,7 @@ const ProductStepUI = (props) => {
           </ImageContent>
         </ImportMenuContainer>
       )}
-      {step === 3 && !actionState?.loading && (
+      {step === 3 && option === 2 && !actionState?.loading && (
         <ImportMenuContainer>
           <h2>{t('YOUR_MENU_HAS_BEEN_IMPORTED', 'Your menu has been imported')}</h2>
           <ImageContent>
@@ -71,6 +74,31 @@ const ProductStepUI = (props) => {
           </ButtonWrapper>
         </ImportMenuContainer>
       )}
+      {step === 2 && option === 3 && (
+        <UploadMenuGuide
+          handleBack={() => setStep(1)}
+          onClose={onClose}
+          handleSuccess={() => setStep(3)}
+        />
+      )}
+      {step === 3 && option === 3 && (
+        <ImportMenuContainer>
+          <h2>{t('ORDERING', 'Ordering')}</h2>
+          <p>{t('WE_ARE_IMPORTING_YOUR_PRODUCTS', 'we are importing your products')}</p>
+        </ImportMenuContainer>
+      )}
+      {step === 2 && option === 4 && (
+        <SelectPosGuide
+          setStep={setStep}
+          handleSuccess={() => setStep(3)}
+        />
+      )}
+      {step === 3 && option === 4 && (
+        <ImportMenuContainer>
+          <h2>{t('ORDERING', 'Ordering')}</h2>
+          <p>{t('WE_WILL_CONTACT_YOU_ASAP', 'we will contact you As soon as possible')}</p>
+        </ImportMenuContainer>
+      )}
     </Container>
   )
 }

package/src/components/Stores/ProductStep/styles.js

@@ -10,6 +10,11 @@ export const ImportMenuContainer = styled.div`
     text-align: center;
     margin: 0;
   }
+  p {
+    font-size: 20px;
+    text-align: center;
+    margin: 25px 0;
+  }
 `
 
 export const ButtonWrapper = styled.div`

package/src/components/Stores/RestaurantSelectGuide/styles.js

@@ -12,7 +12,7 @@ export const Container = styled.div`
 `
 
 export const SelectWrapper = styled.div`
-  margin-top: 30px;
+  margin-top: 35px;
 
   label {
     font-weight: 400;
@@ -48,7 +48,7 @@ export const SelectWrapper = styled.div`
       }
 
       .list-wrapper {
-        max-height: 200px;
+        max-height: 109px;
         > div {
           padding: 6px 10px;
           &:hover {
@@ -82,6 +82,7 @@ export const Option = styled.div`
 
 export const ButtonWrapper = styled.div`
   margin-top: 60px;
+  margin-bottom: 5px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -106,6 +107,7 @@ export const ButtonWrapper = styled.div`
 `
 
 export const SearchWrapper = styled.div`
+  margin-top: 30px;
   label {
     font-weight: 400;
     font-size: 14px;

package/src/components/Stores/SelectPosGuide/index.js

@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, SelectPOS } from 'ordering-components-admin-external'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { Button } from '../../../styles'
+import { ArrowRight } from 'react-bootstrap-icons'
+import { Alert } from '../../Shared'
+import { useTheme } from 'styled-components'
+import {
+  Container,
+  SelectPosWrapper,
+  Option,
+  ButtonWrapper,
+  CheckMateAndDeliverectList,
+  PosItem
+} from './styles'
+
+const SelectPosGuideUI = (props) => {
+  const { handleSendMessage, changeFormState, formState } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const [typeOptions, setTypeOptions] = useState(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [search, setSearch] = useState('')
+  const [hasOther, setHasOther] = useState(false)
+
+  const typeList = [
+    { value: 'square', content: <Option><img src={theme.images.pos.square} alt='' /><span>{t('SQUARE', 'Square')}</span></Option> },
+    { value: 'toast', content: <Option><img src={theme.images.pos.toast} alt='' /><span>{t('TOAST', 'Toast')}</span></Option> },
+    { value: 'vectron', content: <Option><img src={theme.images.pos.vectron} alt='' /><span>{t('VECTRON', 'Vectron')}</span></Option> },
+    { value: 'clover', content: <Option><img src={theme.images.pos.clover} alt='' /><span>{t('CLOVER', 'Clover')}</span></Option> },
+    { value: 'other', content: <Option><span>{t('OTHER', 'Other')}</span></Option> }
+  ]
+
+  const checkMateAndDeliverectList = [
+    { key: 'par', title: 'PAR Tech - Pixel Point', description: 'POS systems for restaurants', icon: theme.images.pos.par },
+    { key: 'el_cheff', title: 'El Cheff', description: 'POS systems for restaurants', icon: theme.images.pos.elCheff },
+    { key: 'givex', title: 'Givex', description: 'POS systems for restaurants', icon: theme.images.pos.givex },
+    { key: 'ncr_aloha', title: 'NCR Aloha', description: 'POS systems for restaurants', icon: theme.images.pos.ncrAloha },
+    { key: 'national_soft', title: 'National Soft', description: 'POS systems for restaurants', icon: theme.images.pos.nationalSoft },
+    { key: 'posist', title: 'Posist', description: 'POS systems for restaurants', icon: theme.images.pos.posist },
+    { key: 'solution_delivery', title: 'Solutions 4 Delivery', description: 'POS systems for restaurants', icon: theme.images.pos.solutionDelivery },
+    { key: 'xetux', title: 'Telnet', description: 'POS systems for restaurants', icon: theme.images.pos.xetux },
+    { key: 'vista_entertainment', title: 'Vista Entertainment Solutions', description: 'POS systems for restaurants', icon: theme.images.pos.vistaEntertainment },
+    { key: 'soft_restaurant', title: 'SoftRestaurant', description: 'POS systems for restaurants', icon: theme.images.pos.softRestaurant },
+    { key: 'telnet', title: 'Telnet', description: 'POS systems for restaurants', icon: theme.images.pos.telnet },
+    { key: 'rest_pro', title: 'Rest Pro', description: 'POS systems for restaurants', icon: theme.images.pos.restPro },
+    { key: 'infocaja', title: 'Infocaja', description: 'POS systems for restaurants', icon: theme.images.pos.infocaja },
+    { key: 'eposNow', title: 'Epos Now', description: 'POS systems for restaurants', icon: theme.images.pos.eposNow },
+    { key: 'hippos', title: 'Hippos', description: 'POS systems for restaurants', icon: theme.images.pos.hippos },
+    { key: 'light_speed', title: 'Lightspeed', description: 'POS systems for restaurants', icon: theme.images.pos.lightSpeed },
+    { key: 'micros_res_3700', title: 'Micros RES 3700', description: 'POS systems for restaurants', icon: theme.images.pos.microsRes },
+    { key: 'micros_simphony', title: 'Micros Simphony', description: 'POS systems for restaurants', icon: theme.images.pos.microsSimphony },
+    { key: 'prologic_first', title: 'Prologic First', description: 'POS systems for restaurants', icon: theme.images.pos.prologicFirst },
+    { key: 'touch_bistro', title: 'TouchBistro', description: 'POS systems for restaurants', icon: theme.images.pos.touchBistro },
+    { key: 'revel', title: 'Revel', description: 'POS systems for restaurants', icon: theme.images.pos.revel },
+    { key: 'spot_on', title: 'SpotOn', description: 'POS systems for restaurants', icon: theme.images.pos.spotOn },
+    { key: 'heart_land', title: 'Heartland', description: 'POS systems for restaurants', icon: theme.images.pos.heartLand },
+    { key: 'focus', title: 'Focus', description: 'POS systems for restaurants', icon: theme.images.pos.focus },
+    { key: 'speed_line', title: 'SpeedLine', description: 'POS systems for restaurants', icon: theme.images.pos.speedLine },
+    { key: 'maitre', title: 'Maitre’D', description: 'POS systems for restaurants', icon: theme.images.pos.maitre },
+    { key: 'ncr_silver', title: 'NCR Silver', description: 'POS systems for restaurants', icon: theme.images.pos.ncrSilver },
+    { key: 'qu_beyond_pos', title: 'QU Beyond POS', description: 'POS systems for restaurants', icon: theme.images.pos.quBeyondPos },
+    { key: 'upserve', title: 'Upserve', description: 'POS systems for restaurants', icon: theme.images.pos.upserve },
+    { key: 'diner_ware', title: 'DinerWare', description: 'POS systems for restaurants', icon: theme.images.pos.dinerWare },
+    { key: 'digital_dining', title: 'Digital Dining', description: 'POS systems for restaurants', icon: theme.images.pos.digitalDining },
+    { key: 'food_tec', title: 'FoodTec', description: 'POS systems for restaurants', icon: theme.images.pos.foodTec },
+    { key: 'salido', title: 'Salido', description: 'POS systems for restaurants', icon: theme.images.pos.salido },
+    { key: 'cake', title: 'Cake', description: 'POS systems for restaurants', icon: theme.images.pos.cake },
+    { key: 'hunger_rush', title: 'HungerRush', description: 'POS systems for restaurants', icon: theme.images.pos.hungerRush },
+    { key: 'pixel_point', title: 'PixelPoint', description: 'POS systems for restaurants', icon: theme.images.pos.pixelPoint },
+    { key: 'auphan', title: 'Auphan', description: 'POS systems for restaurants', icon: theme.images.pos.auphan },
+    { key: 'linga', title: 'Linga', description: 'POS systems for restaurants', icon: theme.images.pos.linga },
+    { key: 'one_pos', title: 'OnePOS', description: 'POS systems for restaurants', icon: theme.images.pos.onePos },
+    { key: 'edge_serv', title: 'EdgeServ', description: 'POS systems for restaurants', icon: theme.images.pos.edgeServ },
+    { key: 'talech', title: 'Talech', description: 'POS systems for restaurants', icon: theme.images.pos.talech },
+    { key: 'rezku', title: 'Rezku', description: 'POS systems for restaurants', icon: theme.images.pos.rezku },
+    { key: 'north_star', title: 'NorthStar', description: 'POS systems for restaurants', icon: theme.images.pos.northStar },
+    { key: 'order_counter', title: 'Order Counter', description: 'POS systems for restaurants', icon: theme.images.pos.orderCounter },
+    { key: 'foodics', title: 'Foodics', description: 'POS systems for restaurants', icon: theme.images.pos.foodics },
+    { key: 'i_tab_pos', title: 'iTabPOS', description: 'POS systems for restaurants', icon: theme.images.pos.iTabPos },
+    { key: 'pos_ist', title: 'POSist', description: 'POS systems for restaurants', icon: theme.images.pos.posIst },
+    { key: 'sunami_pos', title: 'Sunami POS', description: 'POS systems for restaurants', icon: theme.images.pos.sunamiPos },
+    { key: 'union', title: 'Union', description: 'POS systems for restaurants', icon: theme.images.pos.union },
+    { key: 'snappy', title: 'Snappy', description: 'POS systems for restaurants', icon: theme.images.pos.snappy },
+    { key: 'four_soft', title: '4Soft', description: 'POS systems for restaurants', icon: theme.images.pos.fourSoft },
+    { key: 'super_menu', title: 'Supermenu', description: 'POS systems for restaurants', icon: theme.images.pos.superMenu },
+    { key: 'emagine_pos', title: 'EmaginePOS', description: 'POS systems for restaurants', icon: theme.images.pos.emaginePos },
+    { key: 'paradise_pos', title: 'ParadisePOS', description: 'POS systems for restaurants', icon: theme.images.pos.paradisePos },
+    { key: 'xenial', title: 'Xenial', description: 'POS systems for restaurants', icon: theme.images.pos.xenial },
+    { key: 'tids', title: 'Tid3', description: 'POS systems for restaurants', icon: theme.images.pos.tidThree },
+    { key: 'ovvi', title: 'Ovvi', description: 'POS systems for restaurants', icon: theme.images.pos.ovvi },
+    { key: 'brink_certified', title: 'Brink Certified', description: 'POS systems for restaurants', icon: theme.images.pos.brinkCertified },
+    { key: 'rbbt_tech', title: 'Rbbt.Tech', description: 'POS systems for restaurants', icon: theme.images.pos.rbbtTech }
+  ]
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleContinue = () => {
+    if (!formState?.changes?.pos || (formState?.changes?.pos === 'other' && hasOther)) {
+      setAlertState({
+        open: true,
+        content: t('POS_REQUIRED', 'POS is required')
+      })
+      return
+    }
+    if (formState?.changes?.pos === 'other') {
+      setHasOther(true)
+      return
+    }
+    handleSendMessage()
+  }
+
+  useEffect(() => {
+    const options = typeList.filter(option => option?.value.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+    setTypeOptions(options)
+  }, [search])
+
+  useEffect(() => {
+    if (!formState?.loading && formState?.error) {
+      setAlertState({
+        open: true,
+        content: formState?.error
+      })
+    }
+  }, [formState?.error])
+
+  return (
+    <>
+      <Container>
+        {!hasOther ? (
+          <>
+            <h2>{t('SELECT_YOUR_POS', 'Select your POS')}</h2>
+            <SelectPosWrapper>
+              <Select
+                options={typeOptions}
+                className='select'
+                defaultValue={formState?.changes?.pos || ''}
+                placeholder={t('SELECT_YOUR_POS', 'Select your POS')}
+                onChange={(value) => changeFormState({ pos: value })}
+                isShowSearchBar
+                searchBarIsCustomLayout
+                searchBarIsNotLazyLoad
+                searchValue={search}
+                handleChangeSearch={(val) => setSearch(val)}
+              />
+            </SelectPosWrapper>
+          </>
+        ) : (
+          <>
+            <h2 className='other'>{t('OTHER', 'Other')}</h2>
+            <CheckMateAndDeliverectList>
+              {checkMateAndDeliverectList.map((item, idx) => (
+                <PosItem
+                  key={idx}
+                  active={formState?.changes?.pos === item.key}
+                  onClick={() => changeFormState({ pos: item.key })}
+                >
+                  <img src={item.icon} alt='' />
+                  <div>
+                    <h3>{item.title}</h3>
+                    <p>{item.description}</p>
+                  </div>
+                </PosItem>
+              ))}
+            </CheckMateAndDeliverectList>
+          </>
+        )}
+        <ButtonWrapper hasOther={hasOther}>
+          <Button color='primary' onClick={handleContinue}>
+            {hasOther ? t('SEND_REQUEST', 'Send Request') : t('CONTINUE', 'Continue')}
+            {!hasOther && <ArrowRight />}
+          </Button>
+        </ButtonWrapper>
+      </Container>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const SelectPosGuide = (props) => {
+  const selectPosGuideProps = {
+    ...props,
+    UIComponent: SelectPosGuideUI
+  }
+  return <SelectPOS {...selectPosGuideProps} />
+}

package/src/components/Stores/SelectPosGuide/styles.js

@@ -0,0 +1,146 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 35px;
+    &.other {
+      text-align: left;
+    }
+  }
+`
+
+export const SelectPosWrapper = styled.div`
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+
+  > div {
+    width: 100%;
+    border: none;
+
+    > div:first-child {
+      background-color: ${props => props.theme.colors.secundary};
+      height: 43px;
+      border: none;
+      border-radius: 7.6px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      color: ${props => props.theme.colors.secundaryContrast};
+    }
+    .list {
+      background-color: ${props => props.theme.colors.secundary};
+      border: none;
+      
+      .search-bar-container {
+        padding: 10px;
+        input {
+          background-color: transparent;
+          height: 44px;
+        }
+      }
+
+      .list-wrapper {
+        > div {
+          padding: 6px 10px;
+          &:hover {
+            background-color: #f2f5f7;
+          }
+        }
+      }
+    }
+  }
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    color: ${props => props.theme.colors.secundaryContrast};
+  }
+  img {
+    margin-right: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 15px;
+      margin-right: 0;
+    `}
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  margin-top: 80px;
+  button {
+    width: 100%;
+    border-radius: 8px;
+    height: 44px;
+    position: relative;
+    svg {
+      position: absolute;
+      right: 15px;
+      top: 10px;
+      font-size: 21px;
+    }
+  }
+
+  ${({ hasOther }) => hasOther && css`
+    margin-top: 15px;
+  `}
+`
+
+export const CheckMateAndDeliverectList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -12px;
+  width: calc(100% + 24px);
+  max-height: 68vh;
+  overflow: auto;
+  > div {
+    margin: 6px 12px;
+    width: calc(33.33% - 24px);
+  }
+`
+
+export const PosItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 8px;
+  min-height: 78px;
+  cursor: pointer;
+  ${({ active }) => active && css`
+    border: 1px solid ${props => props.theme.colors.primary};
+  `}
+  img {
+    margin-right: 5px;
+    ${props => props.theme.rtl && css`
+      margin-left: 5px;
+      margin-right: 0;
+    `}
+  }
+  > div {
+    h3 {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 21px;
+      margin: 0;
+    }
+    p {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      margin: 0;
+    }
+  }
+`