ordering-components-external 13.2.14 → 13.2.16

package/src/components/OrderListGroups/index.js

@@ -12,7 +12,6 @@ export const OrderListGroups = (props) => {
     UIComponent,
     orderBy,
     isIos,
-    useDefualtSessionManager,
     paginationSettings,
     asDashboard,
     orderGroupStatusCustom,
@@ -102,6 +101,7 @@ export const OrderListGroups = (props) => {
   const [orderLogisticAdded, setOrderLogisticAdded] = useState(null)
   const [orderLogisticUpdated, setOrderLogisticUpdated] = useState(null)
   const [recentlyReceivedMessage, setRecentlyReceivedMessage] = useState(null)
+
   const [ordersFiltered, setOrdersFiltered] = useState({
     orders: [],
     loading: false,
@@ -115,9 +115,27 @@ export const OrderListGroups = (props) => {
     }
   })
 
-  const accessToken = useDefualtSessionManager ? session.token : props.accessToken
   const requestsState = {}
 
+  const handleSelectCurrentTab = (value) => {
+    if (!isDriverApp) {
+      setOrdersGroup({
+        ...ordersGroup,
+        [value]: {
+          ...ordersGroup[value],
+          loading: true
+        }
+      })
+    }
+    if (value === 'logisticOrders') {
+      setlogisticOrders({
+        ...logisticOrders,
+        loading: true
+      })
+    }
+    setCurrentTabSelected(value)
+  }
+
   const getOrders = async ({
     page,
     pageSize = paginationSettings.pageSize,
@@ -285,8 +303,8 @@ export const OrderListGroups = (props) => {
     options.cancelToken = source
 
     const functionFetch = asDashboard
-      ? ordering.setAccessToken(accessToken).orders().asDashboard()
-      : ordering.setAccessToken(accessToken).orders()
+      ? ordering.setAccessToken(session.token).orders().asDashboard()
+      : ordering.setAccessToken(session.token).orders()
     return await functionFetch.get(options)
   }
 
@@ -294,7 +312,7 @@ export const OrderListGroups = (props) => {
     try {
       setControlsState({ ...controlsState, loading: true })
       const { content: { error, result } } = await ordering
-        .setAccessToken(accessToken)
+        .setAccessToken(session.token)
         .controls()
         .get()
       const obj = {
@@ -527,7 +545,7 @@ export const OrderListGroups = (props) => {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: `Bearer ${accessToken}`,
+          Authorization: `Bearer ${session.token}`,
           'X-App-X': ordering.appId,
           'X-Socket-Id-X': socket?.getId()
         }
@@ -557,11 +575,11 @@ export const OrderListGroups = (props) => {
       const errorState = []
 
       if (orderIds.length === 1) {
-        const { content: { error } } = await ordering.setAccessToken(accessToken).orders(orderIds[0]).delete()
+        const { content: { error } } = await ordering.setAccessToken(session.token).orders(orderIds[0]).delete()
         errorState.push({ error, id: orderIds[0] })
       } else if (orderIds.length > 1) {
         for (const id of orderIds) {
-          const { content: { error: multiError } } = await ordering.setAccessToken(accessToken).orders(id).delete()
+          const { content: { error: multiError } } = await ordering.setAccessToken(session.token).orders(id).delete()
           errorState.push({ error: multiError, id })
         }
       }
@@ -602,7 +620,7 @@ export const OrderListGroups = (props) => {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: `Bearer ${accessToken}`,
+          Authorization: `Bearer ${session.token}`,
           'X-App-X': ordering.appId,
           'X-Socket-Id-X': socket?.getId()
         }
@@ -699,38 +717,38 @@ export const OrderListGroups = (props) => {
   }
 
   const actionOrderToTab = (orderAux, status, type) => {
-    const orderList = ordersGroup[status]?.orders
-    let orders
-    const order = {
-      ...orderAux,
-      showNotification: true
-    }
-    if (type === 'update') {
-      const indexToUpdate = orderList.findIndex((o) => o.id === order.id)
-      orderList[indexToUpdate] = { ...order, action: type + order?.status }
-      orders = orderList
-    } else {
-      orders = type === 'add'
-        ? [{ ...order, action: type + order?.status }, ...orderList]
-        : orderList.filter((_order) => _order.id !== order.id)
-    }
-    let _pagination = ordersGroup[status].pagination
-    if (type !== 'update') {
-      _pagination = {
-        ...ordersGroup[status].pagination,
-        total: ordersGroup[status].pagination.total + (type === 'add' ? 1 : -1)
+    setOrdersGroup(prevState => {
+      if (!prevState[status]?.orders) return
+      const orderList = prevState[status]?.orders
+      const order = { ...orderAux, showNotification: false }
+      let updatedOrders
+
+      switch (type) {
+        case 'update':
+          updatedOrders = orderList.map(o => o.id === order.id ? { ...order, action: `${type}${order?.status}` } : o)
+          break
+        case 'add':
+          updatedOrders = [{ ...order, action: `${type}${order?.status}` }, ...orderList]
+          break
+        case 'remove':
+          updatedOrders = orderList.filter(o => o.id !== order.id)
+          break
       }
-    }
-    setOrdersGroup((prevState) => ({
-      ...prevState,
-      orders: filterByIdUnique(sortOrders(orders), status),
-      [status]: {
-        ...prevState[status],
-        orders: sortOrders(orders),
-        pagination: _pagination
-      },
-      pagination: _pagination
-    }))
+
+      const updatedPagination = {
+        ...prevState[status].pagination,
+        total: prevState[status].pagination.total + (type === 'add' ? 1 : type === 'remove' ? -1 : 0)
+      }
+
+      return {
+        ...prevState,
+        [status]: {
+          ...prevState[status],
+          orders: filterByIdUnique(sortOrders(updatedOrders), status),
+          pagination: updatedPagination
+        }
+      }
+    })
   }
 
   const handleClickOrder = (orderAux) => {
@@ -773,7 +791,7 @@ export const OrderListGroups = (props) => {
     try {
       const response = await fetch(`${ordering.root}/drivers/${session.user?.id}/assign_requests/${orderId}`, {
         method: 'PUT',
-        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${accessToken}` },
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${session.token}` },
         body: JSON.stringify({
           status,
           user_id: session.user?.id
@@ -1127,16 +1145,9 @@ export const OrderListGroups = (props) => {
     const userId = session.user.id
     const userLevel = session.user.level
 
-    const ordersRoom = !isDriverApp
-      ? {
-        project: ordering.project,
-        room: 'orders',
-        user_id: userId,
-        role: 'manager'
-      }
-      : userLevel === 0
-        ? 'orders'
-        : `orders_${userId}`
+    const ordersRoom = userLevel === 0
+      ? 'orders'
+      : `orders_${userId}`
 
     const requestsRoom = `requests_${userId}`
     const groupsRoom = `ordergroups_${userId}`
@@ -1204,7 +1215,7 @@ export const OrderListGroups = (props) => {
           currentFilters={currentFilters}
           setCurrentFilters={setCurrentFilters}
           currentTabSelected={currentTabSelected}
-          setCurrentTabSelected={setCurrentTabSelected}
+          setCurrentTabSelected={handleSelectCurrentTab}
           ordersGroup={ordersGroup}
           setOrdersGroup={setOrdersGroup}
           logisticOrders={logisticOrders}

package/src/components/PaymentOptionStripeLink/index.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useLanguage } from '../../contexts/LanguageContext'
+import { useApi } from '../../contexts/ApiContext'
+import { useToast, ToastType } from '../../contexts/ToastContext'
+import { useSession } from '../../contexts/SessionContext'
+
+/**
+ * Component to manage payment option stripe link behavior UI component
+ */
+export const PaymentOptionStripeLink = (props) => {
+  const {
+    UIComponent,
+    paymentURL
+  } = props
+
+  const [ordering] = useApi()
+  const [{ token }] = useSession()
+  const [, t] = useLanguage()
+  const [, { showToast }] = useToast()
+
+  const [stripeLinkState, setStripeLinkState] = useState({ loading: true, error: null, paymentURL: null })
+  const [userInfo, setUserInfo] = useState({})
+
+  const handleChangeUserInfo = (changes) => {
+    setUserInfo({ ...userInfo, ...changes })
+  }
+
+  const handleSendStripeLink = async (type, callback) => {
+    try {
+      setStripeLinkState({ ...stripeLinkState, loading: true })
+      const data = {
+        type,
+        provider: ordering?.project === 'pizzahutmexico' ? 'custom' : 'twilio',
+        country_phone_code: userInfo.country_phone_code,
+        cellphone: userInfo.cellphone,
+        message: t('LINK_TO_PAY_MESSAGE',
+          'Hello there _name_ _lastname_, click on the following link to complete the payment: _link_')
+          .replace('_name_', userInfo?.name)
+          .replace('_lastname_', userInfo?.lastname)
+          .replace('_link_', paymentURL)
+      }
+      const response = await fetch(`${ordering.root}/text_messages/send`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+          'X-App-X': ordering.appId
+        },
+        body: JSON.stringify(data)
+      })
+      const { result, error } = await response.json()
+      if (error) {
+        setStripeLinkState({ ...stripeLinkState, loading: false, error: result })
+        return
+      }
+      setStripeLinkState({ ...stripeLinkState, loading: false })
+      callback && callback()
+      showToast(ToastType.Success, t('MESSAGE_SENT_SUCCESSFULLY', 'The link has been sent'))
+    } catch (error) {
+      setStripeLinkState({ ...stripeLinkState, loading: false, error: [error.message] })
+    }
+  }
+
+  useEffect(() => {
+    if (!paymentURL) return
+    setStripeLinkState({ ...stripeLinkState, loading: false, paymentURL })
+  }, [paymentURL])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          userInfo={userInfo}
+          stripeLinkState={stripeLinkState}
+          setStripeLinkState={setStripeLinkState}
+          handleSendStripeLink={handleSendStripeLink}
+          handleChangeUserInfo={handleChangeUserInfo}
+        />
+      )}
+    </>
+  )
+}
+
+PaymentOptionStripeLink.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType
+}

package/src/components/PaymentOptions/index.js

@@ -1,3 +1,4 @@
+
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useOrder } from '../../contexts/OrderContext'
@@ -5,9 +6,10 @@ import { useApi } from '../../contexts/ApiContext'
 import { useEvent } from '../../contexts/EventContext'
 import { useSession } from '../../contexts/SessionContext'
 
+const stripeLink = 'stripe_link'
 const paymethodsExisting = ['stripe', 'stripe_direct', 'stripe_connect', 'paypal', 'square']
 const paymethodsNotAllowed = ['paypal_express', 'authorize']
-const paymethodsCallcenterMode = ['cash', 'card_delivery', 'ivrpay', '100_coupon']
+const paymethodsCallcenterMode = ['cash', 'card_delivery', 'ivrpay', '100_coupon', stripeLink]
 
 /**
  * Component to manage payment options behavior without UI component
@@ -28,7 +30,7 @@ export const PaymentOptions = (props) => {
   const [events] = useEvent()
   const [ordering] = useApi()
   const [orderState, { changePaymethod }] = useOrder()
-  const [sessionState] = useSession()
+  const [{ device_code }] = useSession()
   const orderTotal = orderState.carts?.[`businessId:${businessId}`]?.total || 0
 
   const [paymethodsList, setPaymethodsList] = useState({ paymethods: [], loading: true, error: null })
@@ -42,7 +44,7 @@ export const PaymentOptions = (props) => {
       .filter(credentials => isCustomerMode
         ? !paymethodsNotAllowed.includes(credentials?.paymethod?.gateway) &&
           (isAlsea || paymethodsCallcenterMode.includes(credentials?.paymethod?.gateway))
-        : !paymethodsNotAllowed.includes(credentials?.paymethod?.gateway))
+        : ![...paymethodsNotAllowed, stripeLink].includes(credentials?.paymethod?.gateway))
       .map(credentials => {
         return {
           ...credentials?.paymethod,
@@ -58,14 +60,13 @@ export const PaymentOptions = (props) => {
    */
   const getPaymentOptions = async () => {
     setPaymethodsList({ ...paymethodsList, loading: true })
-    const deviceCode = sessionState?.device_code
 
     const headers = {
-      'X-Physical-Device-Code-X': `${deviceCode}`
+      'X-Physical-Device-Code-X': `${device_code}`
     }
 
     try {
-      const { content: { error, result } } = await ordering.businesses(businessId).get(deviceCode ? { headers } : {})
+      const { content: { error, result } } = await ordering.businesses(businessId).get(device_code ? { headers } : {})
       if (!error) {
         paymethodsList.paymethods = parsePaymethods(result.paymethods)
       }

package/src/index.js

@@ -115,6 +115,7 @@ import { PaymentOptionCash } from './components/PaymentOptionCash'
 import { PaymentOptionPaypal } from './components/PaymentOptionPaypal'
 import { PaymentOptionStripe } from './components/PaymentOptionStripe'
 import { PaymentOptionStripeDirect } from './components/PaymentOptionStripeDirect'
+import { PaymentOptionStripeLink } from './components/PaymentOptionStripeLink'
 import { PaymentOptionStripeRedirect } from './components/PaymentOptionStripeRedirect'
 import { PaymentOptionSquare } from './components/PaymentOptionSquare'
 import { StripeElementsForm } from './components/StripeElementsForm'
@@ -265,6 +266,7 @@ export {
   PaymentOptionPaypal,
   PaymentOptionStripe,
   PaymentOptionStripeDirect,
+  PaymentOptionStripeLink,
   PaymentOptionStripeRedirect,
   PaymentOptionSquare,
   PhoneAutocomplete,