ordering-ui-admin-external 1.28.0 → 1.29.0

package/src/components/Orders/CreateCustomOrder/StripeMethodForm/index.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react'
+import { PaymentRequestButtonElement, useStripe } from '@stripe/react-stripe-js'
+import { CardForm as CardFormController, useConfig, useLanguage } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { Container } from './styles'
+export const StripeMethodFormUI = (props) => {
+  const {
+    cart,
+    handleSource,
+    handleCancel,
+    paymethod,
+    cartGroup
+  } = props
+
+  const [, t] = useLanguage()
+  const stripe = useStripe()
+  const [{ configs }] = useConfig()
+  const [paymentRequest, setPaymentRequest] = useState(null)
+  const [methodUnavailable, setMethodUnavailable] = useState(false)
+
+  const googlePayMethods = ['google_pay', 'global_google_pay']
+
+  useEffect(() => {
+    if (stripe) {
+      let cartNames = ''
+      if (cartGroup) {
+        // eslint-disable-next-line no-unused-expressions
+        cartGroup?.carts.map((cart, i) => (
+          cartNames = `${cart?.business?.name} ${i !== cartNames?.carts?.length && ', '}`
+        ))
+      }
+      const pr = stripe.paymentRequest({
+        country: 'US',
+        currency: configs?.stripe_currency?.value?.toLowerCase?.() || 'usd',
+        total: {
+          label: cartNames || cart?.business?.name,
+          amount: Math.floor((cartGroup?.balance || cartGroup?.total || cart?.balance || cart?.total) * 100)
+        },
+        requestPayerName: true,
+        requestPayerEmail: true
+      })
+      pr.canMakePayment().then(result => {
+        if (result) {
+          setPaymentRequest(pr)
+        } else {
+          setMethodUnavailable(true)
+        }
+      })
+      pr.on('paymentmethod', async (e) => {
+        const data = {
+          ...e?.paymentMethod?.card,
+          id: e.paymentMethod.id,
+          type: e.paymentMethod.type,
+          source_id: e?.paymentMethod?.id,
+          card: {
+            brand: e.paymentMethod.card.brand,
+            last4: e.paymentMethod.card.last4
+          }
+        }
+        e.complete('success')
+        handleCancel()
+        handleSource(cartGroup ? JSON.stringify(data) : data)
+      })
+    }
+  }, [stripe])
+
+  return (
+    <Container>
+      {methodUnavailable ? (
+        <h2>{googlePayMethods.includes(paymethod) ? t('GOOGLE_PAY_UNAVAILABLE', 'Google pay unavailable') : t('APPLE_PAY_UNAVAILABLE', 'Apple pay unavailable')}</h2>
+      ) : (
+        <>
+          {paymentRequest ? (
+            <PaymentRequestButtonElement options={{ paymentRequest }} />
+          ) : (
+            <Skeleton />
+          )}
+        </>
+      )}
+    </Container>
+  )
+}
+
+export const StripeMethodForm = (props) => {
+  const propsController = {
+    ...props,
+    UIComponent: StripeMethodFormUI
+  }
+  return <CardFormController {...propsController} />
+}

package/src/components/Orders/CreateCustomOrder/StripeMethodForm/styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+  span {
+    width: 100%;
+    height: 35px;
+  }
+`

package/src/components/Orders/CreateCustomOrder/StripeRedirectForm/index.js

@@ -0,0 +1,96 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { StripeRedirectForm as StripeRedirectFormController, useSession, useLanguage } from 'ordering-components-admin-external'
+import { Button, Input } from '../../../../styles'
+
+import {
+  FormRedirect,
+  FormGroup,
+  ErrorMessage
+} from './styles'
+
+const StripeRedirectFormUI = (props) => {
+  const {
+    paymethods,
+    handleSubmitPaymentMethod
+  } = props
+
+  const [{ user }] = useSession()
+  const { handleSubmit, register, errors, formState } = useForm()
+  const [, t] = useLanguage()
+
+  return (
+    <>
+      <FormRedirect onSubmit={handleSubmit(handleSubmitPaymentMethod)}>
+
+        <FormGroup>
+          <label>{t('SELECT_A_PAYMENT_METHOD', 'Select a payment method')}</label>
+          <select
+            name='type'
+            ref={
+              register({
+                required: true
+              })
+            }
+          >
+            <option value=''>{t('SELECT_A_PAYMENT_METHOD', 'Select a payment method')}</option>
+            {paymethods?.length > 0 && paymethods.map((paymethod, i) => (
+              <option key={i} value={paymethod.value}>{paymethod.name}</option>
+            ))}
+          </select>
+          {errors.type && errors.type.type === 'required' && (
+            <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>
+          )}
+        </FormGroup>
+
+        <FormGroup>
+          <label>{t('ACCOUNT_HOLDER', 'Account holder')}</label>
+          <Input
+            name='name'
+            defaultValue={user?.name}
+            placeholder={t('TYPE_ACCOUNT_HOLDER', 'Type an Account holder')}
+            ref={
+              register({
+                required: true
+              })
+            }
+            autoComplete='off'
+          />
+          {errors.name && errors.name.type === 'required' && (
+            <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>
+          )}
+        </FormGroup>
+
+        <FormGroup>
+          <label>{t('EMAIL', 'Email')}</label>
+          <Input
+            name='email'
+            type='email'
+            defaultValue={user?.email}
+            placeholder={t('TYPE_AN_EMAIL', 'Type an email')}
+            ref={
+              register({
+                required: true
+              })
+            }
+            autoComplete='off'
+          />
+          {errors.email && errors.email.type === 'required' && (
+            <ErrorMessage>{t('FIELD_REQUIRED', 'This field is required')}</ErrorMessage>
+          )}
+        </FormGroup>
+        <Button borderRadius='8px' color='primary' type='submit' disabled={formState.isSubmitting}>
+          {formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
+        </Button>
+      </FormRedirect>
+    </>
+  )
+}
+
+export const StripeRedirectForm = (props) => {
+  const stripeRedirectFormProps = {
+    ...props,
+    UIComponent: StripeRedirectFormUI
+  }
+  return <StripeRedirectFormController {...stripeRedirectFormProps} />
+}

package/src/components/Orders/CreateCustomOrder/StripeRedirectForm/styles.js

@@ -0,0 +1,73 @@
+import styled, { css } from 'styled-components'
+
+export const FormRedirect = styled.form`
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  ${props => props.theme?.rtl && css`
+    padding-right: 10px;
+    padding-left: 0px;
+  `}
+  button {
+    width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    margin-top: 10px;
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .StripeElement,
+  .StripeElementIdeal {
+    display: block;
+    margin: 0 10px;
+    padding: 10px 14px;
+    box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
+      rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
+    border-radius: 4px;
+    background: white;
+  }
+
+  .StripeElement--focus,
+  .StripeElementIdeal--focus {
+    box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,
+      rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
+    -webkit-transition: all 150ms ease;
+    transition: all 150ms ease;
+  }
+
+  .StripeElement.loading {
+    height: 41.6px;
+    opacity: 0.6;
+  }
+
+  .StripeElementIdeal {
+    padding: 0;
+  }
+`
+
+export const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  label {
+    margin-bottom: 5px;
+  }
+
+  select {
+    padding: 7px 5px;
+    margin-top: 8px;
+    font-size: 16px;
+    border-radius: 7.6px;
+    border: 1px solid #DBDCDB;
+  }
+`
+
+export const ErrorMessage = styled.p`
+  color: #D81212;
+  margin: 10px 0 0 0;
+  font-weight: bold;
+`

package/src/components/Orders/CreateCustomOrder/TaxInformation/index.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { SingleProductCard } from '../SingleProductCard'
+import { TaxInformationContainer, ProductContainer } from './styles'
+
+export const TaxInformation = (props) => {
+  const {
+    data,
+    products,
+    type
+  } = props
+
+  const [, t] = useLanguage()
+
+  const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
+  const offersHideArray = ['offer_target_2', 'offer_target_3']
+  const hideProductsSectionOffers = offersHideArray.includes(type)
+  const dataHideArray = ['platform', 'business']
+  const hideProductsSectionData = dataHideArray.includes(data.type)
+
+  const getFilterValidation = (product) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).find(code => code.includes(product?.code))
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
+  return (
+    <TaxInformationContainer>
+      {data?.description ? (
+        <h2>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type.includes('offer') && includedOnPriceString}
+        </h2>
+      ) : (
+        <h2>
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
+        </h2>
+      )}
+      {!hideProductsSectionOffers && !hideProductsSectionData && (
+        <>
+          <h3>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</h3>
+          <ProductContainer>
+            {
+              products.filter(product => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
+    </TaxInformationContainer>
+  )
+}

package/src/components/Orders/CreateCustomOrder/TaxInformation/styles.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+
+export const TaxInformationContainer = styled.div`
+  h2{
+    font-size: 22px;
+    margin: 10px;
+    text-align: center;
+  }
+  h3{
+    font-size: 18px;
+  }
+`
+
+export const ProductContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  > div{
+    border: 1px solid #E9ECEF;
+    cursor: initial;
+    @media (min-width: 681px){
+      width: calc(50% - 45px);
+    }
+
+  }
+`

package/src/components/Orders/CreateCustomOrder/index.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { CustomOrderDetails } from './CustomOrderDetails'
+import { SideBar } from '../../Shared'
+import { Button } from '../../../styles'
+
+export const CreateCustomOrder = (props) => {
+  const {
+    handleOpenCustomOrderDetail
+  } = props
+
+  const [, t] = useLanguage()
+  const [openSidebar, setOpenSidebar] = useState(false)
+  const [moveDistance, setMoveDistance] = useState(0)
+
+  return (
+    <>
+      <Button
+        borderRadius='7.6px'
+        color='lightPrimary'
+        onClick={() => setOpenSidebar(true)}
+      >
+        {t('CREATE_CUSTOM_ORDER', 'Create custom order')}
+      </Button>
+      {openSidebar && (
+        <SideBar
+          sidebarId='custom_order_details'
+          open={openSidebar}
+          onClose={() => {
+            setMoveDistance(0)
+            setOpenSidebar(false)
+          }}
+          defaultSideBarWidth={500 + moveDistance}
+          moveDistance={moveDistance}
+        >
+          <CustomOrderDetails
+            handleParentSidebarMove={val => setMoveDistance(val)}
+            handleOpenCustomOrderDetail={handleOpenCustomOrderDetail}
+            onClose={() => setOpenSidebar(false)}
+          />
+        </SideBar>
+      )}
+    </>
+  )
+}

package/src/components/Orders/OrderToPrintTicket/index.js

@@ -112,7 +112,7 @@ export const OrderToPrintTicket = forwardRef((props, ref) => {
         {!!order?.customer?.internal_number && (
           `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number}`)}
         <br />
-        {!!order?.customer.zipcode && (
+        {!!order?.customer?.zipcode && (
         `${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}`
         )}
       </PrintTextContainer>

package/src/components/Orders/OrdersDashboardControls/index.js

@@ -3,6 +3,7 @@ import { useSession } from 'ordering-components-admin-external'
 import { OrderStatusTypeSelector } from '../OrderStatusTypeSelector'
 import { OrdersExportCSV } from '../OrdersExportCSV'
 import { OrderDelete } from '../OrderDelete'
+import { CreateCustomOrder } from '../CreateCustomOrder'
 import {
   OrderDashboardControlsContainer,
   InnerContnet,
@@ -14,7 +15,8 @@ export const OrdersDashboardControls = (props) => {
     selectedOrderNumber,
     filterValues,
     handleDeleteMultiOrders,
-    handleChangeMultiOrdersStatus
+    handleChangeMultiOrdersStatus,
+    handleOpenCustomOrderDetail
   } = props
 
   const [{ user }] = useSession()
@@ -23,6 +25,7 @@ export const OrdersDashboardControls = (props) => {
     <>
       <OrderDashboardControlsContainer>
         <InnerContnet>
+          <CreateCustomOrder handleOpenCustomOrderDetail={handleOpenCustomOrderDetail} />
           <OrdersExportCSV filterValues={filterValues} />
           {selectedOrderNumber > 0 && (
             <>

package/src/components/Orders/OrdersDashboardControls/styles.js

@@ -4,20 +4,22 @@ export const OrderDashboardControlsContainer = styled.div`
   display: flex;
   margin-top: 10px;
 
-  button {
-    height: 42px;
-    ${props => props.theme?.rtl ? css`
-      margin-left: 14px;
-    ` : css`
-      margin-right: 14px;
-    `}
-
-    svg {
+  > div {
+    > button {
+      height: 42px;
       ${props => props.theme?.rtl ? css`
-        margin-right: 5px;
+        margin-left: 14px;
       ` : css`
-        margin-left: 5px;
+        margin-right: 14px;
       `}
+  
+      svg {
+        ${props => props.theme?.rtl ? css`
+          margin-right: 5px;
+        ` : css`
+          margin-left: 5px;
+        `}
+      }
     }
   }
 

package/src/components/Orders/OrdersExportCSV/styles.js

@@ -2,6 +2,22 @@ import styled, { css } from 'styled-components'
 
 export const ExportContainer = styled.div`
   position: relative;
+  > button {
+    height: 42px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 14px;
+    ` : css`
+      margin-right: 14px;
+    `}
+
+    svg {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 5px;
+      ` : css`
+        margin-left: 5px;
+      `}
+    }
+  }
 `
 
 export const PopoverContainer = styled.div`

package/src/components/Orders/OrdersManager/index.js

@@ -191,7 +191,7 @@ const OrdersManagerUI = (props) => {
           changeOrderStatus={handleOrdersStatusGroupFilter}
           numberOfOrdersByStatus={numberOfOrdersByStatus}
         />
-        <OrderSubFilterControls isColumn={selectedOrderIds?.length}>
+        <OrderSubFilterControls>
           <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
             <OrderStatusSubFilter
               ordersStatusGroup={ordersStatusGroup}
@@ -205,6 +205,10 @@ const OrdersManagerUI = (props) => {
               filterValues={filterValues}
               handleChangeMultiOrdersStatus={handleChangeMultiOrdersStatus}
               handleDeleteMultiOrders={handleDeleteMultiOrders}
+              handleOpenCustomOrderDetail={(id) => {
+                setOrderDetailId(id)
+                setIsOpenOrderDetail(true)
+              }}
             />
           )}
         </OrderSubFilterControls>

package/src/components/Orders/OrdersManager/styles.js

@@ -43,6 +43,8 @@ export const OrderSubFilterControls = styled.div`
   display: flex;
   justify-content: space-between;
   width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
 `
 export const OrderStatusSubFilterWrapper = styled.div`
   width: 50%;

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

@@ -83,6 +83,7 @@ export const AutoScroll = ({ children, modal, special, innerScroll, scrollId })
   useEffect(() => {
     if (!scrollId) return
     const element = document?.getElementById(`${autoScrollId}`)?.parentNode
+    if (!element) return
     setParentWidth(element.width)
     setParentElement(element)
   }, [scrollId])

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import Linkify from 'react-linkify'
+
+export const LinkableText = (props) => {
+  const { text } = props
+  return (
+    <Linkify
+      componentDecorator={(decoratedHref, decoratedText, key) => (
+        <a target='blank' href={decoratedHref} key={key}>
+          {decoratedText}
+        </a>
+      )}
+    >
+      {text}
+    </Linkify>
+  )
+}

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

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components'
+
+export const Tabs = styled.div`
+  display: flex;  
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  padding: 10px 0;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  white-space: nowrap;
+  font-size: 14px;
+
+  ${({ active }) => active && css`
+    border-bottom: 3px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.lightGray};
+  `}
+`

package/src/components/Shared/index.js

@@ -7,6 +7,7 @@ import { DragScroll } from './DragScroll'
 import { Image } from './Image'
 import { ImageCrop } from './ImageCrop'
 import { InputPhoneNumber } from './InputPhoneNumber'
+import { LinkableText } from './LinkableText'
 import { Modal } from './Modal'
 import { MoreSidebarLayout } from './MoreSidebarLayout'
 import { NotFoundSource } from './NotFoundSource'
@@ -17,6 +18,7 @@ import { ProtectedRoute } from './ProtectedRoute'
 import { Schedule } from './Schedule'
 import { SearchBar } from './SearchBar'
 import { RangeCalendar } from './RangeCalendar'
+import { Tabs, Tab } from './Tabs'
 
 import { SelectBusinessCategories } from './SelectBusinessCategories'
 import { SelectBusinessProducts } from './SelectBusinessProducts'
@@ -42,6 +44,7 @@ export {
   Image,
   ImageCrop,
   InputPhoneNumber,
+  LinkableText,
   Modal,
   MoreSidebarLayout,
   NotFoundSource,
@@ -52,6 +55,8 @@ export {
   Schedule,
   SearchBar,
   RangeCalendar,
+  Tabs,
+  Tab,
 
   SelectBusinessCategories,
   SelectBusinessProducts,

package/src/components/SidebarMenu/index.js

@@ -388,7 +388,7 @@ const SidebarMenuUI = (props) => {
   }
 
   const handleOpenSite = () => {
-    handleGoToLink(`https://${ordering.project}.tryordering.com`)
+    handleGoToLink(configs?.site_url?.value || `https://${ordering.project}.tryordering.com`)
   }
 
   useEffect(() => {

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

@@ -7,6 +7,7 @@ import RiImageAddFill from '@meronex/icons/ri/RiImageAddFill'
 import {
   useLanguage,
   useApi,
+  useConfig,
   BusinessProductsListing as BusinessProductsListingController
 } from 'ordering-components-admin-external'
 import { BusinessProductsCategoyDetails } from '../BusinessProductsCategoyDetails'
@@ -46,6 +47,7 @@ import {
   ColumnsAllowWrapper,
   ButtonWrapper
 } from './styles'
+import { checkSiteUrl } from '../../../utils'
 
 const BusinessProductsListingUI = (props) => {
   const {
@@ -83,6 +85,7 @@ const BusinessProductsListingUI = (props) => {
   const [, t] = useLanguage()
   const { width } = useWindowSize()
   const [ordering] = useApi()
+  const [{ configs }] = useConfig()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [viewMethod, setViewMethod] = useState('list')
   const [currentCategory, setCurrentCategory] = useState(null)
@@ -219,10 +222,10 @@ const BusinessProductsListingUI = (props) => {
   }
 
   const handleOpenSite = () => {
-    const url = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
-      ? `https://${siteState?.site?.domain}/store/${businessState?.business?.slug}`
+    const storeUrl = configs?.site_url?.value
+      ? `${checkSiteUrl(configs?.site_url?.value)}store/${businessState?.business?.slug}`
       : `https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`
-    window.open(url, '_blank')
+    window.open(storeUrl, '_blank')
   }
 
   const handleOpenAddBusiness = () => {