ordering-ui-external 10.4.1 → 10.5.0

package/src/themes/five/src/components/PhoneAutocomplete/index.js

@@ -4,7 +4,8 @@ import {
   PhoneAutocomplete as PhoneAutocompleteController,
   useLanguage,
   useOrder,
-  useCustomer
+  useCustomer,
+  useConfig
 } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 
@@ -22,7 +23,14 @@ import {
   Slogan,
   UserEdit,
   WrappBtn,
-  SelectContainer
+  SelectContainer,
+  TypesContainer,
+  TypeButton,
+  IconTypeButton,
+  AdditionalTypesContainer,
+  PhoneAutocompleteContainer,
+  ImageWrapper,
+  ContinueButton
 } from './styles'
 
 import MdcCellphoneAndroid from '@meronex/icons/mdc/MdcCellphoneAndroid'
@@ -39,19 +47,26 @@ const PhoneAutocompleteUI = (props) => {
     onChangeNumber,
     setCustomerState,
     countryCallingCode,
-    onRedirectPage
+    onRedirectPage,
+    urlPhone,
+    orderTypes,
+    localPhoneCode
   } = props
-  const [orderState] = useOrder()
+  const allOrderTypes = [1, 2, 3, 4, 5]
+  const pickupTypes = [2, 3, 4, 5]
+  const [orderState, { changeType }] = useOrder()
   const [, t] = useLanguage()
   const theme = useTheme()
   const [, { deleteUserCustomer }] = useCustomer()
+  const [configState] = useConfig()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [inputValue, setInputValue] = useState('')
+  const [inputValue, setInputValue] = useState(urlPhone ?? '')
   const [optSelected, setOptSelected] = useState(null)
   const [isOpenUserData, setIsOpenUserData] = useState(false)
   const [isAddressFormOpen, setIsAddressFormOpen] = useState(false)
+  const [isPickupSelected, setIsPickupSelected] = useState(pickupTypes.includes(orderState?.options?.type))
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
-
+  const configTypes = configState?.configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const userName = userCustomer?.lastname
     ? `${userCustomer?.name} ${userCustomer?.lastname}`
     : userCustomer?.name
@@ -75,6 +90,15 @@ const PhoneAutocompleteUI = (props) => {
     }
   }
 
+  const handleChangeType = (value) => {
+    if (!orderState?.loading) {
+      changeType(value)
+      if (value === 1) {
+        setIsPickupSelected(false)
+      }
+    }
+  }
+
   useEffect(() => {
     if (customersPhones?.error) {
       setAlertState({ open: true, content: [customersPhones?.error] })
@@ -97,13 +121,16 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const onChange = (option) => {
-    if (!option) { onChangeNumber('') }
     setOptSelected(option)
     setInputValue(option ? option?.value : '')
+    if (!option) { onChangeNumber(''); return }
     const user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)
     if (user) {
       setCustomerState({ ...customerState, result: user })
-      setOpenModal({ ...openModal, customer: true })
+      setOpenModal({ signup: false, customer: true })
+    } else {
+      setCustomerState({ ...customerState, result: { error: false } })
+      setOpenModal({ customer: false, signup: true })
     }
   }
 
@@ -119,11 +146,17 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const handleCloseAddressList = () => {
-    setOpenModal({ openModal, customer: false })
+    setOpenModal({ ...openModal, customer: false })
     setCustomerState({ ...customerState, result: { error: false } })
     deleteUserCustomer(true)
   }
 
+  const handleChangeToPickup = () => {
+    const firstEnabledPickupType = orderTypes.find(type => configTypes?.includes(type.value) && type.value !== 1)?.value
+    handleChangeType(firstEnabledPickupType)
+    setIsPickupSelected(true)
+  }
+
   const optionsToSelect = customersPhones.users.map(user => {
     const obj = {}
     obj.value = user.cellphone || user.phone
@@ -131,53 +164,140 @@ const PhoneAutocompleteUI = (props) => {
     return obj
   }) || []
 
+  useEffect(() => {
+    if (!urlPhone) return
+    onInputChange(urlPhone, { action: 'url' })
+    onChange({ value: urlPhone, label: urlPhone })
+  }, [urlPhone, customersPhones?.users?.length])
+
+  useEffect(() => {
+    if (pickupTypes.includes(orderState?.options?.type)) {
+      setIsPickupSelected(true)
+    }
+  }, [orderState?.options?.type])
+
+  const OrderTypesComponent = () => {
+    return (
+      <>
+        {orderTypes && (configTypes ? orderTypes.filter(type => configTypes?.includes(type.value) && type.value !== 1) : orderTypes).map((item, i) => (
+          <Button
+            key={item.value}
+            onClick={() => handleChangeType(item.value)}
+            color={orderState?.options?.type === item?.value ? 'primary' : 'secondary'}
+            disabled={orderState?.loading}
+            className={orderState?.options?.type !== item?.value ? 'activated' : ''}
+          >
+            {item.text}
+          </Button>
+        ))}
+      </>
+    )
+  }
+
   return (
     <>
-      <PhoneContainer bgimage={theme.images?.general?.homeHero}>
+      <PhoneContainer>
         <ContentWrapper>
           <Title>{t('TITLE_HOME_CALLCENTER', 'Welcome to your Ordering Call Center.')}</Title>
-          <Slogan>{t('SUBTITLE_HOME_CALLCENTER', 'Start First by adding the customers\' phone number')}</Slogan>
-          {!userCustomer && (
-            <SelectContainer>
-              <MdcCellphoneAndroid size={26} />
-              <Select
-                isSearchable
-                isClearable
-                className='basic-single'
-                classNamePrefix='select'
-                placeholder={t('PHONE_NUMBER', 'Phone number')}
-                value={optSelected}
-                noOptionsMessage={() => inputValue?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')}
-                inputValue={!optSelected ? inputValue : ''}
-                onChange={onChange}
-                onInputChange={onInputChange}
-                isLoading={customersPhones?.loading}
-                options={optionsToSelect}
-              />
-            </SelectContainer>
+          <Slogan>{t('SUBTITLE_HOME_CALLCENTER', 'Start first by selecting a delivery type')}</Slogan>
+          {!(userCustomer && orderState?.options?.address?.address) && (
+            <TypesContainer>
+              {configTypes.includes(1) && (
+                <TypeButton onClick={() => handleChangeType(1)} disabled={orderState?.loading} activated={!isPickupSelected}>
+                  <IconTypeButton activated={!isPickupSelected}>
+                    <img
+                      src={theme?.images?.general?.deliveryIco}
+                      width={20}
+                      height={20}
+                    />
+                  </IconTypeButton>
+                  <p>{t('DELIVERY', 'Delivery')}</p>
+                </TypeButton>
+              )}
+              {configTypes.some(type => pickupTypes.includes(type)) && (
+                <TypeButton
+                  disabled={orderState?.loading}
+                  activated={isPickupSelected}
+                  onClick={() => handleChangeToPickup()}
+                >
+                  <IconTypeButton activated={isPickupSelected}>
+                    <img
+                      src={theme?.images?.general?.pickupIco}
+                      width={22}
+                      height={22}
+                    />
+                  </IconTypeButton>
+                  <p>{t('PICKUP', 'Pickup')}</p>
+                </TypeButton>
+              )}
+            </TypesContainer>
+          )}
+          {isPickupSelected && (
+            <>
+              <p>{t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')}</p>
+              <AdditionalTypesContainer>
+                <OrderTypesComponent />
+              </AdditionalTypesContainer>
+            </>
+          )}
+          {configTypes.includes(orderState?.options?.type) && (
+            <>
+              {!userCustomer && (
+                <PhoneAutocompleteContainer>
+                  <h2>
+                    {t('ADDING_CUSTOMERS_PHONE_NUMBER', 'Adding the customers’ phone number')}
+                  </h2>
+                  <WrappBtn>
+                    <Button
+                      color={(inputValue || (userCustomer && orderState?.options?.address?.address)) ? 'primary' : 'secundary'}
+                      onMouseDown={() => !(userCustomer && orderState?.options?.address?.address) ? createNewUser() : handleFindClick()}
+                      disabled={(!inputValue && !(userCustomer && orderState?.options?.address?.address))}
+                    >
+                      {
+                        !(userCustomer && orderState?.options?.address?.address)
+                          ? t('CREATE_CUSTOMER', 'Create new customer')
+                          : `${t('CONTINUE_WITH', 'Continue with')} ${userName}`
+                      }
+                    </Button>
+                  </WrappBtn>
+                  <SelectContainer>
+                    <MdcCellphoneAndroid size={18} color={theme?.colors?.primary} />
+                    <Select
+                      isSearchable
+                      isClearable
+                      className='basic-single'
+                      classNamePrefix='select'
+                      placeholder={t('PHONE_NUMBER', 'Phone number')}
+                      value={optSelected}
+                      noOptionsMessage={() => inputValue?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')}
+                      inputValue={!optSelected ? inputValue : ''}
+                      onChange={onChange}
+                      onInputChange={onInputChange}
+                      isLoading={customersPhones?.loading}
+                      options={optionsToSelect}
+                    />
+                    {optSelected && (
+                      <ContinueButton>
+                        <Button onClick={() => onChange(optSelected)} color='primary'>
+                          {t('CONTINUE', 'Continue')}
+                        </Button>
+                      </ContinueButton>
+                    )}
+                  </SelectContainer>
+                </PhoneAutocompleteContainer>
+              )}
+            </>
           )}
-          <WrappBtn>
-            <Button
-              color={inputValue || (userCustomer && orderState?.options?.address?.address) ? 'primary' : 'secundary'}
-              onMouseDown={() => !(userCustomer && orderState?.options?.address?.address) ? createNewUser() : handleFindClick()}
-              disabled={!inputValue && !(userCustomer && orderState?.options?.address?.address)}
-            >
-              {
-                !(userCustomer && orderState?.options?.address?.address)
-                  ? t('CREATE_CUSTOMER', 'Create new customer')
-                  : `${t('CONTINUE_WITH', 'Continue with')} ${userName}`
-              }
-            </Button>
-          </WrappBtn>
         </ContentWrapper>
+        <ImageWrapper bgimage={theme?.images?.general?.phoneHero} />
       </PhoneContainer>
       <Modal
         open={openModal.signup}
         width='80%'
-        onClose={() => setOpenModal({ openModal, signup: false })}
+        onClose={() => setOpenModal({ ...openModal, signup: false })}
       >
         <SignUpForm
-          externalPhoneNumber={`${countryCallingCode} ${optSelected?.value || phone}`}
+          externalPhoneNumber={`${localPhoneCode || countryCallingCode} ${optSelected?.value || phone}`}
           saveCustomerUser={saveCustomerUser}
           fieldsNotValid={props.fieldsNotValid}
           useChekoutFileds
@@ -210,7 +330,8 @@ const PhoneAutocompleteUI = (props) => {
                 changeOrderAddressWithDefault
                 userCustomerSetup={{
                   ...customerState?.result,
-                  phone
+                  phone,
+                  urlPhone
                 }}
                 isEnableContinueButton
                 isCustomerMode
@@ -234,9 +355,37 @@ const PhoneAutocompleteUI = (props) => {
 }
 
 export const PhoneAutocomplete = (props) => {
+  const [, t] = useLanguage()
   const phoneProps = {
     UIComponent: PhoneAutocompleteUI,
-    ...props
+    ...props,
+    orderTypes: props.orderTypes || [
+      {
+        value: 1,
+        text: t('DELIVERY', 'Delivery'),
+        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description'),
+      },
+      {
+        value: 2,
+        text: t('PICKUP', 'Pickup'),
+        description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Pickup description')
+      },
+      {
+        value: 3,
+        text: t('EAT_IN', 'Eat in'),
+        description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Eat in description')
+      },
+      {
+        value: 4,
+        text: t('CURBSIDE', 'Curbside'),
+        description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Curbside description')
+      },
+      {
+        value: 5,
+        text: t('DRIVE_THRU', 'Drive thru'),
+        description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description')
+      }
+    ]
   }
 
   return <PhoneAutocompleteController {...phoneProps} />

package/src/themes/five/src/components/PhoneAutocomplete/styles.js

@@ -1,9 +1,10 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const PhoneContainer = styled.div`
   width: 100%;
   height: calc(100vh - 97px);
-
+  display: flex;
   ${({ bgimage }) => bgimage && css`
     background-repeat: no-repeat, repeat;
     background-size: cover;
@@ -78,10 +79,7 @@ export const ContentWrapper = styled.div`
   justify-content: center;
   height: 100%;
   padding: 0px 20px 0px;
-
-  .basic-single {
-    margin-bottom: 15px;
-  }
+  width: 70%;
 
   .select__control {
     border-radius: 30px;
@@ -126,11 +124,14 @@ export const ContentWrapper = styled.div`
         padding: 0px 40px 0px;
       `}
     }
+    @media (min-width: 1400px){
+      width: 60%;
+    }
 `
 
 export const WrappBtn = styled.div`
   width: 50%;
-
+  margin-top: 20px;
   button {
     min-width: 130px;
     max-width: 400px;
@@ -145,7 +146,6 @@ export const Title = styled.h1`
   text-align: left;
   font: normal normal normal 80px ${props => props.theme.fonts.special?.name || 'Georgia'};
   letter-spacing: 0px;
-  color: #ffffff;
   text-shadow: 0px 3px 6px #00000029;
   opacity: 1;
   font-size: 35px;
@@ -160,7 +160,6 @@ export const Slogan = styled.p`
   text-align: left;
   font-size: 18px;
   letter-spacing: 0px;
-  color: #fff;
   opacity: 1;
   margin-bottom: 15px;
 
@@ -256,7 +255,7 @@ export const SelectContainer = styled.div`
   svg{
     position: absolute;
     top: 0;
-    left: 0;
+    left: 20px;
     transform: translate(50%, 70%);
     z-index: 10;
   }
@@ -264,7 +263,8 @@ export const SelectContainer = styled.div`
     width: 100%;
     .select__placeholder, .select__single-value, input {
       margin-left: 40px;
-      z-index: 100
+      z-index: 100;
+      bottom: -10px;
     }
     .select__menu {
       position: relative;
@@ -279,6 +279,18 @@ export const SelectContainer = styled.div`
         height: 30px;
       }
     }
+    .select__control {
+      height: 45px;
+      padding-left: 10px;
+    }
+    .select__indicator {
+      bottom: 8px;
+      position: relative;
+    }
+    input {
+      position: relative;
+      top: -5px;
+    }
   }
 `
 
@@ -287,3 +299,87 @@ export const SearchContainer = styled.div`
   top: 0;
   width: 90%;
 `
+
+const ImageWrapperStyled = styled.div`
+  width: 30%;
+  ${({ bgimage }) => bgimage && css`
+    background-repeat: no-repeat, repeat;
+    background-size: cover;
+    object-fit: cover;
+    background-position: center;
+  `}
+  @media (min-width: 1400px){
+    width: 40%;
+  }
+`
+
+export const ImageWrapper = (props) => {
+  const style = {}
+  style.backgroundImage = `url(${props.bgimage})`
+
+  return (
+    <ImageWrapperStyled {...props} style={style}>
+      {props.children}
+    </ImageWrapperStyled>
+  )
+}
+
+export const TypeButton = styled.div`
+  display: flex;
+  align-items: center;
+  width: 215px;
+  height: 75px;
+  border-radius: 7.6px;
+  padding: 16px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
+  margin-right: 32px;
+  margin-bottom: 32px;
+  cursor: pointer;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.primary : theme?.colors?.white};
+  p{
+    margin: 0;
+    margin-left: 33px;
+    ${({ activated, theme }) => activated && css`
+      color: ${theme?.colors?.white};
+    `}
+  }
+`
+
+export const IconTypeButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.white : '#F3F9FF'};
+  border-radius: 44px;
+`
+
+export const TypesContainer = styled.div`
+  display: flex;
+`
+
+export const AdditionalTypesContainer = styled.div`
+  width: 60%;
+  display: flex;
+  margin-bottom: 20px;
+  button {
+    padding: 4px 10px;
+    border-radius: 50px;
+    font-size: 10px;
+    line-height: 0;
+    height: 25px;
+    margin-right: 20px;
+  }
+  .activated {
+    color: ${({ theme }) => theme?.colors?.darkTextColor}
+  }
+`
+
+export const PhoneAutocompleteContainer = styled.div`
+
+  h2 {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+`

package/src/themes/five/src/components/ProductForm/index.js

@@ -416,6 +416,7 @@ const ProductOptionsUI = (props) => {
               observer
               observeParents
               parallax
+              slidesPerView={1}
               thumbs={{ swiper: thumbsSwiper }} className='mySwiper2'
               onSlideChange={() => handleSlideChange()}
             >

package/src/themes/five/src/components/SingleProductCard/layouts/original/styles.js

@@ -64,7 +64,7 @@ export const CardContainer = styled.div`
       `}
     }
   `}
-
+  
   `}
 `
 

package/src/themes/five/src/components/UserFormDetails/index.js

@@ -14,8 +14,7 @@ import {
   InputPhoneNumberWrapper,
   LanguageSelectorWrapper,
   SwitchWrapper,
-  NotificationsGroupSwitchWrapper,
-  TextLinkWrapper
+  NotificationsGroupSwitchWrapper
 } from './styles'
 
 import { Switch } from '../../../../../styles/Switch'
@@ -331,7 +330,7 @@ export const UserFormDetailsUI = (props) => {
                 <BeforeMidComponents key={i} {...props} />))
             }
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
-              showField && showField(field.code) && showFieldWithTheme(field.code) && (
+              ((showField && showField(field.code) && showFieldWithTheme(field.code)) || user?.guest_id) && (
                 <React.Fragment key={field.id}>
                   {field.code === 'email' ? (
                     ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
@@ -381,7 +380,7 @@ export const UserFormDetailsUI = (props) => {
                 </React.Fragment>
               )
             )}
-            {showInputBirthday && (
+            {((!user?.guest_id && showInputBirthday) || (user?.guest_id && requiredFields.includes('birthdate'))) && (
               <InputPhoneNumberWrapper>
                 <p>{t('BIRTHDATE', 'Birthdate')}</p>
                 <Input
@@ -392,11 +391,11 @@ export const UserFormDetailsUI = (props) => {
                   onFocus={() => setOpenCalendar(true)}
                 />
                 {openCalendar && (
-                <DatePickerUI value={birthdate} onChange={_handleChangeDate} name={'birthdate'}/>
+                  <DatePickerUI value={birthdate} onChange={_handleChangeDate} name={'birthdate'}/>
                 )}
               </InputPhoneNumberWrapper>
             )}
-            {!!showInputPhoneNumber && showCustomerCellphone && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
+            {((!user?.guest_id && !!showInputPhoneNumber) || (user?.guest_id && requiredFields.includes('cellphone'))) && showCustomerCellphone && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
               <InputPhoneNumberWrapper>
                 <p>{t('PHONE', 'Phone')}</p>
                 <InputPhoneNumber
@@ -498,7 +497,7 @@ export const UserFormDetailsUI = (props) => {
                   {formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
                 </Button>
               )}
-              {requiredFields && !userSession?.guest_id && (
+              {requiredFields && (
                 <Button
                   id='form-btn'
                   color='primary'
@@ -509,26 +508,6 @@ export const UserFormDetailsUI = (props) => {
                 </Button>
               )}
             </ActionsForm>
-            {requiredFields && isCheckout && userSession?.guest_id && (
-              <>
-                <Button
-                  id='form-btn'
-                  color='primary'
-                  type='button'
-                  onClick={() => setModalIsOpen(true)}
-                  disabled={formState.loading}
-                >
-                  {formState.loading ? t('UPDATING', 'Updating...') : t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')}
-                </Button>
-                {isAllowGuest && (
-                  <TextLinkWrapper>
-                    <span onClick={() => handlePlaceOrderAsGuest()}>
-                      {t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}
-                    </span>
-                  </TextLinkWrapper>
-                )}
-              </>
-            )}
           </>
         ) : (
           <SkeletonForm>

package/src/themes/five/src/components/UserFormDetails/styles.js

@@ -208,19 +208,3 @@ export const SwitchWrapper = styled.div`
   justify-content: space-between;
   width: 100%;
 `
-
-export const TextLinkWrapper = styled.span`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-top: 15px;
-  span {
-    font-size: 14px;
-    text-align: center;
-    cursor: pointer;
-    color: ${props => props.theme.colors.primary};
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-`

package/template/assets/images/delivery.svg

@@ -0,0 +1,11 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11706_62033)">
+<path d="M15.7498 17.0625C15.7498 17.1495 15.7844 17.233 15.8459 17.2945C15.9075 17.3561 15.9909 17.3906 16.078 17.3906H16.4061V18.1722L15.9313 18.4095L16.2246 18.9968L16.7342 18.7418L17.2438 18.9968L17.5371 18.4095L17.0623 18.1722V17.3906H17.3905C17.4775 17.3906 17.5609 17.3561 17.6225 17.2945C17.684 17.233 17.7186 17.1495 17.7186 17.0625C17.7346 16.6065 17.7934 16.153 17.8941 15.708C18.0001 15.508 18.0526 15.284 18.0464 15.0577C18.0402 14.8314 17.9756 14.6106 17.8589 14.4167C17.7422 14.2228 17.5773 14.0623 17.3803 13.9509C17.1832 13.8395 16.9607 13.781 16.7344 13.781C16.508 13.781 16.2855 13.8395 16.0885 13.9509C15.8914 14.0623 15.7265 14.2228 15.6098 14.4167C15.4931 14.6106 15.4285 14.8314 15.4224 15.0577C15.4162 15.284 15.4686 15.508 15.5746 15.708C15.6752 16.153 15.7339 16.6065 15.7498 17.0625ZM16.7342 14.4375C16.8498 14.4374 16.9634 14.4679 17.0634 14.5258C17.1634 14.5837 17.2464 14.667 17.3039 14.7672C17.3614 14.8675 17.3914 14.9812 17.3909 15.0968C17.3904 15.2124 17.3593 15.3258 17.3009 15.4255C17.2833 15.4551 17.2705 15.4873 17.2631 15.521C17.174 15.921 17.1122 16.3266 17.0784 16.735H16.3894C16.3555 16.3266 16.2938 15.921 16.2046 15.521C16.1974 15.4871 16.1846 15.4546 16.1669 15.4248C16.1086 15.3251 16.0777 15.2117 16.0773 15.0961C16.0768 14.9806 16.1069 14.867 16.1645 14.7668C16.2221 14.6666 16.3051 14.5834 16.4051 14.5256C16.5051 14.4678 16.6187 14.4374 16.7342 14.4375Z" fill="#2C7BE5"/>
+<path d="M20.6391 12.6502L20.0156 11.4069V9.84375C20.0156 9.75673 19.9811 9.67327 19.9195 9.61173C19.858 9.55019 19.7745 9.51562 19.6875 9.51562H13.7813C13.6942 9.51562 13.6108 9.55019 13.5492 9.61173C13.4877 9.67327 13.4531 9.75673 13.4531 9.84375V11.4069L12.8297 12.6502H12.833C12.8095 12.6955 12.7971 12.7458 12.7969 12.7969V13.1631C12.697 13.1147 12.5938 13.0734 12.4881 13.0397L10.2096 12.3375C10.6731 11.9397 11.0524 11.4531 11.3251 10.9065C11.5978 10.3599 11.7584 9.76428 11.7974 9.15469C12.1687 9.08114 12.5031 8.8815 12.744 8.5896C12.9848 8.2977 13.1174 7.9315 13.1192 7.55304C13.121 7.17459 12.9918 6.80716 12.7537 6.51301C12.5156 6.21886 12.1831 6.0161 11.8125 5.93906V3.9375C11.8114 2.98058 11.4308 2.06318 10.7541 1.38653C10.0775 0.709889 9.16006 0.329254 8.20314 0.328125H6.23439C5.27747 0.329254 4.36007 0.709889 3.68342 1.38653C3.00678 2.06318 2.62614 2.98058 2.62502 3.9375V5.93906C2.25448 6.0161 1.92197 6.21886 1.68383 6.51301C1.44569 6.80716 1.31657 7.17459 1.31834 7.55304C1.32012 7.9315 1.45269 8.2977 1.69358 8.5896C1.93447 8.8815 2.26886 9.08114 2.64011 9.15469C2.67918 9.76428 2.83978 10.3599 3.11246 10.9065C3.38514 11.4531 3.7644 11.9396 4.22791 12.3375L1.94941 13.0397C1.47899 13.1827 1.06721 13.4736 0.775161 13.8691C0.483112 14.2647 0.326353 14.7438 0.32814 15.2355V20.3438C0.32814 20.4308 0.36271 20.5142 0.424246 20.5758C0.485781 20.6373 0.569241 20.6719 0.656265 20.6719H20.3438C20.4308 20.6719 20.5142 20.6373 20.5758 20.5758C20.6373 20.5142 20.6719 20.4308 20.6719 20.3438V12.7969C20.6724 12.7461 20.6612 12.6959 20.6391 12.6502ZM19.4847 11.8125L19.8129 12.4688H13.6559L13.984 11.8125H19.4847ZM19.3594 10.1719V11.1562H14.1094V10.1719H19.3594ZM4.90056 12.8185C5.60247 13.234 6.40313 13.4531 7.21877 13.4531C8.0344 13.4531 8.83506 13.234 9.53697 12.8185L9.56978 12.829C9.32524 13.2305 8.97909 13.5602 8.56628 13.7851C8.15348 14.0099 7.68865 14.1217 7.21877 14.1094C6.74878 14.122 6.28379 14.0103 5.8708 13.7856C5.45781 13.5609 5.11147 13.2311 4.86677 12.8297L4.90056 12.8185ZM10.9535 5.25L10.7159 5.7248C10.6889 5.77944 10.647 5.8254 10.5952 5.85747C10.5433 5.88955 10.4835 5.90645 10.4226 5.90625H4.01495C3.95398 5.90645 3.89418 5.88955 3.84233 5.85747C3.79048 5.8254 3.74866 5.77944 3.72161 5.7248L3.48405 5.25H10.9535ZM5.27955 4.59375C5.35667 4.1352 5.59379 3.71881 5.94881 3.41851C6.30382 3.11821 6.75377 2.95344 7.21877 2.95344C7.68376 2.95344 8.13371 3.11821 8.48872 3.41851C8.84374 3.71881 9.08086 4.1352 9.15798 4.59375H5.27955ZM3.28127 6.23438C3.37332 6.33795 3.48633 6.42076 3.61282 6.47733C3.73932 6.5339 3.87639 6.56293 4.01495 6.5625H10.4226C10.5611 6.56293 10.6982 6.5339 10.8247 6.47733C10.9512 6.42076 11.0642 6.33795 11.1563 6.23438V8.53125H9.42672C9.30814 8.53144 9.19051 8.5101 9.07956 8.46825L7.73786 7.96327C7.39672 7.85053 7.02815 7.85191 6.68786 7.9672L5.35797 8.46825C5.24702 8.5101 5.12939 8.53144 5.01081 8.53125H3.28127V6.23438ZM12.4661 7.54688C12.4656 7.74933 12.4025 7.94666 12.2855 8.11188C12.1685 8.2771 12.0033 8.40214 11.8125 8.46989V6.62386C12.0033 6.69161 12.1685 6.81665 12.2855 6.98187C12.4025 7.14709 12.4656 7.34442 12.4661 7.54688ZM3.28127 3.9375C3.28213 3.15455 3.59354 2.40391 4.14717 1.85028C4.7008 1.29665 5.45144 0.985243 6.23439 0.984375H8.20314C8.98609 0.985243 9.73673 1.29665 10.2904 1.85028C10.844 2.40391 11.1554 3.15455 11.1563 3.9375V4.59375H9.82112C9.74167 3.95959 9.4334 3.37626 8.9542 2.95336C8.47501 2.53045 7.85788 2.29708 7.21877 2.29708C6.57965 2.29708 5.96252 2.53045 5.48333 2.95336C5.00414 3.37626 4.69586 3.95959 4.61641 4.59375H3.28127V3.9375ZM1.96614 7.54688C1.96675 7.34351 2.03046 7.14535 2.14847 6.97973C2.26649 6.81411 2.43299 6.68919 2.62502 6.62222V8.47153C2.43299 8.40456 2.26649 8.27964 2.14847 8.11402C2.03046 7.9484 1.96675 7.75024 1.96614 7.54688ZM3.298 9.1875H5.01081C5.20842 9.18766 5.40442 9.15197 5.5893 9.08217L6.9077 8.58539C7.10567 8.51939 7.31947 8.51789 7.51834 8.58113L8.84791 9.08217C9.0329 9.15195 9.229 9.18763 9.42672 9.1875H11.1395C11.0589 10.172 10.6109 11.0902 9.88441 11.7596C9.15796 12.429 8.20627 12.8006 7.21844 12.8006C6.2306 12.8006 5.27891 12.429 4.55246 11.7596C3.82601 11.0902 3.37797 10.172 3.29734 9.1875H3.298ZM0.98439 15.2355C0.983047 14.8843 1.09498 14.542 1.30358 14.2595C1.51218 13.9769 1.80632 13.7692 2.14234 13.6671L4.22823 13.0266C4.51767 13.5642 4.95025 14.0112 5.47807 14.3181C6.00589 14.6251 6.60836 14.78 7.21877 14.7656C7.82917 14.78 8.43164 14.6251 8.95946 14.3181C9.48728 14.0112 9.91986 13.5642 10.2093 13.0266L12.2949 13.6677C12.4765 13.7267 12.6465 13.8171 12.7969 13.9348V20.0156H11.8125V16.4062H11.1563V20.0156H3.28127V16.4062H2.62502V20.0156H0.98439V15.2355ZM20.0156 20.0156H13.4531V13.125H20.0156V20.0156Z" fill="#2C7BE5"/>
+</g>
+<defs>
+<clipPath id="clip0_11706_62033">
+<rect width="21" height="21" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/template/assets/images/phone.svg

@@ -0,0 +1,11 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11706_62084)">
+<path d="M12.9949 1C13.2959 1 13.5846 1.10536 13.7974 1.29289C14.0103 1.48043 14.1299 1.73478 14.1299 2V14C14.1299 14.2652 14.0103 14.5196 13.7974 14.7071C13.5846 14.8946 13.2959 15 12.9949 15H6.185C5.88399 15 5.5953 14.8946 5.38245 14.7071C5.1696 14.5196 5.05002 14.2652 5.05002 14V2C5.05002 1.73478 5.1696 1.48043 5.38245 1.29289C5.5953 1.10536 5.88399 1 6.185 1H12.9949ZM6.185 0C5.58297 0 5.0056 0.210714 4.5799 0.585786C4.15419 0.960859 3.91504 1.46957 3.91504 2V14C3.91504 14.5304 4.15419 15.0391 4.5799 15.4142C5.0056 15.7893 5.58297 16 6.185 16H12.9949C13.5969 16 14.1743 15.7893 14.6 15.4142C15.0257 15.0391 15.2648 14.5304 15.2648 14V2C15.2648 1.46957 15.0257 0.960859 14.6 0.585786C14.1743 0.210714 13.5969 0 12.9949 0L6.185 0Z" fill="#2C7BE5"/>
+<path d="M9.59006 14C9.89107 14 10.1798 13.8946 10.3926 13.7071C10.6055 13.5196 10.725 13.2652 10.725 13C10.725 12.7348 10.6055 12.4804 10.3926 12.2929C10.1798 12.1054 9.89107 12 9.59006 12C9.28904 12 9.00036 12.1054 8.78751 12.2929C8.57466 12.4804 8.45508 12.7348 8.45508 13C8.45508 13.2652 8.57466 13.5196 8.78751 13.7071C9.00036 13.8946 9.28904 14 9.59006 14Z" fill="#2C7BE5"/>
+</g>
+<defs>
+<clipPath id="clip0_11706_62084">
+<rect width="18.1597" height="16" fill="white" transform="translate(0.509766)"/>
+</clipPath>
+</defs>
+</svg>