ordering-ui-admin-external 1.32.3 → 1.33.1

package/src/components/Settings/GuestCheckoutFieldsSetting/index.js

@@ -0,0 +1,116 @@
+import React, { useState, useMemo } from 'react'
+import { useLanguage, useConfig, GuestCheckoutFieldsSetting as GuestCheckoutFieldsSettingController } from 'ordering-components-admin-external'
+import { DefaultSelect, IconButton, Switch } from '../../../styles'
+import Skeleton from 'react-loading-skeleton'
+import { InfoCircle } from 'react-bootstrap-icons'
+
+import {
+  CheckoutFieldsDetailsContainer,
+  FieldContainer,
+  SelectWrapper,
+  Option,
+  TitleWrapper,
+  InfoWrapper,
+  InfoContent
+} from './styles'
+
+const GuestCheckoutFieldsSettingUI = (props) => {
+  const {
+    checkoutFieldsState,
+    handleChangeCheckoutFieldSetting
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+
+  const [orderType, setOrderType] = useState('1')
+
+  const hideSettingList = ['city_dropdown_option', 'address', 'address_notes']
+  const orderValidationFields = ['name', 'middle_name', 'lastname', 'second_lastname', 'email', 'mobile_phone', 'city_dropdown_option', 'address', 'zipcode', 'address_notes', 'coupon', 'driver_tip', 'comments', 'birthdate']
+
+  const orderTypeList = useMemo(() => {
+    const orderTypes = configs?.order_types_allowed?.options?.map(item => ({ value: item.value, content: <Option>{t(item.text, item.text?.replace('_', ' ').toLowerCase())}</Option> }))
+    return orderTypes || []
+  }, [configs?.order_types_allowed])
+
+  return (
+    <>
+      <CheckoutFieldsDetailsContainer>
+        <TitleWrapper>
+          <h1>{t('CHECKOUT_CUSTOMER_FIELDS', 'Checkout and Customer fields')}</h1>
+          <InfoWrapper>
+            <IconButton
+              color='primary'
+            >
+              <InfoCircle />
+            </IconButton>
+            <InfoContent>
+              {t('GUEST_CHECKOUT_SETTING_INFO', 'Manage the fields that your guest users will be able to select and the fields required to complete an order (These options only apply for guest users)')}
+            </InfoContent>
+          </InfoWrapper>
+        </TitleWrapper>
+        <SelectWrapper>
+          <label>{t('FRONT_MAIN_EMAIL_ORDER_TYPE', 'Order type')}</label>
+          <DefaultSelect
+            placeholder={t('SELECT_ORDER_TYPE', 'Select order type')}
+            defaultValue={orderType}
+            options={orderTypeList}
+            onChange={val => setOrderType(val)}
+          />
+        </SelectWrapper>
+        <FieldContainer isHeader>
+          <div className='name'>{t('FIELD', 'Field')}</div>
+          <div className='required'>{t('REQUIRED', 'Required')}</div>
+          <div className='status'>{t('STATE', 'Status')}</div>
+        </FieldContainer>
+        {checkoutFieldsState?.loading ? (
+          [...Array(10).keys()].map(i => (
+            <FieldContainer key={i}>
+              <div className='name'><Skeleton width={120} /></div>
+              <div className='required'>
+                <Skeleton width={30} style={{ borderRadius: 20 }} />
+              </div>
+              <div className='status'>
+                <Skeleton width={30} style={{ borderRadius: 20 }} />
+              </div>
+            </FieldContainer>
+          ))
+        ) : (
+          <>
+            {checkoutFieldsState.fields
+              .filter(item => item?.order_type_id === parseInt(orderType))
+              .sort((a, b) => {
+                const indexA = orderValidationFields.indexOf(a?.validation_field.code)
+                const indexB = orderValidationFields.indexOf(b?.validation_field.code)
+                return indexA - indexB
+              })
+              .map(field => !hideSettingList.includes(field?.validation_field.code) && !([2, 3, 4, 5, 6].includes(field?.order_type_id) && field?.validation_field.code === 'driver_tip') && (
+                <FieldContainer key={field.id}>
+                  <div className='name'>{t(field?.validation_field.code.toUpperCase(), field?.validation_field.name)}</div>
+                  <div className='required'>
+                    <Switch
+                      defaultChecked={field?.required}
+                      onChange={(val) => handleChangeCheckoutFieldSetting(field?.validation_field_id, field?.order_type_id, { required: val })}
+                    />
+                  </div>
+                  <div className='status'>
+                    <Switch
+                      defaultChecked={field?.enabled}
+                      onChange={(val) => handleChangeCheckoutFieldSetting(field?.validation_field_id, field?.order_type_id, { enabled: val })}
+                    />
+                  </div>
+                </FieldContainer>
+              ))}
+          </>
+        )}
+      </CheckoutFieldsDetailsContainer>
+    </>
+  )
+}
+export const GuestCheckoutFieldsSetting = (props) => {
+  const guestCheckoutFieldsSettingProps = {
+    ...props,
+    UIComponent: GuestCheckoutFieldsSettingUI
+  }
+  return <GuestCheckoutFieldsSettingController {...guestCheckoutFieldsSettingProps} />
+}

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

@@ -0,0 +1,164 @@
+import styled, { css } from 'styled-components'
+
+export const CheckoutFieldsDetailsContainer = styled.div`
+  padding: 26px 15px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+
+  @media (min-width: 768px) {
+    padding: 26px 40px;
+  }
+`
+
+export const SelectWrapper = styled.div`
+  margin-top: 25px;
+  margin-bottom: 20px;
+  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;
+
+      .list-wrapper {
+        > div {
+          padding: 6px 10px;
+          &:hover {
+            background-color: #f2f5f7;
+          }
+        }
+      }
+    }
+  }
+`
+
+export const Option = styled.div`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${props => props.theme.colors.secundaryContrast};
+  text-transform: lowercase;
+  &::first-letter {
+    text-transform: uppercase;
+  }
+`
+
+export const FieldContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  ${({ isHeader }) => isHeader && css`
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    margin-bottom: 15px;
+    > div {
+      font-weight: 700;
+      font-size: 14px;
+    }
+  `}
+
+  .name {
+    flex: 1;
+    font-size: 14px;
+  }
+
+  .required {
+    width: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .status {
+    width: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 40px;
+  ` : css`
+    margin-right: 40px;
+  `}
+
+  h1 {
+    font-weight: 700;
+    font-size: 20px;
+    margin-bottom: 0;
+  }
+`
+
+export const InfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: -8px;
+    margin-right: 8px;
+  ` : css`
+    margin-right: -8px;
+    margin-left: 8px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    /* display: block; */
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  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;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  @media (min-width: 576px) {
+    min-width: 330px;
+    padding: 12px 15px;
+  }
+`

package/src/components/Settings/Settings/index.js

@@ -13,6 +13,8 @@ import { AddressFieldsSetting } from '../AddressFieldsSetting'
 import { LanguageSetting } from '../LanguageSetting'
 import { SitesAuthSettings } from '../SitesAuthSettings'
 import { MultiCountrySettings } from '../MultiCountrySettings'
+import { CardFieldsSetting } from '../CardFieldsSetting'
+import { GuestCheckoutFieldsSetting } from '../GuestCheckoutFieldsSetting'
 
 import {
   BasicSettingsContainer,
@@ -24,7 +26,6 @@ import {
   InfoWrapper,
   InfoContent
 } from './styles'
-import { CardFieldsSetting } from '../CardFieldsSetting'
 
 const SettingsUI = (props) => {
   const {
@@ -198,6 +199,17 @@ const SettingsUI = (props) => {
                   active={isOpenSettingDetails === 'checkout'}
                 />
               </SettingItemWrapper>
+              <SettingItemWrapper
+                className='col-md-4 col-sm-6'
+                onClick={() => handleOpenSettingDetails('guest_checkout')}
+              >
+                <SettingItemUI
+                  title={t('GUEST_CHECKOUT_FIELDS', 'Guest checkout fields')}
+                  description={t('GUEST_CHECKOUT_FIELDS_DESC', 'Which fields do you want to show on the guest checkout page?')}
+                  icon={<CheckCircleFill />}
+                  active={isOpenSettingDetails === 'guest_checkout'}
+                />
+              </SettingItemWrapper>
               <SettingItemWrapper
                 className='col-md-4 col-sm-6'
                 onClick={() => handleOpenSettingDetails('address')}
@@ -324,6 +336,9 @@ const SettingsUI = (props) => {
             {isOpenSettingDetails === 'checkout' && (
               <CheckoutFieldsSetting />
             )}
+            {isOpenSettingDetails === 'guest_checkout' && (
+              <GuestCheckoutFieldsSetting />
+            )}
             {isOpenSettingDetails === 'address' && (
               <AddressFieldsSetting />
             )}

package/src/components/Settings/index.js

@@ -32,6 +32,7 @@ import { LanguageTransSpread } from './LanguageTransSpread'
 import { LanguageTransTable } from './LanguageTransTable'
 import { MultiCountrySettings } from './MultiCountrySettings'
 import { CardFieldsSetting } from './CardFieldsSetting'
+import { GuestCheckoutFieldsSetting } from './GuestCheckoutFieldsSetting'
 export {
   Cms,
   IntegrationListing,
@@ -66,5 +67,6 @@ export {
   LanguageTransSpread,
   LanguageTransTable,
   MultiCountrySettings,
-  CardFieldsSetting
+  CardFieldsSetting,
+  GuestCheckoutFieldsSetting
 }

package/src/components/Shared/PushTokens/index.js

@@ -0,0 +1,87 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-admin-external'
+import { Pagination } from '../Pagination'
+import {
+  Container,
+  TableWrapper,
+  Table,
+  WrapperPagination
+} from './styles'
+
+export const PushTokens = (props) => {
+  const {
+    userId,
+    pushTokens
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+
+  const numberPerPage = 10
+  const [currentPage, setCurrentPage] = useState(1)
+  const [currentPageTokens, setCurrentPageTokens] = useState([])
+
+  const sortedTokens = useMemo(() => {
+    const _tokens = [...pushTokens]
+    return _tokens.sort((a, b) => b.id - a.id)
+  }, [pushTokens])
+
+  const handleChangePage = (pageNumber) => {
+    setCurrentPage(pageNumber)
+  }
+
+  useEffect(() => {
+    const indexOfLastPost = currentPage * numberPerPage
+    const indexOfFirstPost = indexOfLastPost - numberPerPage
+    const _currentProducts = sortedTokens.slice(indexOfFirstPost, indexOfLastPost)
+    setCurrentPageTokens(_currentProducts)
+  }, [sortedTokens, currentPage])
+
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [userId])
+
+  return (
+    <Container>
+      {sortedTokens.length > 0 ? (
+        <TableWrapper>
+          <Table>
+            <thead>
+              <tr>
+                <th>{t('USER_ID_NUMBER', 'User ID')}</th>
+                <th>{t('TOKEN', 'Token')}</th>
+                <th>{t('APP', 'App')}</th>
+                <th>{t('CREATED_AT', 'Created at')}</th>
+                <th>{t('UPDATED_AT', 'Updated at')}</th>
+              </tr>
+            </thead>
+            {currentPageTokens.map(token => (
+              <tbody key={token.id}>
+                <tr>
+                  <td>{token?.user_id}</td>
+                  <td>{token?.token}</td>
+                  <td>{token?.app}</td>
+                  <td>{parseDate(token?.created_at, { utc: false })}</td>
+                  <td>{parseDate(token?.updated_at, { utc: false })}</td>
+                </tr>
+              </tbody>
+            ))}
+          </Table>
+        </TableWrapper>
+      ) : (
+        <p className='no-data'>{t('NO_DATA', 'No Data')}</p>
+      )}
+
+      {sortedTokens?.length > 0 && (
+        <WrapperPagination>
+          <Pagination
+            isHidePagecontrol
+            currentPage={currentPage}
+            totalPages={Math.ceil(sortedTokens.length / numberPerPage)}
+            handleChangePage={handleChangePage}
+          />
+        </WrapperPagination>
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,64 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  p.no-data {
+    font-size: 14px;
+    margin: 20px 0;
+  }
+`
+export const TableWrapper = styled.div`
+  overflow: auto;
+`
+export const Table = styled.table`
+  width: 100%;
+  min-width: 900px;
+  color: ${props => props.theme.colors?.headingColor};
+
+  thead {
+    tr {
+      border-bottom: solid 1px ${props => props.theme.colors.disabled};
+      th {
+        padding: 13px 0;
+        font-size: 12px;
+        &:nth-child(2) {
+          width: 35%;
+          padding-left: 15px;
+          padding-right: 15px;
+          box-sizing: border-box;
+        }
+        &:nth-child(3),
+        &:nth-child(4),
+        &:nth-child(5)
+        {
+          width: 19%;
+        }
+      }
+    }
+  }
+
+  tbody {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    td {
+      padding: 13px 0;
+      font-size: 12px;
+
+      &:nth-child(2) {
+        width: 35%;
+        padding-left: 15px;
+        padding-right: 15px;
+        box-sizing: border-box;
+      }
+
+      &:nth-child(3),
+      &:nth-child(4),
+      &:nth-child(5) {
+        width: 19%;
+      }
+    }
+  }
+`
+export const WrapperPagination = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+`

package/src/components/Shared/index.js

@@ -15,6 +15,7 @@ import { Pagination } from './Pagination'
 import { PaginationButton } from './PaginationButton'
 import { Personalization } from './Personalization'
 import { ProtectedRoute } from './ProtectedRoute'
+import { PushTokens } from './PushTokens'
 import { Schedule } from './Schedule'
 import { SearchBar } from './SearchBar'
 import { RangeCalendar } from './RangeCalendar'
@@ -52,6 +53,7 @@ export {
   PaginationButton,
   Personalization,
   ProtectedRoute,
+  PushTokens,
   Schedule,
   SearchBar,
   RangeCalendar,

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

@@ -156,6 +156,7 @@ const BusinessDeviceDetailUI = (props) => {
             searchBarIsNotLazyLoad
             searchValue={businessSearchVal}
             handleChangeSearch={(val) => setBusinessSearchVal(val)}
+            isDisabled={!!selectedDevice}
           />
         )}
       </SelectWrapper>

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

@@ -66,7 +66,7 @@ export const ProductIngredient = (props) => {
           <Button
             borderRadius='8px'
             color='lightPrimary'
-            onClick={() => handleOpenIngredient(null)}
+            onClick={() => handleOpenIngredient(null, true)}
           >
             {t('ADD_INGREDIENT', 'Add ingredient')}
           </Button>
@@ -83,7 +83,7 @@ export const ProductIngredient = (props) => {
         ))}
         <AddIngredientButtonWrapper>
           <LinkButton
-            onClick={() => handleOpenIngredient(null)}
+            onClick={() => handleOpenIngredient(null, true)}
           >
             {t('ADD_INGREDIENT', 'Add ingredient')}
           </LinkButton>

package/src/components/Users/UserDetails/index.js

@@ -10,7 +10,7 @@ import { BusinessManagerBusinesses } from '../BusinessManagerBusinesses'
 import { ArrowsAngleContract, ArrowsAngleExpand, Envelope, Phone, ThreeDots } from 'react-bootstrap-icons'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
-import { Confirm } from '../../Shared'
+import { Confirm, PushTokens } from '../../Shared'
 import { Personalization } from '../../Shared/Personalization'
 import { UserMetaFields } from '../UserMetaFields'
 import { IconButton, Switch } from '../../../styles'
@@ -208,6 +208,12 @@ export const UserDetailsUI = (props) => {
               <Personalization />
             </PersonalizationWrapper>
           )}
+          {currentMenuSelected === 'push_tokens' && (
+            <PushTokens
+              userId={userState.user?.id}
+              pushTokens={userState.user?.push_tokens || []}
+            />
+          )}
         </>
       )}
       <Confirm

package/src/components/Users/UserDetailsMenu/index.js

@@ -31,7 +31,8 @@ export const UserDetailsMenu = (props) => {
     { key: 'saved_places', content: t('SAVED_PLACES', 'Saved places') },
     { key: 'orders', content: t('ORDERS', 'Orders') },
     { key: 'metafields', content: t('METAFIELDS', 'Metafields') },
-    { key: 'personalization', content: t('PERSONALIZATION', 'Personalization') }
+    { key: 'personalization', content: t('PERSONALIZATION', 'Personalization') },
+    { key: 'push_tokens', content: t('PUSH_TOKENS', 'Push tokens') }
   ]
 
   const professionalMenuList = [

package/template/pages/CustomersList/index.js

@@ -15,7 +15,7 @@ export const CustomersList = (props) => {
       'country_phone_code', 'city_id', 'city', 'address', 'addresses',
       'address_notes', 'dropdown_option_id', 'dropdown_option', 'location',
       'zipcode', 'level', 'enabled', 'middle_name', 'second_lastname', 'birthdate', 'drivergroups',
-      'phone_verified', 'email_verified', 'wallets', 'orders_count'
+      'phone_verified', 'email_verified', 'wallets', 'orders_count', 'push_tokens'
     ],
     onUserRedirect: (userId) => {
       if (!userId) {

package/template/pages/ManagersList/index.js

@@ -15,7 +15,7 @@ export const ManagersList = (props) => {
       'country_phone_code', 'city_id', 'city', 'address', 'addresses',
       'address_notes', 'dropdown_option_id', 'dropdown_option', 'location',
       'zipcode', 'level', 'enabled', 'middle_name', 'second_lastname', 'birthdate', 'drivergroups',
-      'phone_verified', 'email_verified', 'wallets'
+      'phone_verified', 'email_verified', 'wallets', 'push_tokens'
     ],
     onUserRedirect: (userId) => {
       if (!userId) {