ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/src/components/Orders/Messages/styles.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components'
-import { darken } from 'polished'
 
 export const MessagesContainer = styled.div`
   width: 100%;
@@ -15,6 +14,26 @@ export const WrapperContainer = styled.div`
   box-sizing: border-box;
 `
 
+export const NotSendMessage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  color: #909BA9;
+  background: #F8F9FA;
+
+  svg {
+    font-size: 20px;
+  }
+
+  p {
+    font-size: 14px;
+    color: #909BA9;
+    margin: 6px 0;
+  }
+`
+
 export const HeaderProfile = styled.div`
   display: flex;
   padding: 20px 0px;
@@ -402,10 +421,11 @@ export const WrapperDeleteImage = styled.div`
 
 export const WrapperSendMessageButton = styled.div`
   white-space: nowrap;
-  width: fit-content;
+  width: 80px;
 
   button {
     height: 43px;
+    width: 100%;
     svg {
        width: 1.5em;
        height: 1.5em; 
@@ -429,6 +449,7 @@ export const WrapperSendMessageButton = styled.div`
   }
 
   @media (min-width: 480px) {
+    width: fit-content;
     button {
       svg {
         margin-right: 10px;
@@ -529,8 +550,7 @@ export const OrderDetailIconButton = styled.button`
   border: none;
   background: #b9bcc7;
   &:active {
-    background: ${() => darken(0.07, '#b9bcc7')};
-  }
+    background: '#b9bcc7';
   border-radius: 5px;
   display: flex;
   align-items: center;

package/src/themes/callcenterOriginal/src/components/Orders/OrderBill/RefundToWallet.js

@@ -0,0 +1,221 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useConfig } from 'ordering-components-external'
+import { useForm } from 'react-hook-form'
+import { Button, Input, TextArea } from '../../../styles'
+import { Alert, Modal } from '../../Shared'
+import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
+import { Select } from '../../../styles/Select/FirstSelect'
+
+import {
+  RefundWalletButtonWrapper,
+  RefundContainer,
+  RadioItemContainer,
+  RefundAmountWrapper,
+  RefundReasonContainer,
+  Option,
+  SelectWrapper,
+  ErrorText
+} from './styles'
+
+export const RefundToWallet = (props) => {
+  const {
+    order,
+    actionStatus,
+    handleOrderRefund
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const isAllowCashWalletRefund = configs?.refund_cash_wallet_allow_when_order_cancelled?.value === '1'
+  const isAllowCreditPointRefund = configs?.refund_credit_point_allow_when_order_cancelled?.value === '1'
+  const isAllowStripeRefund = configs?.refund_stripe_allow_when_order_cancelled?.value === '1'
+  const isAllowOtherRefund = configs?.refund_other_allow_when_order_cancelled?.value === '1'
+
+  const { handleSubmit, register, errors } = useForm()
+  const [openModal, setOpenModal] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isRefundAll, setIsRefundAll] = useState(true)
+  const [refundDisabled, setRefundDisabled] = useState(false)
+  const [refundAllDisabled, setRefundAllDisabled] = useState(false)
+  const [selectedRefundOption, setSelectedRefundOption] = useState(null)
+  const [refundOptions, setRefundOptions] = useState([])
+
+  const onSubmit = (formData) => {
+    if (!selectedRefundOption) {
+      setAlertState({
+        open: true,
+        content: t('VALIDATION_ERROR_FILLED', 'The _attribute_ field is required.').replace('_attribute_', t('TYPE', 'Type'))
+      })
+      return
+    }
+    const data = {}
+    if (selectedRefundOption !== 'cash_wallet') {
+      data.order_payment_event_id = selectedRefundOption
+    }
+    if (formData.description) data.description = formData.description
+    data.amount = isRefundAll ? (order?.summary?.total || order?.total) : formData.amount
+    data.transfer_to = selectedRefundOption !== 'cash_wallet' ? 'source' : 'cash_wallet'
+    handleOrderRefund(data)
+  }
+
+  useEffect(() => {
+    if (Object?.keys(errors)?.length > 0) {
+      setAlertState({
+        open: true,
+        content: Object?.values(errors)?.map((error) => error?.message)
+      })
+    }
+  }, [errors])
+
+  useEffect(() => {
+    setSelectedRefundOption(null)
+    setRefundDisabled(false)
+    setRefundAllDisabled(false)
+    setIsRefundAll(true)
+
+    if (!order?.payment_events) return
+    const totalRefundAmount = order?.payment_events?.filter(item => item.event === 'refund').reduce((total, event) => total + (event?.amount || 0), 0) || 0
+    if (totalRefundAmount === (order?.summary?.total || order?.total)) {
+      setRefundDisabled(true)
+    }
+    if (totalRefundAmount) {
+      setRefundAllDisabled(true)
+      setIsRefundAll(false)
+    }
+    const _refundOptions = []
+    const paymentEvents = order?.payment_events?.filter(item => item.event === 'payment') || []
+    paymentEvents.forEach(event => {
+      if (event?.wallet_event?.wallet?.type === 'cash') {
+        if (isAllowCashWalletRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: <Option>{t('CASH_WALLET', 'Cash Wallet')}</Option>
+          })
+        }
+      } else if (event?.wallet_event?.wallet?.type === 'credit_point') {
+        if (isAllowCreditPointRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: <Option>{t('POINTS_WALLET', 'Points Wallet')}</Option>
+          })
+        }
+      } else if (event?.paymethod?.gateway === 'stripe' || event?.data?.gateway === 'stripe') {
+        if (isAllowStripeRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: <Option>{t('STRIPE', 'Stripe')}</Option>
+          })
+        }
+      } else {
+        if (isAllowOtherRefund) {
+          _refundOptions.push({
+            value: event.id,
+            content: <Option>{event?.paymethod ? t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name) : t(event?.data?.gateway?.toUpperCase(), event?.data?.gateway?.replaceAll('_', ' '))}</Option>
+          })
+        }
+      }
+    })
+    setRefundOptions(_refundOptions)
+  }, [JSON.stringify(order?.payment_events)], order?.id)
+
+  useEffect(() => {
+    if (!actionStatus?.loading) {
+      setOpenModal(false)
+    }
+  }, [actionStatus?.loading])
+
+  return (
+    <>
+      {(isAllowCashWalletRefund || isAllowCreditPointRefund || isAllowStripeRefund || isAllowOtherRefund) && (
+        <RefundWalletButtonWrapper>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            disabled={actionStatus?.loading || refundDisabled}
+            onClick={() => setOpenModal(true)}
+          >
+            {t('REFUND_TO_WALLET', 'Refund to Wallet')}
+          </Button>
+        </RefundWalletButtonWrapper>
+      )}
+      <Modal
+        width='700px'
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+      >
+        <RefundContainer onSubmit={handleSubmit(onSubmit)} autoComplete='off'>
+          <h2>{t('REFUND_TO_WALLET', 'Refund to Wallet')}</h2>
+          {refundOptions.length > 0 ? (
+            <>
+              <SelectWrapper>
+                <span>{t('REFUND_TYPES', 'Refund types')}</span>
+                <Select
+                  defaultValue={selectedRefundOption}
+                  options={refundOptions}
+                  placeholder={<Option>{t('SELECT_TYPE', 'Select type')}</Option>}
+                  onChange={val => setSelectedRefundOption(val)}
+                />
+              </SelectWrapper>
+              <p>{t('QUESTION_REFUND_AMOUNT', 'How do you want to refund?')}</p>
+              <RadioItemContainer
+                active={isRefundAll}
+                disabled={refundAllDisabled}
+                onClick={() => setIsRefundAll(true)}
+              >
+                {isRefundAll ? <RecordCircleFill /> : <Circle />}
+                <span>{t('REFUND_ALL', 'Refund all')}</span>
+              </RadioItemContainer>
+              <RadioItemContainer
+                active={!isRefundAll}
+                onClick={() => setIsRefundAll(false)}
+              >
+                {!isRefundAll ? <RecordCircleFill /> : <Circle />}
+                <span>{t('REFUND_ONLY_AN_AMOUNT', 'Refund only an amount')}</span>
+              </RadioItemContainer>
+              {!isRefundAll && (
+                <RefundAmountWrapper>
+                  <Input
+                    name='amount'
+                    onKeyPress={(e) => {
+                      if (!/^[0-9.]$/.test(e.key)) {
+                        e.preventDefault()
+                      }
+                    }}
+                    ref={register({
+                      required: t('VALIDATION_ERROR_FILLED', 'The _attribute_ field is required.').replace('_attribute_', t('AMOUNT', 'Amount'))
+                    })}
+                  />
+                </RefundAmountWrapper>
+              )}
+              <RefundReasonContainer>
+                <label>{t('COMMENTS', 'Comments')}</label>
+                <TextArea
+                  rows={3}
+                  name='description'
+                />
+              </RefundReasonContainer>
+              <Button
+                type='submit'
+                color='primary'
+                borderRadius='8px'
+              >
+                {t('REFUND', 'Refund')}
+              </Button>
+            </>
+          ) : (
+            <ErrorText>{t('REFUND_NOT_ALLOWED', 'The refund is not allowed.')}</ErrorText>
+          )}
+        </RefundContainer>
+      </Modal>
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState?.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState?.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/OrderBill/index.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useUtils, useConfig } from 'ordering-components-external'
-import { verifyDecimals } from '../../../../../../utils'
+import { verifyDecimals, getCurrenySymbol } from '../../../../../../utils'
+import { RefundToWallet } from './RefundToWallet'
 import { Alert, Confirm } from '../../Shared'
 import { Button } from '../../../styles'
 
@@ -13,9 +14,11 @@ export const OrderBill = (props) => {
   const {
     order,
     actionStatus,
-    handleRefundOrder
+    handleRefundPaymentsStripe,
+    handleOrderRefund
   } = props
 
+  const isGiftCardOrder = order?.products?.[0]?.type === 'gift_card'
   const [, t] = useLanguage()
   const [{ parsePrice, parseNumber }] = useUtils()
   const [{ configs }] = useConfig()
@@ -23,7 +26,7 @@ export const OrderBill = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const SPOT_DICTIONARY = {
     3: t('SPOT_NUMBER_EAT_IN', 'Table number'),
-    4: t('SPOT_NUMBER_CURBSIDE', 'Spor number'),
+    4: t('SPOT_NUMBER_CURBSIDE', 'Spot number'),
     5: t('SPOT_NUMBER_DRIVE_THRU', 'Drive thru lane')
   }
 
@@ -49,7 +52,7 @@ export const OrderBill = (props) => {
       content: t('QUESTION_REFUND_ORDER', 'Do you want to reimburse this order? This action is irreversible.'),
       handleOnAccept: () => {
         setConfirm({ ...confirm, open: false })
-        handleRefundOrder()
+        handleRefundPaymentsStripe()
       }
     })
   }
@@ -86,7 +89,7 @@ export const OrderBill = (props) => {
           <tr>
             <td>{t('SUBTOTAL', 'Subtotal')}</td>
             <td>
-              {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency })}
+              {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: getCurrenySymbol(order?.currency) })}
             </td>
           </tr>
           {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -99,20 +102,20 @@ export const OrderBill = (props) => {
               ) : (
                 <td>{t('DISCOUNT', 'Discount')}</td>
               )}
-              <td>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency })}</td>
+              <td>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: getCurrenySymbol(order?.currency) })}</td>
             </tr>
           )}
           {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 1)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer?.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
+                  - {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}
                 </td>
               </tr>
             ))
@@ -121,9 +124,9 @@ export const OrderBill = (props) => {
             <tr>
               <td>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</td>
               {order?.tax_type === 1 ? (
-                <td>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency })}</td>
+                <td>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: getCurrenySymbol(order?.currency) })}</td>
               ) : (
-                <td>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               )}
             </tr>
           )}
@@ -134,7 +137,7 @@ export const OrderBill = (props) => {
                   {t('TAX', 'Tax')}
                   <span>{`(${verifyDecimals(order?.tax, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(order?.summary?.tax ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             )
           }
@@ -145,7 +148,7 @@ export const OrderBill = (props) => {
                   {t('SERVICE_FEE', 'Service fee')}
                   <span>{`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(order?.summary?.service_fee ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             )
           }
@@ -153,10 +156,10 @@ export const OrderBill = (props) => {
             order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0).map(tax => (
               <tr key={tax?.id}>
                 <td>
-                  {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replaceAll(' ', '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   <span>{`(${verifyDecimals(tax?.rate, parseNumber)}%)`}</span>
                 </td>
-                <td>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             ))
           }
@@ -164,10 +167,10 @@ export const OrderBill = (props) => {
             order?.fees?.length > 0 && order?.fees?.filter(fee => !(fee?.fixed === 0 && fee?.percentage === 0))?.map(fee => (
               <tr key={fee.id}>
                 <td>
-                  {fee?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(fee?.name?.toUpperCase()?.replaceAll(' ', '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%)
                 </td>
-                <td>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency })}</td>
+                <td>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: getCurrenySymbol(order?.currency) })}</td>
               </tr>
             ))
           }
@@ -175,34 +178,34 @@ export const OrderBill = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 3)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer?.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
+                  - {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}
                 </td>
               </tr>
             ))
           }
-          {order?.summary?.delivery_price > 0 && (
+          {typeof order?.summary?.delivery_price === 'number' && (
             <tr>
               <td>{t('DELIVERY_FEE', 'Delivery Fee')}</td>
-              <td>{parsePrice(order?.summary?.delivery_price, { currency: order?.currency })}</td>
+              <td>{parsePrice(order?.summary?.delivery_price, { currency: getCurrenySymbol(order?.currency) })}</td>
             </tr>
           )}
           {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 2)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer?.name?.toUpperCase()?.replaceAll(' ', '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
                 </td>
                 <td>
-                  - {parsePrice(offer?.summary?.discount, { currency: order?.currency })}
+                  - {parsePrice(offer?.summary?.discount, { currency: getCurrenySymbol(order?.currency) })}
                 </td>
               </tr>
             ))
@@ -218,7 +221,7 @@ export const OrderBill = (props) => {
                     <span>{`(${verifyDecimals(order?.driver_tip, parseNumber)}%)`}</span>
                   )}
               </td>
-              <td>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</td>
+              <td>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: getCurrenySymbol(order?.currency) })}</td>
             </tr>
           )}
         </tbody>
@@ -227,7 +230,7 @@ export const OrderBill = (props) => {
         <tbody>
           <tr>
             <td>{t('TOTAL', 'Total')}</td>
-            <td>{parsePrice(order?.summary?.total || order?.total, { currencyPosition: 'left', currency: order?.currency })}</td>
+            <td>{parsePrice(order?.summary?.total || order?.total, { currency: getCurrenySymbol(order?.currency) })}</td>
           </tr>
         </tbody>
       </table>
@@ -239,33 +242,71 @@ export const OrderBill = (props) => {
             </tr>
           </thead>
           <tbody>
-            {order?.payment_events?.map((event, i) => (
+            {order?.payment_events?.filter(item => item.event === 'payment').map((event, i) => (
               <tr key={i}>
                 <td>
                   {event?.wallet_event
                     ? walletName[event?.wallet_event?.wallet?.type]?.name
-                    : event?.paymethod?.name}
+                    : event?.paymethod
+                      ? t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)
+                      : event?.data?.gateway
+                        ? t(event?.data?.gateway?.toUpperCase(), event?.data?.gateway?.replaceAll('_', ' '))
+                        : walletName[event?.data?.wallet_currency]?.name}
+                </td>
+                <td>
+                  {event?.paymethod?.gateway === 'cash' && order?.cash
+                    ? parsePrice(order?.cash, { currency: getCurrenySymbol(order?.currency) })
+                    : `-${parsePrice(event?.amount, { currency: getCurrenySymbol(order?.currency) })}`}
                 </td>
-                <td>-{parsePrice(event?.amount, { currency: order?.currency })}</td>
               </tr>
             ))}
           </tbody>
         </table>
       )}
-      {order?.delivery_option && (
-        <table className='delivery_option'>
+      {!isGiftCardOrder && (
+        <RefundToWallet
+          order={order}
+          actionStatus={actionStatus}
+          handleOrderRefund={handleOrderRefund}
+        />
+      )}
+      {order?.payment_events?.filter(item => item.event === 'refund').length > 0 && (
+        <table className='payments'>
           <thead>
             <tr>
-              <th colSpan='2'>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</th>
+              <th colSpan='2'>{t('REFUND', 'Refund')}</th>
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <td>{order?.delivery_option?.name}</td>
-            </tr>
+            {order?.payment_events?.filter(item => item.event === 'refund').map((event, i) => (
+              <tr key={i}>
+                <td>
+                  {event?.wallet_event
+                    ? walletName[event?.wallet_event?.wallet?.type]?.name
+                    : event?.paymethod
+                      ? t(event?.paymethod?.gateway?.toUpperCase(), event?.paymethod?.name)
+                      : event?.data?.gateway
+                        ? t(event?.data?.gateway?.toUpperCase(), event?.data?.gateway?.replaceAll('_', ' '))
+                        : walletName[event?.data?.wallet_currency]?.name}
+                </td>
+                <td>{parsePrice(event?.amount, { currency: getCurrenySymbol(order?.currency) })}</td>
+              </tr>
+            ))}
           </tbody>
         </table>
       )}
+      <table className='delivery_option'>
+        <thead>
+          <tr>
+            <th colSpan='2'>{t('DELIVERY_PREFERENCE', 'Delivery Preference')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{order?.delivery_option ? t(order?.delivery_option?.name?.toUpperCase()?.replaceAll(' ', '_'), order?.delivery_option?.name) : t('EITHER_WAY', 'Either way')}</td>
+          </tr>
+        </tbody>
+      </table>
       {order?.comment && (
         <table className='comments'>
           <tbody>
@@ -296,7 +337,7 @@ export const OrderBill = (props) => {
           <tbody>
             <tr>
               <td>{t('ORDER_VEHICLE_TYPE', 'Type')}</td>
-              <td>{order?.vehicle?.type}</td>
+              <td>{t(order?.vehicle?.type?.toUpperCase(), order?.vehicle?.type)}</td>
             </tr>
             <tr>
               <td>{t('ORDER_VEHICLE_MODEL', 'Model')}</td>
@@ -314,7 +355,7 @@ export const OrderBill = (props) => {
         </table>
       )}
 
-      {!order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway) && (
+      {!isGiftCardOrder && !order?.refund_data && stripePaymethods.includes(order?.paymethod?.gateway) && (
         <RefundButtonWrapper>
           <Button
             color='primary'

package/src/themes/callcenterOriginal/src/components/Orders/OrderBill/styles.js

@@ -65,3 +65,107 @@ export const RefundButtonWrapper = styled.div`
     height: 44px;
   }
 `
+
+export const RefundWalletButtonWrapper = styled.div`
+  width: 100%;
+  padding: 20px 0;
+
+  > button {
+    height: 44px;
+  }
+`
+export const RefundContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+
+  h2 {
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    margin: 0 0 30px 0;
+  }
+
+  p {
+    margin: 4px 0;
+    font-size: 14px;
+  }
+
+  button {
+    height: 44px;
+  }
+`
+export const RadioItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 15px 0;
+  cursor: pointer;
+
+  ${({ active }) => active && css`
+    svg {
+      color: ${props => props.theme.colors.primary};
+    }
+  `}
+
+  ${({ disabled }) => disabled && css`
+    cursor: not-allowed;
+    pointer-events: none;
+    color: ${props => props.theme.colors.disabled};
+  `}
+
+  > span {
+    font-size: 14px;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 13px;
+    ` : css`
+      margin-left: 13px;
+    `}
+  }
+`
+export const RefundAmountWrapper = styled.div`
+  ${props => props.theme?.rtl ? css`
+    margin-right: 28px;
+  ` : css`
+    margin-left: 28px;
+  `}
+`
+
+export const RefundReasonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 40px 0;
+
+  label {
+    font-size: 14px;
+    margin-bottom: 7px;
+  }
+`
+export const Option = styled.div`
+  color: ${props => props.theme.colors.secundaryContrast};
+  font-size: 14px;
+  white-space: nowrap;
+`
+export const SelectWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+  
+  > span {
+    font-size: 14px;
+    margin-bottom: 7px;
+  }
+  .select {
+    width: 100%;
+    background: ${props => props.theme.colors.secundary};
+    border: none;
+
+    > div:first-child {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+  }
+`
+export const ErrorText = styled.div`
+  text-align: center;
+  color: ${props => props.theme.colors.danger};
+  font-size: 16px;
+`