ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/CouponControl/index.js

@@ -0,0 +1,90 @@
+import React from 'react'
+import { useLanguage, useOrder, CouponControl as CouponController } from 'ordering-components-external'
+import { Button, Input } from '../../../../styles'
+import { Confirm } from '../../../Shared'
+
+import {
+  CouponContainer
+} from './styles'
+
+const CouponControlUI = (props) => {
+  const {
+    couponDefault,
+    couponInput,
+    handleButtonApplyClick,
+    handleRemoveCouponClick,
+    onChangeInputCoupon,
+    confirm,
+    setConfirm
+  } = props
+
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+
+  const onRemoveCoupon = () => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_COUPON', 'Are you sure that you want to delete the coupon?')
+    })
+  }
+
+  const handleOnAccept = () => {
+    if (!confirm.error) {
+      handleRemoveCouponClick && handleRemoveCouponClick()
+    }
+    setConfirm({ ...confirm, open: false, error: false })
+    onChangeInputCoupon('')
+  }
+
+  const handleClose = () => {
+    setConfirm({ ...confirm, open: false, error: false })
+    onChangeInputCoupon('')
+  }
+
+  return (
+    <CouponContainer>
+      {couponDefault ? (
+        <Button onClick={() => onRemoveCoupon()}>
+          {t('REMOVE_COUPON', 'Remove Coupon')} {couponDefault}
+        </Button>
+      ) : (
+        <>
+          <Input
+            value={couponInput ?? ''}
+            placeholder={t('DISCOUNT_COUPON', 'Discount coupon')}
+            onChange={(e) => onChangeInputCoupon(e.target.value)}
+            autoComplete='off'
+          />
+          <Button
+            borderRadius='8px'
+            color='primary'
+            disabled={!couponInput || orderState.loading}
+            onClick={handleButtonApplyClick}
+          >
+            {t('APPLY', 'Apply')}
+          </Button>
+        </>
+      )}
+      <Confirm
+        title={t('COUPON', 'Coupon')}
+        content={confirm?.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm?.open}
+        onClose={handleClose}
+        onCancel={!confirm?.error ? () => setConfirm({ ...confirm, open: false, error: false }) : null}
+        onAccept={handleOnAccept}
+        closeOnBackdrop={false}
+      />
+    </CouponContainer>
+  )
+}
+
+export const CouponControl = (props) => {
+  const couponProp = {
+    ...props,
+    UIComponent: CouponControlUI
+  }
+  return (
+    <CouponController {...couponProp} />
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/CouponControl/styles.js

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components'
+
+export const CouponContainer = styled.div`
+  /* width: 80%; */
+  /* margin: auto; */
+  display: flex;
+  justify-content: flex-start;
+  button {
+    margin-left: 5px;
+    ${props => props.theme?.rtl && css`
+      margin-right: 5px;
+      margin-left: 0px;
+    `}
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  input {
+    width: 50%;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/CustomOrderDetails/index.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { useLanguage, useOrder, CustomOrderDetails as CustomOrderDetailsController } from 'ordering-components-external'
+import { SelectCustomer } from '../SelectCustomer'
+import { SelectBusinesses } from '../SelectBusinesses'
+import { Map } from '../Map'
+import { SelectProducts } from '../SelectProducts'
+import { Checkout } from '../Checkout'
+import { Alert } from '../../../Shared'
+
+import {
+  DetailsContainer
+} from './styles'
+
+const CustomOrderDetailsUI = (props) => {
+  const {
+    phone,
+    onChangeNumber,
+    customersPhones,
+    setCustomersPhones,
+    handleParentSidebarMove,
+    businessList,
+    getBusinessList,
+    selectedUser,
+    selectedBusiness,
+    setSelectedUser,
+    setSelectedBusiness,
+    productList,
+    getProducts,
+    handeUpdateProductCart,
+    cart,
+    onClose,
+    handleOpenCustomOrderDetail
+  } = props
+
+  const [, t] = useLanguage()
+  const [, { changeAddress }] = useOrder()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const handleCloseAlert = () => {
+    setCustomersPhones({ ...customersPhones, error: null })
+    setAlertState({ open: false, content: [] })
+  }
+
+  const customerAddress = useMemo(() => {
+    let address = null
+    if (selectedUser?.addresses) {
+      address = selectedUser.addresses.find(address => address?.default)
+    }
+    return address
+  }, [selectedUser])
+
+  useEffect(() => {
+    if (!customerAddress?.id) return
+    changeAddress(customerAddress.id)
+  }, [customerAddress?.id])
+
+  useEffect(() => {
+    if (!customerAddress?.location) return
+    getBusinessList(customerAddress.location)
+  }, [customerAddress?.location])
+
+  useEffect(() => {
+    if (customersPhones?.error) {
+      setAlertState({ open: true, content: [customersPhones?.error] })
+    }
+  }, [customersPhones?.error])
+
+  return (
+    <>
+      <DetailsContainer className='custom-order-content'>
+        <h2>{t('CREATE_CUSTOM_ORDER', 'Create custom order')}</h2>
+        <SelectCustomer
+          phone={phone}
+          customersPhones={customersPhones}
+          selectedUser={selectedUser}
+          setSelectedUser={setSelectedUser}
+          onChangeNumber={onChangeNumber}
+          handleParentSidebarMove={handleParentSidebarMove}
+          customerAddress={customerAddress}
+        />
+        {customerAddress?.location && (
+          <>
+            <SelectBusinesses
+              businessList={businessList}
+              selectedBusiness={selectedBusiness}
+              setSelectedBusiness={setSelectedBusiness}
+            />
+            <Map
+              customer={selectedUser}
+              customerLocation={customerAddress?.location}
+              business={selectedBusiness}
+            />
+            {selectedBusiness && (
+              <SelectProducts
+                productList={productList}
+                getProducts={getProducts}
+                handeUpdateProductCart={handeUpdateProductCart}
+                cart={cart}
+                business={selectedBusiness}
+              />
+            )}
+            {cart && cart?.products.length > 0 && (
+              <Checkout
+                cartUuid={cart.uuid}
+                onPlaceOrderClick={(data, paymethod, cart) => {
+                  cart?.uuid && handleOpenCustomOrderDetail(cart.uuid)
+                  onClose()
+                }}
+              />
+            )}
+          </>
+        )}
+        <Alert
+          title={t('ERROR', 'Error')}
+          open={alertState.open}
+          content={alertState.content}
+          onClose={handleCloseAlert}
+          onAccept={handleCloseAlert}
+        />
+      </DetailsContainer>
+    </>
+  )
+}
+
+export const CustomOrderDetails = (props) => {
+  const customOrderProps = {
+    ...props,
+    UIComponent: CustomOrderDetailsUI
+  }
+  return <CustomOrderDetailsController {...customOrderProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/CustomOrderDetails/styles.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components'
+
+export const DetailsContainer = styled.div`
+  width: 100%;
+  padding: 25px 20px;
+  overflow: auto;
+
+  > h2 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-top: 0;
+    margin-bottom: 20px;
+
+    ${props => props.theme?.rtl ? css`
+      margin-left: 40px;
+    ` : css`
+      margin-right: 40px;
+    `}
+  }
+
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 4px;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/DriverTips/index.js

@@ -0,0 +1,113 @@
+import React, { useState } from 'react'
+import { DriverTips as DriverTipsController, useUtils, useLanguage, useConfig } from 'ordering-components-external'
+import { Button, Input } from '../../../../styles'
+
+import {
+  DriverTipContainer,
+  TipCard,
+  FormDriverTip,
+  WrapperInput,
+  DriverTipMessage,
+  WrapperTips
+} from './styles'
+
+const DriverTipsUI = (props) => {
+  const {
+    isMulti,
+    driverTip,
+    driverTipsOptions,
+    cart,
+    carts,
+    isDriverTipUseCustom,
+    handlerChangeOption
+  } = props
+  const [{ parsePrice }] = useUtils()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+
+  const [customTip, setCustomTip] = useState((isDriverTipUseCustom && !driverTipsOptions.includes(driverTip)) ?? false)
+  const [value, setvalue] = useState('')
+  const isFixedPriceType = parseInt(configs?.driver_tip_type?.value, 10) === 1
+  const currentTip = customTip ? parseFloat(driverTip || 0) > 0 : (!customTip && !driverTipsOptions.includes(driverTip) && parseFloat(driverTip || 0)) > 0
+
+  const handleChangeDriverTip = (e) => {
+    const tip = Number(e?.target?.value)
+    if ((isNaN(tip) || tip < 0)) return
+    setvalue(e?.target?.value)
+  }
+
+  const placeholderCurrency = !isFixedPriceType ? '0%' : (configs?.currency_position?.value || 'left') === 'left'
+    ? `${configs?.format_number_currency?.value}0`
+    : `0${configs?.format_number_currency?.value}`
+
+  const multiCartTipsAmmout = carts?.reduce((total, cart) => {
+    return total + parseFloat(cart?.driver_tip || 0)
+  }, 0)
+
+  return (
+    <DriverTipContainer id='driver-tip-container'>
+      <h3>{t('DRIVER_TIPS', 'Driver Tips')}</h3>
+      <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+      <WrapperTips>
+        {driverTipsOptions.map((option, i) => (
+          <TipCard
+            key={i}
+            className={`${(option === driverTip && !customTip) ? 'active' : ''}`}
+            onClick={() => {
+              handlerChangeOption(option)
+              setCustomTip(false)
+            }}
+          >
+            {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
+          </TipCard>
+        ))}
+        {isDriverTipUseCustom && (
+          <TipCard
+            className={`${customTip ? 'active' : ''}`}
+            onClick={() => setCustomTip(true)}
+          >
+            {t('CUSTOM_TIP', 'Custom')}
+          </TipCard>
+        )}
+        <FormDriverTip>
+          {customTip &&
+            <WrapperInput>
+              <Input
+                name='drivertip'
+                type='text'
+                value={value}
+                placeholder={placeholderCurrency}
+                onChange={handleChangeDriverTip}
+              />
+              <Button
+                borderRadius='8px'
+                color='primary'
+                disabled={parseFloat(value || 0) < 0 || parseFloat(value || 0) === driverTip || value === ''}
+                onClick={() => {
+                  handlerChangeOption(value)
+                  setvalue('')
+                }}
+              >
+                {t('APPLY_TIP', 'Apply Tip')}
+              </Button>
+            </WrapperInput>}
+        </FormDriverTip>
+        {currentTip && (
+          <DriverTipMessage>
+            {t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPriceType &&
+              ` (${driverTip}%)`}: {parsePrice(isMulti ? multiCartTipsAmmout : isFixedPriceType ? driverTip : cart?.driver_tip)}
+          </DriverTipMessage>
+        )}
+      </WrapperTips>
+    </DriverTipContainer>
+  )
+}
+
+export const DriverTips = (props) => {
+  const driverTipsProps = {
+    ...props,
+    UIComponent: DriverTipsUI
+  }
+
+  return <DriverTipsController {...driverTipsProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/DriverTips/styles.js

@@ -0,0 +1,91 @@
+import styled, { css } from 'styled-components'
+
+export const DriverTipContainer = styled.div`
+  margin-top: 50px;
+
+  > p {
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 24px;
+  }
+`
+
+export const TipCard = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  width: 62px;
+  height: 62px;
+  min-width: 62px;
+  cursor: pointer;
+  text-transform: capitalize;
+  font-size: 14px;
+  color: #B1BCCC;
+  transition: all 0.3s;
+  text-align: center;
+  &.active {
+    background-color: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primaryContrast};
+  }
+`
+
+export const FormDriverTip = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+export const DriverTipLabel = styled.label`
+  font-size: 16px;
+  align-self: flex-start;
+
+  ${props => props.theme?.rtl && css`
+    margin-left: 20px;
+    margin-right: 0;
+  `}
+`
+
+export const WrapperInput = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: 10px;
+
+  input {
+    width: 65%;
+    padding: 4px 15px;
+    box-sizing: border-box;
+    flex: 1;
+    margin-right: 10px;
+  }
+
+  @media (min-width: 768px) {
+    input {
+      width: 80%;
+    }
+  }
+`
+
+export const DriverTipMessage = styled.p`
+  color: ${props => props.theme.colors.primary};
+  font-weight: 600;
+`
+
+export const WrapperTips = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+
+  > div {
+    margin: 5px;
+    text-align: center;
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/Map/index.js

@@ -0,0 +1,115 @@
+import React, { useMemo, useRef, useState, useEffect } from 'react'
+import { useConfig } from 'ordering-components-external'
+import GoogleMapReact, { fitBounds } from 'google-map-react'
+import { InterActOrderMarker } from '../../InterActOrderMarker'
+
+import { Container } from './styles'
+
+export const Map = (props) => {
+  const {
+    business,
+    customer,
+    customerLocation
+  } = props
+  const [{ configs }] = useConfig()
+
+  const mapRef = useRef(null)
+  const googleMapsApiKey = useMemo(() => configs?.google_maps_api_key?.value, [configs])
+  const defaultLatitude = Number(configs?.location_default_latitude?.value)
+  const defaultLongitude = Number(configs?.location_default_longitude?.value)
+  const isInvalidDefaultLocation = isNaN(defaultLatitude) || isNaN(defaultLongitude)
+  const defaultCenter = {
+    lat: !isInvalidDefaultLocation ? defaultLatitude : 40.7744146,
+    lng: !isInvalidDefaultLocation ? defaultLongitude : -73.9678064
+  }
+
+  const defaultZoom = 10
+  const [mapLoaded, setMapLoaded] = useState(true)
+  const [mapCenter, setMapCenter] = useState(defaultCenter)
+  const [mapZoom, setMapZoom] = useState(10)
+
+  const handleMapChange = (data) => {
+    if (!data?.zoom) return
+    setMapZoom(data?.zoom)
+  }
+
+  const mapFit = () => {
+    const bounds = new window.google.maps.LatLngBounds()
+
+    if (!business?.location) {
+      setMapCenter(customerLocation)
+      setMapZoom(defaultZoom)
+      return
+    }
+
+    let marker, newPoint
+    marker = business?.location
+    newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+    bounds.extend(newPoint)
+
+    marker = customerLocation
+    newPoint = new window.google.maps.LatLng(marker.lat, marker.lng)
+    bounds.extend(newPoint)
+
+    const newBounds = {
+      ne: {
+        lat: bounds.getNorthEast()?.lat?.(),
+        lng: bounds.getNorthEast()?.lng?.()
+      },
+      sw: {
+        lat: bounds.getSouthWest()?.lat?.(),
+        lng: bounds.getSouthWest()?.lng?.()
+      }
+    }
+
+    const mapSize = {
+      width: mapRef.current.clientWidth,
+      height: mapRef.current.clientHeight
+    }
+    const { center, zoom } = fitBounds(newBounds, mapSize)
+    setMapZoom(zoom)
+    setMapCenter(center)
+  }
+
+  useEffect(() => {
+    if (mapLoaded) return
+    mapFit()
+  }, [customerLocation, business?.location, mapLoaded])
+
+  return (
+    <Container ref={mapRef}>
+      {googleMapsApiKey && (
+        <GoogleMapReact
+          bootstrapURLKeys={{
+            key: window.document.getElementById('__googleMapsScriptId') ? null : googleMapsApiKey,
+            libraries: ['places', 'geometry', 'drawing', 'visualization']
+          }}
+          onGoogleApiLoaded={() => setMapLoaded(false)}
+          defaultCenter={defaultCenter}
+          center={mapCenter}
+          defaultZoom={defaultZoom}
+          zoom={mapZoom}
+          options={{ fullscreenControl: true }}
+          className='map'
+          onChange={(data) => handleMapChange(data)}
+          yesIWantToUseGoogleMapApiInternals
+        >
+          {business?.location && (
+            <InterActOrderMarker
+              business={business}
+              lat={business?.location?.lat}
+              lng={business?.location?.lng}
+              image={business?.logo}
+            />
+          )}
+          <InterActOrderMarker
+            customer={customer}
+            lat={customerLocation?.lat}
+            lng={customerLocation?.lng}
+            image={customer?.photo}
+          />
+        </GoogleMapReact>
+      )}
+    </Container>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/Map/styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+  height: 200px;
+  background-color: #EEE;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/PaymentOptionCard/index.js

@@ -0,0 +1,70 @@
+import { PaymentOptionStripe, useLanguage, useSession } from 'ordering-components-external'
+import React, { useEffect, useState } from 'react'
+import { CardFormCustom } from '../CardFormCustom'
+import { PaymentOptionStripeUI } from '../PaymentOptionStripe'
+import { Modal } from '../../../Shared'
+import { AddNewCard } from '../PaymentOptionStripe/styles'
+
+const PaymentOptionCardUI = (props) => {
+  const {
+    deleteCard,
+    cardsList,
+    handleCardClick,
+    handleNewCard,
+    paymethodSelected,
+    cardSelected,
+    gateway,
+    paymethodsWithoutSaveCards,
+    onSelectCard
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ token }] = useSession()
+
+  const [addCardOpen, setAddCardOpen] = useState(false)
+
+  useEffect(() => {
+    if (cardsList?.cards?.length > 0) {
+      setAddCardOpen(true)
+    }
+  }, [cardsList?.cards])
+
+  return (
+    <>
+      <PaymentOptionStripeUI
+        deleteCard={deleteCard}
+        cardsList={cardsList}
+        handleCardClick={handleCardClick}
+        handleNewCard={handleNewCard}
+        paymethodSelected={paymethodSelected}
+        cardSelected={cardSelected}
+        gateway={gateway}
+        onSelectCard={onSelectCard}
+      />
+
+      {token && !cardsList.loading && (!cardSelected || !paymethodsWithoutSaveCards.includes(gateway)) && (
+        <AddNewCard>
+          <span onClick={() => setAddCardOpen(true)}>{t('ADD_NEW_CARD', 'Add new card')}</span>
+        </AddNewCard>
+      )}
+
+      <Modal
+        open={addCardOpen}
+        onClose={() => setAddCardOpen(false)}
+        title={t('ADD_NEW_CARD', 'Add new card')}
+      >
+        <CardFormCustom handleNewCard={handleNewCard} setAddCardOpen={setAddCardOpen} />
+      </Modal>
+    </>
+  )
+}
+
+export const PaymentOptionCard = (props) => {
+  const paymentOptionStripeProps = {
+    ...props,
+    UIComponent: PaymentOptionCardUI
+  }
+  return (
+    <PaymentOptionStripe {...paymentOptionStripeProps} />
+  )
+}