ordering-ui-external 1.0.1 → 1.1.0

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

@@ -15,6 +15,7 @@ export const WrapperContainer = styled.div`
   flex-direction: column;
   min-height: auto;
   position: relative;
+
   @media (min-width: 993px) {
     min-height: calc(100vh - 337px);
     box-sizing: border-box;
@@ -24,6 +25,7 @@ export const WrapperContainer = styled.div`
 export const SkeletonWrapper = styled.div`
   display: flex;
   flex-direction: column;
+
   @media (min-width: 768px) {
     flex-direction: row;
   }
@@ -32,10 +34,12 @@ export const SkeletonWrapper = styled.div`
 export const HeaderInfo = styled.div`
   width: 80%;
   margin-bottom: 20px;
+
   h1, p {
     margin: 0;
     color: ${props => props.theme.colors.darkTextColor};
   }
+
   h1 {
     margin-bottom: 22px;
   }
@@ -52,12 +56,16 @@ export const OrderBusiness = styled.div`
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
   border-radius: 7.6px;
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0px 4px 10px 0px #0000001F;
+
+  @media (min-width: 769px) {
+    flex-direction: row;
+  }
 `
 
 export const BusinessWrapper = styled.div`
@@ -88,6 +96,7 @@ export const BtsOrderStatus = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
+
   div + div {
     margin-left: 30px;
   }
@@ -103,6 +112,7 @@ export const BusinessInfo = styled.div`
     color: ${props => props.theme.colors.darkTextColor};
     overflow-wrap: break-word;
   }
+
   h2 {
     font-weight: 500;
     font-size: 18px;
@@ -131,8 +141,10 @@ export const ActionsBlock = styled.div`
     cursor: pointer;
     color: #B1BCCC;
   }
+
   @media (min-width: 380px) {
     flex-direction: row;
+
     svg {
       font-size: 20px;
     }
@@ -158,13 +170,16 @@ export const OrderInfo = styled.div`
     overflow: hidden;
     white-space: nowrap;
   }
+
   .date {
     margin-bottom: 6px;
   }
+
   .types {
     margin-bottom: 6px;
     font-size: 16px;
   }
+
   .order-status {
     font-weight: 600;
     font-size: 16px;
@@ -249,6 +264,7 @@ export const Map = styled.div`
     width: 100% !important;
     height: 100% !important;
   }
+
   img {
     object-fit: cover;
   }
@@ -260,10 +276,12 @@ export const WrapperDriver = styled.div`
   display: flex;
   width: 100%;
   align-items: center;
+
   div.photo {
     display: flex;
     align-items: center;
     justify-content: center;
+
     svg {
       width: 48px;
       height: 48px;
@@ -298,6 +316,7 @@ export const OrderBill = styled.div`
       `}
     }
   }
+
   table.total {
     border-top: 1px solid #BFBFBF;
     margin-top: 15px;
@@ -315,6 +334,7 @@ export const OrderBill = styled.div`
       }
     }
   }
+
   table.comments {
     margin-top: 20px;
     align-items: center;
@@ -324,6 +344,7 @@ export const OrderBill = styled.div`
       }
     }
   }
+
   @media (min-width: 678px) {
     table {
       font-size: 16px;
@@ -353,6 +374,7 @@ export const ShareOrder = styled.div`
   margin: 0 0 20px;
   justify-content: space-between;
   z-index: 1;
+
   div.wrap {
     & > div:first-child {
       left: 0;
@@ -366,10 +388,12 @@ export const ShareOrder = styled.div`
     font-size: 15px;
     margin: 0px;
   }
+
   p {
     font-size: 13px;
     margin: 0px;
   }
+
   button {
     display: flex;
     justify-content: center;
@@ -377,23 +401,28 @@ export const ShareOrder = styled.div`
     font-size: 14px;
     align-items: center;
     background: ${props => props.theme.colors.backgroundPage};
+
     svg {
       left: 0;
       margin-right: 6px;
       color: ${props => props.theme.colors.primary};
     }
+
     &:hover {
       svg {
         color: #FFFFFF;
       }
     }
   }
+
   div.text {
     width: 60%;
   }
+
   div.wrap {
     display: flex;
     align-items: center;
+
     & > div:first-child {
       width: 100%;
       position: relative;
@@ -404,6 +433,7 @@ export const ShareOrder = styled.div`
       }
     }
   }
+
   @media (min-width: 1201px) {
     div.wrap {
       & > div:first-child {
@@ -411,6 +441,7 @@ export const ShareOrder = styled.div`
       }
     }
   }
+
   @media (min-width: 768px) {
     div.wrap {
       width: 30%;
@@ -418,12 +449,15 @@ export const ShareOrder = styled.div`
         left: 0;
       }
     }
+
     h1 {
       font-size: 20px;
     }
+
     p {
       font-size: 18px;
     }
+
     button {
       font-size: 18px;
       width: 100%;
@@ -433,13 +467,16 @@ export const ShareOrder = styled.div`
       }
     }
   }
+
   @media (min-width: 425px) {
     div.text {
       width: 70%;
     }
+
     h1 {
       font-size: 18px;
     }
+
     p {
       font-size: 15px;
     }
@@ -472,6 +509,7 @@ export const Divider = styled.div`
   background: #F8F9FA;
   width: calc(100% + 40px);
   margin-left: -20px;
+
   @media(min-width: 769px) {
     width: calc(100% + 80px);
     margin-left: -40px;
@@ -528,11 +566,15 @@ export const TitleContainer = styled.div`
 `
 
 export const ReOrder = styled.div`
+  display: flex;
+  align-items: center;
   margin-top: 20px;
   margin-bottom: 20px;
+
   button {
     padding: 5px 16px;
     min-width: unset;
+    margin: 0px 5px;
   }
 `
 
@@ -556,6 +598,7 @@ export const HeaderTitle = styled.div`
 `
 
 export const PlaceSpotSection = styled.div`
+
 `
 
 export const LinkWrapper = styled.div`
@@ -619,3 +662,23 @@ export const ButtonWrapper = styled.div`
     }
   }
 `
+
+export const MapWrapper = styled.div`
+  width: 100%;
+  margin-top: 20px;
+
+  @media (min-width: 769px) {
+    width: 50%;
+    margin-top: 0px;
+  }
+`
+
+export const BusinessExternalWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: 769px) {
+    width: 50%;
+  }
+`

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

@@ -69,6 +69,7 @@ const OrderProgressUI = (props) => {
   }
 
   const convertDiffToHours = (time) => {
+    if (!time) return
     const deliveryTime = lastOrder?.delivery_datetime_utc
       ? parseDate(lastOrder?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
       : parseDate(lastOrder?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD hh:mm A' })

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import Skeleton from 'react-loading-skeleton'
+import moment from 'moment'
 import { OrderList, useLanguage, useOrder, useEvent } from 'ordering-components-external'
 
 import { HorizontalOrdersLayout } from '../HorizontalOrdersLayout'
@@ -317,7 +318,7 @@ const OrdersOptionUI = (props) => {
         horizontal ? (
           <HorizontalOrdersLayout
             businessesIds={businessesIds}
-            orders={orders.filter(order => orderStatus.includes(order.status))}
+            orders={orders.filter(order => orderStatus.includes(order.status)).sort((a, b) => moment(b?.delivery_datetime_utc).valueOf() - moment(a?.delivery_datetime_utc).valueOf())}
             pagination={pagination}
             onRedirectPage={onRedirectPage}
             loadMoreOrders={loadMoreOrders}
@@ -336,7 +337,7 @@ const OrdersOptionUI = (props) => {
         ) : (
           <VerticalOrdersLayout
             reorderLoading={reorderState?.loading}
-            orders={orders.filter(order => orderStatus.includes(order.status))}
+            orders={orders.filter(order => orderStatus.includes(order.status)).sort((a, b) => moment(b?.delivery_datetime_utc).valueOf() - moment(a?.delivery_datetime_utc).valueOf())}
             pagination={pagination}
             loadMoreOrders={loadMoreOrders}
             onRedirectPage={onRedirectPage}

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

@@ -4,11 +4,13 @@ export const OptionTitle = styled.div`
   width: 100%;
   margin: ${({ isBusinessesPage }) => isBusinessesPage ? '10px 20px 0' : '0 auto'};
   padding: ${({ isBusinessesPage }) => !isBusinessesPage && '0 15px'};
+
   h1{
     text-transform: capitalize;
     font-size: 18px;
     margin: 18px 0;
   }
+
   @media (min-width: 768px){
     padding: 0;
     width: 100%;
@@ -33,6 +35,7 @@ export const OrdersContainer = styled.div`
       width: 0px;
       height: 0px;
     }
+
     ${({ isSkeleton }) => !isSkeleton && css`   
       ::-webkit-scrollbar {
       width: 6px;
@@ -72,16 +75,19 @@ export const OrdersContainer = styled.div`
       `
     }
   `}
+
   ${({ activeOrders }) => !activeOrders && css`
     width: 100%;
     display: flex;
     flex-direction: column-reverse;
     margin: 0 auto;
+
     p{
       margin-block-end: 0;
       margin-block-start: 0;
       color: #9A9A9A
     }
+
     @media(min-width: 480px){
       width: 100%;
       padding: 0;
@@ -94,15 +100,18 @@ export const OrdersContainer = styled.div`
 
 export const SkeletonOrder = styled.div`
   display: flex;
+
   ${({ activeOrders }) => activeOrders && css`
     width: auto;
     text-align: center;
     margin-left: 10px;
+
     ${props => props.theme?.rtl && css`
       margin-right: 10px;
       margin-left: 0;
     `}
   `}
+
   ${({ activeOrders }) => !activeOrders && css`
     width: 100%;
     flex-direction: column;
@@ -120,11 +129,13 @@ export const SkeletonCard = styled.div`
 export const SkeletonContent = styled.div`
   display: flex;
   width: 100%;
+
   ${({ activeOrders }) => activeOrders && css`
     > * {
       margin: 5px;
     }
   `}
+
   ${({ activeOrders }) => !activeOrders && css`
     justify-content: space-between;
   `}
@@ -134,6 +145,7 @@ export const SkeletonText = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;
+
   ${props => props.theme?.rtl && css`
     text-align: right;
   `}
@@ -154,6 +166,7 @@ export const SkeletonButton = styled.div`
 
 export const SkeletonInformation = styled.div`
   display: flex;
+
   > *{
     margin: 5px;
   }
@@ -166,17 +179,21 @@ export const SkeletonReorder = styled.div`
   text-align: center;
   align-items: center;
   margin-right: 25px;
+
   ${props => props.theme?.rtl && css`
     margin-left: 25px;
     margin-right: 0;
   `}
+
   span:first-child span{
     width: 40px;
   }
+
   span:last-child{
     width: 75px;
     height: 30px;
   }
+
   @media(min-width: 480px){
     ${props => props.theme?.rtl ? css`
       margin-left: 0;
@@ -216,6 +233,7 @@ export const BusinessInformation = styled.div`
   .orders-detail {
     display: flex;
     align-items: center;
+
     svg {
       background: transparent;
       border: none;
@@ -243,6 +261,7 @@ export const BusinessInformation = styled.div`
       font-size: 0.8em;
     `}
   }
+
   .order-status {
     color: #03459E;
     width: 170px;
@@ -250,12 +269,14 @@ export const BusinessInformation = styled.div`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   p[name='view_order'] {
     color: ${props => props.theme.colors.primary};
     cursor: pointer;
     text-decoration: none;
     width: fit-content;
   }
+
   @media (min-width: 480px){
     h2 {
     font-size: 16px;
@@ -268,6 +289,7 @@ export const BusinessInformation = styled.div`
       `}
     }
   }
+
   @media (min-width: 768px){
     font-size: 0.9em;
     p {
@@ -280,6 +302,7 @@ export const NoOrdersWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+
   > p {
     font-weight: 500;
     font-size: 16px;
@@ -287,6 +310,7 @@ export const NoOrdersWrapper = styled.div`
     margin-top: 0px;
     margin-bottom: 25px;
   }
+
   button {
     height: 44px;
   }
@@ -312,6 +336,7 @@ export const BusinessList = styled.div`
     > div {
       width: calc(100vw - 40px);
       min-width: calc(100vw - 40px);
+
       @media (min-width: 681px) {
         width: calc(50vw - 40px);
         min-width: calc(50vw - 40px);

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

@@ -96,47 +96,47 @@ const PaymentOptionWalletUI = (props) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-      (
-        <>
-          {walletsState.result?.map((wallet, idx) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-            <Container
-              key={wallet.id}
-              isBottomBorder={idx === walletsState.result?.length - 1}
-            >
-              <SectionLeft>
-                <Checkbox
-                  name={`payment_option_${wallet.type}`}
-                  id={`custom-checkbox-${idx}`}
-                  disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-                  checked={checkedState[idx]}
-                  value={`payment_option_${wallet.type}`}
-                  onChange={() => handleOnChange(idx, wallet)}
-                />
-                <SectionLeftText>
-                  <label
-                    style={{
-                      color: (cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0 ? theme.colors.darkGray : 'black'
-                    }}
-                    htmlFor={`custom-checkbox-${idx}`}
-                  >
-                    {walletName[wallet.type]?.name}
-                  </label>
-                </SectionLeftText>
-              </SectionLeft>
-              <div>
-                {wallet.type === 'cash' && (
-                  <span>{parsePrice(wallet?.balance)}</span>
-                )}
-                {wallet.type === 'credit_point' && (
-                  <span>
-                    <span style={{ color: theme.colors.primary }}>{`${wallet?.balance} ${t('POINTS', 'Points')}`}</span> {wallet?.balance > 0 && `= ${parsePrice(wallet?.balance / wallet?.redemption_rate)}`}
-                  </span>
-                )}
-              </div>
-            </Container>
-          ))}
-        </>
-      )}
+        (
+          <>
+            {walletsState.result?.map((wallet, idx) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+              <Container
+                key={wallet.id}
+                isBottomBorder={idx === walletsState.result?.length - 1}
+              >
+                <SectionLeft>
+                  <Checkbox
+                    name={`payment_option_${wallet.type}`}
+                    id={`custom-checkbox-${idx}`}
+                    disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+                    checked={checkedState[idx]}
+                    value={`payment_option_${wallet.type}`}
+                    onChange={() => handleOnChange(idx, wallet)}
+                  />
+                  <SectionLeftText>
+                    <label
+                      style={{
+                        color: (cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0 ? theme.colors.darkGray : 'black'
+                      }}
+                      htmlFor={`custom-checkbox-${idx}`}
+                    >
+                      {walletName[wallet.type]?.name}
+                    </label>
+                  </SectionLeftText>
+                </SectionLeft>
+                <div>
+                  {wallet.type === 'cash' && (
+                    <span>{parsePrice(wallet?.balance, { isTruncable: true })}</span>
+                  )}
+                  {wallet.type === 'credit_point' && (
+                    <span>
+                      <span style={{ color: theme.colors.primary }}>{`${wallet?.balance} ${t('POINTS', 'Points')}`}</span> {wallet?.balance > 0 && `= ${parsePrice(wallet?.balance / wallet?.redemption_rate, { isTruncable: true })}`}
+                    </span>
+                  )}
+                </div>
+              </Container>
+            ))}
+          </>
+        )}
 
       {walletsState?.loading && (
         <>

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

@@ -23,7 +23,7 @@ import { StripeRedirectForm } from '../StripeRedirectForm'
 import { NotFoundSource } from '../NotFoundSource'
 
 import { getIconCard } from '../../../../../utils'
-
+import { PaymentOptionSquare } from '../../../../../components/PaymentOptionSquare'
 import {
   PaymentMethodsContainer,
   PaymentMethodsList,
@@ -92,6 +92,8 @@ const PaymentOptionsUI = (props) => {
     isCustomerMode,
     isOpenMethod,
     onPaymentChange,
+    setCreateOrder,
+    onPlaceOrderClick,
     handlePlaceOrder
   } = props
   const [, t] = useLanguage()
@@ -214,7 +216,7 @@ const PaymentOptionsUI = (props) => {
         {paymethodSelected?.gateway === 'cash' && (
           <PaymentOptionCash
             data={paymethodSelected?.data}
-            orderTotal={cart.total}
+            orderTotal={cart?.balance ?? cart?.total}
             defaultValue={paymethodSelected?.data?.cash}
             onChangeData={handlePaymethodDataChange}
             setErrorCash={props.setErrorCash}
@@ -331,6 +333,25 @@ const PaymentOptionsUI = (props) => {
             handleStripeRedirect={handlePaymethodDataChange}
           />
         </Modal>
+        <Modal
+          title={t('SQUARE', 'Square')}
+          open={isOpenMethod?.paymethod?.gateway === 'square' && !paymethodData.token}
+          onClose={() => handlePaymethodClick(null)}
+        >
+          <PaymentOptionSquare
+            businessId={props.businessId}
+            cartTotal={cart?.total}
+            data={isOpenMethod?.paymethod?.credentials}
+            body={{
+              paymethod_id: isOpenMethod?.paymethod?.id,
+              amount: cart.total,
+              delivery_zone_id: cart.delivery_zone_id,
+              cartUuid: cart.uuid
+            }}
+            onPlaceOrderClick={onPlaceOrderClick}
+            setCreateOrder={setCreateOrder}
+          />
+        </Modal>
         <Alert
           title={t('PAYMENT_METHODS', 'Payment methods')}
           content={alertState.content}

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

@@ -178,7 +178,7 @@ const PhoneAutocompleteUI = (props) => {
           saveCustomerUser={saveCustomerUser}
           fieldsNotValid={props.fieldsNotValid}
           useChekoutFileds
-          isCustomerMode={props.isCustomerMode}
+          isCustomerMode
         />
       </Modal>
       <Modal