ordering-ui-admin-external 1.15.1 → 1.16.0

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

@@ -0,0 +1,178 @@
+import React from 'react'
+import { useLanguage, GiftCardsList as GiftCardsListController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import { IconButton } from '../../../styles'
+import { Pagination, SearchBar } from '../../Shared'
+
+import {
+  Container,
+  HeaderContainer,
+  HeaderTitle,
+  TabsWrapper,
+  Tab,
+  GiftCardsTableWrapper,
+  GiftCardRow,
+  UserInfoContainer,
+  PaginationWarpper,
+  ActionsWrapper
+} from './styles'
+
+const GiftCardsListingUI = (props) => {
+  const {
+    giftCards,
+    paginationProps,
+    activeStatus,
+    setActiveStatus,
+    getGiftCards,
+    searchValue,
+    onSearch
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  const handleChangePage = (page) => {
+    getGiftCards(page, paginationProps.pageSize)
+  }
+
+  const handleChangePageSize = (pageSize) => {
+    const expectedPage = Math.ceil(paginationProps.from / pageSize)
+    getGiftCards(expectedPage, pageSize)
+  }
+
+  return (
+    <Container>
+      <HeaderContainer>
+        <HeaderTitle>
+          {isCollapse && (
+            <IconButton
+              color='black'
+              onClick={() => handleMenuCollapse(false)}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <h1>{t('GIFT_CARD_MANAGER', 'Gift card manager')}</h1>
+        </HeaderTitle>
+        <ActionsWrapper>
+          <SearchBar
+            isCustomLayout
+            lazyLoad
+            onSearch={onSearch}
+            search={searchValue}
+            placeholder={t('SEARCH', 'Search')}
+          />
+        </ActionsWrapper>
+      </HeaderContainer>
+      <TabsWrapper>
+        <Tab
+          active={activeStatus === 'pending'}
+          onClick={() => setActiveStatus('pending')}
+        >
+          {t('ORDER_PENDING', 'Pending')}
+        </Tab>
+        <Tab
+          active={activeStatus === 'activated'}
+          onClick={() => setActiveStatus('activated')}
+        >
+          {t('REDEEMED', 'Redeemed')}
+        </Tab>
+      </TabsWrapper>
+      <GiftCardsTableWrapper>
+        <table>
+          <thead>
+            <tr>
+              <th>{t('ID', 'ID')}</th>
+              <th>{t('PURCHASED_BY', 'Purchased by')}</th>
+              <th>{t('REDEEMED_BY', 'Redeemed by')}</th>
+              <th>{t('PURCHASED_DATE', 'Purchased date')}</th>
+              <th>{t('REDEEMED_DATE', 'Redeemed date')}</th>
+            </tr>
+          </thead>
+          {giftCards.loading ? (
+            [...Array(10).keys()].map(i => (
+              <GiftCardRow key={i}>
+                <tr>
+                  <td><Skeleton width={20} /></td>
+                  <td>
+                    <UserInfoContainer>
+                      <Skeleton width={38} height={38} />
+                      <div>
+                        <p className='name'><Skeleton width={100} /></p>
+                        <p className='phone'><Skeleton width={80} /></p>
+                      </div>
+                    </UserInfoContainer>
+                  </td>
+                  <td>
+                    <UserInfoContainer>
+                      <Skeleton width={38} height={38} />
+                      <div>
+                        <p className='name'><Skeleton width={100} /></p>
+                        <p className='phone'><Skeleton width={80} /></p>
+                      </div>
+                    </UserInfoContainer>
+                  </td>
+                  <td><Skeleton width={100} /></td>
+                  <td><Skeleton width={100} /></td>
+                </tr>
+              </GiftCardRow>
+            ))
+          ) : (
+            giftCards.list.map(card => (
+              <GiftCardRow key={card.id}>
+                <tr>
+                  <td>{card.id}</td>
+                  <td>
+                    <UserInfoContainer>
+                      <img src={card.author?.photo} alt='' />
+                      <div>
+                        <p className='name'>{card.author?.name} {card.author?.lastname}</p>
+                        <p className='phone'>{card.author?.cellphone}</p>
+                      </div>
+                    </UserInfoContainer>
+                  </td>
+                  <td>
+                    {card.activater && (
+                      <UserInfoContainer>
+                        <img src={card.activater?.photo} alt='' />
+                        <div>
+                          <p className='name'>{card.activater?.name} {card.activater?.lastname}</p>
+                          <p className='phone'>{card.activater?.cellphone}</p>
+                        </div>
+                      </UserInfoContainer>
+                    )}
+                  </td>
+                  <td>{card.created_at}</td>
+                  <td>{card.activated_at}</td>
+                </tr>
+              </GiftCardRow>
+            ))
+          )}
+        </table>
+      </GiftCardsTableWrapper>
+      <PaginationWarpper>
+        <Pagination
+          currentPage={paginationProps.currentPage}
+          totalPages={paginationProps.totalPages}
+          handleChangePage={handleChangePage}
+          defaultPageSize={paginationProps.pageSize}
+          handleChangePageSize={handleChangePageSize}
+        />
+      </PaginationWarpper>
+    </Container>
+  )
+}
+
+export const GiftCardsListing = (props) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: GiftCardsListingUI,
+    isSearchById: true,
+    isSearchByAuthorName: true,
+    isSearchByAuthorEmail: true,
+    isSearchByAuthorPhone: true
+  }
+  return <GiftCardsListController {...giftCardsProps} />
+}

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

@@ -0,0 +1,116 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  overflow: hidden;
+`
+export const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`
+export const HeaderTitle = styled.div`
+  display: flex;
+  align-items: center;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+`
+export const ActionsWrapper = styled.div`
+  margin-top: 15px;
+  @media (min-width: 768px) {
+    margin-top: 0;
+  }
+`
+export const TabsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  margin: 20px 0 10px 0;
+`
+export const Tab = styled.div`
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  white-space: nowrap;
+  font-size: 14px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    border-bottom: 2px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.lightGray};
+  `}
+`
+export const GiftCardsTableWrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    td, th {
+      padding: 10px 0;
+      font-size: 14px;
+    }
+    thead {
+      border-bottom: 1px solid ${props => props.theme.colors.disabled};
+    }
+  }
+`
+export const GiftCardRow = styled.tbody`
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+export const UserInfoContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 38px;
+    height: 38px;
+    border-radius: 8px;
+    object-fit: cover;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  div {
+    ${props => props.theme?.rtl ? css`
+      margin-right: 9px;
+    ` : css`
+      margin-left: 9px;
+    `}
+    p.name {
+      margin: 0;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 21px;
+    }
+    p.phone {
+      margin: 0;
+      font-size: 10px;
+      line-height: 15px;
+      color: ${props => props.theme.colors.lightGray};
+    }
+  }
+`
+export const PaginationWarpper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin: 20px 0;
+`

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

@@ -246,7 +246,11 @@ export const OrderBill = (props) => {
                     ? walletName[event?.wallet_event?.wallet?.type]?.name
                     : t(event?.paymethod?.name?.toUpperCase()?.replaceAll(' ', '_'), event?.paymethod?.name)}
                 </td>
-                <td>-{parsePrice(event?.amount, { currency: order?.currency })}</td>
+                <td>
+                  {event?.paymethod?.gateway === 'cash' && order?.cash
+                    ? parsePrice(order?.cash, { currency: order?.currency })
+                    : `-${parsePrice(event?.amount, { currency: order?.currency })}`}
+                </td>
               </tr>
             ))}
           </tbody>

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

@@ -76,30 +76,30 @@ const OrderDetailsUI = (props) => {
   const rejectResonStatuses = [6, 9, 10, 11, 12, 14]
   const getOrderStatus = (status) => {
     const orderStatus = [
-      { key: 0, value: 'Pending Order', slug: 'PENDING_ORDER', percentage: 25 },
+      { key: 0, value: 'Pending Order', slug: 'PENDING_ORDER', percentage: 10 },
       { key: 1, value: 'Completed by admin', slug: 'COMPLETED_BY_ADMIN', percentage: 100 },
       { key: 2, value: 'Reject by admin', slug: 'REJECT_BY_ADMIN', percentage: 0 },
       { key: 3, value: 'Driver arrived by business', slug: 'DRIVER_IN_BUSINESS', percentage: 60 },
-      { key: 4, value: 'Preparation Completed', slug: 'PREPARATION_COMPLETED', percentage: 70 },
+      { key: 4, value: 'Preparation Completed', slug: 'PREPARATION_COMPLETED', percentage: 20 },
       { key: 5, value: 'Reject by business', slug: 'REJECT_BY_BUSINESS', percentage: 0 },
       { key: 6, value: 'Reject by driver', slug: 'REJECT_BY_DRIVER', percentage: 0 },
-      { key: 7, value: 'Accepted by business', slug: 'ACCEPTED_BY_BUSINESS', percentage: 35 },
-      { key: 8, value: 'Accepted by driver', slug: 'ACCEPTED_BY_DRIVER', percentage: 45 },
-      { key: 9, value: 'Pick up completed by driver', slug: 'PICK_UP_COMPLETED_BY_DRIVER', percentage: 80 },
+      { key: 7, value: 'Accepted by business', slug: 'ACCEPTED_BY_BUSINESS', percentage: 15 },
+      { key: 8, value: 'Accepted by driver', slug: 'ACCEPTED_BY_DRIVER', percentage: 40 },
+      { key: 9, value: 'Pick up completed by driver', slug: 'PICK_UP_COMPLETED_BY_DRIVER', percentage: 70 },
       { key: 10, value: 'Pick up Failed by driver', slug: 'PICK_UP_FAILED_BY_DRIVER', percentage: 0 },
       { key: 11, value: 'Delivery completed by driver', slug: 'DELIVERY_COMPLETED_BY_DRIVER', percentage: 100 },
       { key: 12, value: 'Delivery Failed by driver', slug: 'DELIVERY_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 13, value: 'Preorder', slug: 'PREORDER', percentage: 25 },
-      { key: 14, value: 'Order not ready', slug: 'ORDER_NOT_READY', percentage: 65 },
+      { key: 13, value: 'Preorder', slug: 'PREORDER', percentage: 0 },
+      { key: 14, value: 'Order not ready', slug: 'ORDER_NOT_READY', percentage: 15 },
       { key: 15, value: 'Pickup completed by customer', slug: 'PICKUP_COMPLETED_BY_CUSTOMER', percentage: 100 },
       { key: 16, value: 'Canceled by customer', slug: 'CANCELED_BY_CUSTOMER', percentage: 0 },
       { key: 17, value: 'Not picked by customer', slug: 'NOT_PICKED_BY_CUSTOMER', percentage: 0 },
       { key: 18, value: 'Driver almost arrived to business', slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 50 },
       { key: 19, value: 'Driver almost arrived to customer', slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', percentage: 90 },
-      { key: 20, value: 'Customer almost arrived to business', slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 50 },
-      { key: 21, value: 'Customer arrived to business', slug: 'CUSTOMER_ARRIVED_TO_BUSINESS', percentage: 60 },
-      { key: 22, value: 'Looking for driver', slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35 },
-      { key: 23, value: 'Driver on way', slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
+      { key: 20, value: 'Customer almost arrived to business', slug: 'CUSTOMER_ALMOST_ARRIVED_TO_BUSINESS', percentage: 90 },
+      { key: 21, value: 'Customer arrived to business', slug: 'CUSTOMER_ARRIVED_TO_BUSINESS', percentage: 90 },
+      { key: 22, value: 'Looking for driver', slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 30 },
+      { key: 23, value: 'Driver on way', slug: 'ORDER_DRIVER_ON_WAY', percentage: 80 }
     ]
 
     const objectStatus = orderStatus.find((o) => o.key === status)

package/src/components/Orders/index.js

@@ -1,6 +1,7 @@
 import { Appointments } from './Appointments'
 import { DeliveriesManager } from './DeliveriesManager'
 import { DriversManager } from './DriversManager'
+import { GiftCardsListing } from './GiftCardsListing'
 
 import { Messages } from './Messages'
 import { OrdersContentHeader } from './OrdersContentHeader'
@@ -51,6 +52,7 @@ export {
   Appointments,
   DeliveriesManager,
   DriversManager,
+  GiftCardsListing,
   Messages,
   OrdersContentHeader,
   OrdersManager,

package/src/components/SidebarMenu/index.js

@@ -179,6 +179,12 @@ const SidebarMenuUI = (props) => {
       title: t('CUSTOM_PROJECT', 'Custom Project'),
       pageName: 'custom_project',
       url: '/my-products/custom-project'
+    },
+    {
+      id: 9,
+      title: t('ORDERING_WIDGETS', 'Ordering Widgets'),
+      pageName: 'ordering_widgets',
+      url: '/my-products/ordering-widgets'
     }
   ]
 

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

@@ -44,7 +44,7 @@ export const PaymentOption = (props) => {
   const [paymentTabs, setPaymentTabs] = useState(sitesState?.sites?.length > 0 ? 0 : 1)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [localState, setLocalState] = useState({ allowed_order_types: businessPaymethod?.allowed_order_types, sites: businessPaymethod?.sites })
-  const filteredOptions = localState?.sites ?? businessPaymethod?.sites.filter(a => sitesState?.sites?.find(b => a.id === b.id))
+  const filteredOptions = localState?.sites ?? businessPaymethod?.sites?.filter(a => sitesState?.sites?.find(b => a.id === b.id))
   const [all, setAll] = useState(!filteredOptions?.length)
 
   const setPaymethodInfo = (values) => {

package/src/components/Users/UsersDeleteButton/index.js

@@ -16,7 +16,8 @@ const UsersDeleteButtonUI = (props) => {
     getCheckPassword,
     selectedUsers,
     deleteUsersActionState,
-    handleDeleteSeveralUsers
+    handleDeleteSeveralUsers,
+    disabled
   } = props
   const [, t] = useLanguage()
 
@@ -60,7 +61,7 @@ const UsersDeleteButtonUI = (props) => {
       <Button
         borderRadius='5px'
         color='secundary'
-        disabled={!selectedUsers.length || deleteUsersActionState.loading}
+        disabled={!selectedUsers.length || deleteUsersActionState.loading || disabled}
         onClick={() => handleModalOpen()}
       >
         {t('DELETE', 'Delete')}

package/src/components/Users/UsersExportCSV/index.js

@@ -10,7 +10,8 @@ import {
 const UsersExportCSVUI = (props) => {
   const {
     actionStatus,
-    getCSV
+    getCSV,
+    disabled
   } = props
   const [, t] = useLanguage()
   const [popoverOpen, setPopoverOpen] = useState(false)
@@ -54,7 +55,7 @@ const UsersExportCSVUI = (props) => {
         <Button
           borderRadius='5px'
           color='secundary'
-          disabled={actionStatus.loading}
+          disabled={actionStatus.loading || disabled}
           onClick={() => handleCSV()}
         >
           {t('CSV', 'CSV')}

package/src/index.js

@@ -12,6 +12,7 @@ import {
   Appointments,
   DeliveriesManager,
   DriversManager,
+  GiftCardsListing,
   Messages,
   OrdersContentHeader,
   OrdersManager,
@@ -354,7 +355,8 @@ import {
   PosApp,
   CallCenterApp,
   KioskApp,
-  CustomProject
+  CustomProject,
+  OrderingWidgets
 } from './components/MyProducts'
 import { OpenCartListing, RecoveryActionListing } from './components/CartRecovery'
 import { FreeProductsList, PurchasedProductsList } from './components/Downloads'
@@ -412,6 +414,7 @@ export {
   Appointments,
   DeliveriesManager,
   DriversManager,
+  GiftCardsListing,
   ForgotPasswordForm,
   MessagesListing,
   ChatContactList,
@@ -767,6 +770,7 @@ export {
   CallCenterApp,
   KioskApp,
   CustomProject,
+  OrderingWidgets,
 
   Layout,
   SidebarMenu,

package/template/app.js

@@ -47,7 +47,7 @@ import { Support } from './pages/Support'
 import { AdvancedReports } from './pages/AdvancedReports'
 import { EnterprisePromotionList } from './pages/EnterprisePromotionList'
 import { Appointments } from './pages/Appointments'
-// import { GiftCardsList } from './pages/GiftCardsList'
+import { GiftCardsList } from './pages/GiftCardsList'
 import { ResetPassword } from './pages/ResetPassword'
 import { OrderingWebsite } from './pages/OrderingWebsite'
 import { CustomerApp } from './pages/CustomerApp'
@@ -73,6 +73,7 @@ import { Profile } from './pages/Profile'
 import settings from './config.json'
 import { BusinessAdd } from './pages/BusinessAdd'
 import { CustomProject } from './pages/CustomProject'
+import { OrderingWidgets } from './pages/OrderingWidgets'
 
 export const App = () => {
   const [{ auth, loading, user }] = useSession()
@@ -219,6 +220,9 @@ export const App = () => {
                     <ProtectedRoute path='/appointments' allowedLevels={[0, 2]}>
                       <Appointments />
                     </ProtectedRoute>
+                    <ProtectedRoute path='/gift-cards' allowedLevels={[0]}>
+                      <GiftCardsList />
+                    </ProtectedRoute>
 
                     <ProtectedRoute path='/messages' allowedLevels={[0, 2]}>
                       <MessagesList />
@@ -321,6 +325,9 @@ export const App = () => {
                     <ProtectedRoute path='/my-products/custom-project' allowedLevels={[0]}>
                       <CustomProject />
                     </ProtectedRoute>
+                    <ProtectedRoute path='/my-products/ordering-widgets' allowedLevels={[0]}>
+                      <OrderingWidgets />
+                    </ProtectedRoute>
 
                     <ProtectedRoute path='/settings/basic' allowedLevels={[0]}>
                       <BasicSettings />

package/template/components/ListenPageChanges/index.js

@@ -15,6 +15,7 @@ export const ListenPageChanges = ({ children }) => {
     deliveries: '/deliveries',
     drivers: '/drivers',
     appointments: '/appointments',
+    giftCards: '/gift-cards',
     messages: '/messages',
     customers: '/users/customers',
     managers: '/users/managers',
@@ -46,6 +47,7 @@ export const ListenPageChanges = ({ children }) => {
     call_center_app: '/my-products/call-center-app',
     kiosk_app: '/my-products/kiosk-app',
     custom_project: '/my-products/custom-project',
+    ordering_widgets: '/my-products/ordering-widgets',
     delivery_drivers: '/delivery/drivers-list',
     drivers_managers: '/delivery/drivers-managers',
     drivers_companies: '/delivery/drivers-companies',

package/template/helmetdata.json

@@ -293,6 +293,13 @@
     "robots": "index, follow",
     "canonicalUrl": ""
   },
+  "ordering_widgets": {
+    "title": "Ordering Widgets",
+    "description": "a dummy description about this page",
+    "keywords": "test, dummy, data",
+    "robots": "index, follow",
+    "canonicalUrl": ""
+  },
   "support": {
     "title": "Support",
     "description": "a dummy description about this page",

package/template/pages/GiftCardsList/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { GiftCardsListing as GiftCardsListingController } from '../../../src/components/Orders'
+
+export const GiftCardsList = (props) => {
+  return (
+    <>
+      <HelmetTags page='gift_cards' />
+      <GiftCardsListingController {...props} />
+    </>
+  )
+}

package/template/pages/OrderingWidgets/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { HelmetTags } from '../../components/HelmetTags'
+import { OrderingWidgets as OrderingWidgetsController } from '../../../src/components/MyProducts'
+
+export const OrderingWidgets = (props) => {
+  return (
+    <>
+      <HelmetTags page='ordering_widgets' />
+      <OrderingWidgetsController {...props} />
+    </>
+  )
+}