ordering-ui-admin-external 1.15.2 → 1.16.1

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

@@ -37,7 +37,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PaymentOption = function PaymentOption(props) {
-  var _sitesState$sites, _localState$sites, _businessPaymethod$pa2, _sitesState$sites4, _sitesState$sites5;
+  var _sitesState$sites, _localState$sites, _businessPaymethod$si, _businessPaymethod$pa2, _sitesState$sites4, _sitesState$sites5;
   var open = props.open,
     onClose = props.onClose,
     orderTypes = props.orderTypes,
@@ -80,7 +80,7 @@ var PaymentOption = function PaymentOption(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     localState = _useState8[0],
     setLocalState = _useState8[1];
-  var filteredOptions = (_localState$sites = localState === null || localState === void 0 ? void 0 : localState.sites) !== null && _localState$sites !== void 0 ? _localState$sites : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : businessPaymethod.sites.filter(function (a) {
+  var filteredOptions = (_localState$sites = localState === null || localState === void 0 ? void 0 : localState.sites) !== null && _localState$sites !== void 0 ? _localState$sites : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : (_businessPaymethod$si = businessPaymethod.sites) === null || _businessPaymethod$si === void 0 ? void 0 : _businessPaymethod$si.filter(function (a) {
     var _sitesState$sites2;
     return sitesState === null || sitesState === void 0 ? void 0 : (_sitesState$sites2 = sitesState.sites) === null || _sitesState$sites2 === void 0 ? void 0 : _sitesState$sites2.find(function (b) {
       return a.id === b.id;
@@ -212,7 +212,7 @@ var PaymentOption = function PaymentOption(props) {
   }, all ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
     className: "fill"
   }) : /*#__PURE__*/_react.default.createElement(_RiCheckboxBlankLine.default, null), /*#__PURE__*/_react.default.createElement(_styles3.TabOptionName, null, t('ALL', 'All'))), !all && (sitesState === null || sitesState === void 0 ? void 0 : sitesState.sites.map(function (site) {
-    var _ref2, _localState$sites2, _businessPaymethod$si;
+    var _ref2, _localState$sites2, _businessPaymethod$si2;
     return /*#__PURE__*/_react.default.createElement(_styles3.TabOption, {
       key: site.id,
       onClick: function onClick() {
@@ -221,7 +221,7 @@ var PaymentOption = function PaymentOption(props) {
           value: site.id
         });
       }
-    }, (_ref2 = (_localState$sites2 = localState === null || localState === void 0 ? void 0 : localState.sites) !== null && _localState$sites2 !== void 0 ? _localState$sites2 : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : (_businessPaymethod$si = businessPaymethod.sites) === null || _businessPaymethod$si === void 0 ? void 0 : _businessPaymethod$si.map(function (s) {
+    }, (_ref2 = (_localState$sites2 = localState === null || localState === void 0 ? void 0 : localState.sites) !== null && _localState$sites2 !== void 0 ? _localState$sites2 : businessPaymethod === null || businessPaymethod === void 0 ? void 0 : (_businessPaymethod$si2 = businessPaymethod.sites) === null || _businessPaymethod$si2 === void 0 ? void 0 : _businessPaymethod$si2.map(function (s) {
       return s.id;
     })) !== null && _ref2 !== void 0 && _ref2.includes(site.id) ? /*#__PURE__*/_react.default.createElement(_RiCheckboxFill.default, {
       className: "fill"

package/_modules/index.js

@@ -1119,6 +1119,12 @@ Object.defineProperty(exports, "FreeProductsList", {
     return _Downloads.FreeProductsList;
   }
 });
+Object.defineProperty(exports, "GiftCardsListing", {
+  enumerable: true,
+  get: function get() {
+    return _Orders.GiftCardsListing;
+  }
+});
 Object.defineProperty(exports, "GoogleGpsButton", {
   enumerable: true,
   get: function get() {
@@ -1479,6 +1485,12 @@ Object.defineProperty(exports, "OrderingWebsite", {
     return _MyProducts.OrderingWebsite;
   }
 });
+Object.defineProperty(exports, "OrderingWidgets", {
+  enumerable: true,
+  get: function get() {
+    return _MyProducts.OrderingWidgets;
+  }
+});
 Object.defineProperty(exports, "OrdersCards", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.15.2",
+  "version": "1.16.1",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.15.1",
+    "ordering-components-admin-external": "1.16.0",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Loyalty/RewardsPrograms/index.js

@@ -34,7 +34,7 @@ export const RewardsPrograms = () => {
   const walletList = [
     { key: 'credit_point', name: t('POINTS_WALLET', 'Points wallet'), description: t('POINTS_WALLET_DESCRIPTION', 'Points wallet general and per business setup.'), icon: <Cash /> },
     { key: 'levels', name: t('LEVELS', 'Levels'), description: t('LEVELS_DESCRIPTION', 'Setup different loyalty levels for your users.'), icon: <BarChartSteps /> },
-    { key: 'gift_card', name: t('GIFT_CARD', 'Gift Card'), description: t('GIFT_CARD_DESCRIPTION', 'Setup different gift cards for your customers.'), icon: <Gift /> },
+    // { key: 'gift_card', name: t('GIFT_CARD', 'Gift Card'), description: t('GIFT_CARD_DESCRIPTION', 'Setup different gift cards for your customers.'), icon: <Gift /> },
     { key: 'cashback', name: t('CASH_WALLET', 'Cash wallet'), description: t('CASH_WALLET_DESCRIPTION', 'Cash wallet general and per business setup.'), icon: <Cash /> }
   ]
 

package/src/components/MyProducts/OrderingWidgets/index.js

@@ -0,0 +1,118 @@
+import React from 'react'
+import { useLanguage, useApi } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { IconButton, Input, TextArea } from '../../../styles'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import {
+  Container,
+  HeaderTitleContainer,
+  Content,
+  PopupContainer,
+  FormGroup,
+  InlineContainer
+} from './styles'
+
+export const OrderingWidgets = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [ordering] = useApi()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  const url = `https://${ordering.project}.tryordering.com`
+  const color = theme.colors.primary
+  const widgetPopup = '<script type="text/javascript">window.onload=function(){function e(e,t){return!0===e||!1===e?e:t}function t(){return!!(navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i))}"undefined"==typeof orderingSettings&&(orderingSettings={});var i=orderingSettings,o=e(i.openOnMobile,!1),n=e(i.openOnDesktop,!1),s=!1,l=document.createElement("div");l.id="ordering_bot",l.style.height=0,l.style.width=0,l.style.position="fixed",l.style.right="20%",l.style.left="20%",l.style.top="7%",l.style.bottom="7%",l.style.borderRadius="5px",l.style.overflow="hidden",l.style.zIndex=99999,l.style.maxheight=window.innerHeight+"px",l.style["-webkit-transition"]="height 0.5s, width 0.5s",l.style["-moz-transition"]="height 0.5s, width 0.5s",l.style["-ms-transition"]="height 0.5s, width 0.5s",l.style["-o-transition"]="height 0.5s, width 0.5s",l.style.transition="height 0.5s, width 0.5s",l.style["-webkit-overflow-scrolling"]="touch",l.style["overflow-y"]="scroll",l.style.boxShadow="0 0 20px 0 #999";var r={insideIframe:!1};document.addEventListener("scroll",function(e){r.insideIframe&&(e.preventDefault(),window.scrollTo(0,0))});var d=document.createElement("div");d.style.height="40px",d.style.background="#ccc",d.style.width="100%",d.style.position="absolute";var a=document.createElement("div");a.style.height="40px",a.style.width="40px",a.style.float="right",a.style.fontSize="28px",a.style.lineHeight="25px",a.style.padding="5px",a.style.textAlign="center",a.style.boxSizing="border-box",a.style.color="#666",a.style.borderLeft="1px solid #bbb",a.style.cursor="pointer",a.innerHTML="&times;",d.appendChild(a);var h=document.createElement("iframe");function y(){s?(l.style.height="auto",l.style.width="auto",window.innerWidth<=480?(l.style.right=0,l.style.left=0,l.style.top=0,l.style.bottom=0,l.style.borderRadius=0):(window.innerWidth>480&&window.innerWidth<600?(l.style.left="10%",l.style.right="10%"):(l.style.left="20%",l.style.right="20%"),l.style.top="7%",l.style.bottom="7%",l.style.borderRadius="5px")):(l.style.height="0px",l.style.width="0px")}h.id="ordering_iframe",h.src="' + url + '",h.style.border=0,h.style.height="100%",h.style.width="100%",h.style.maxWidth="none",h.style.paddingTop="40px",h.style.boxSizing="border-box",h.style["-webkit-overflow-scrolling"]="touch",l.appendChild(d),l.appendChild(h),document.getElementsByTagName("body")[0].appendChild(l),window.toggleOrderingWidget=function(){(s=!s)?(t()&&(r.insideIframe=!0,document.body.style.overflow="hidden",document.body.style.height=window.innerHeight-150+"px"),r.insideIframe=!0,r.scrollX=window.scrollX,r.scrollY=window.scrollY,t()||(document.body.style.overflow="hidden")):(t()&&(r.insideIframe=!1,document.body.style.overflow="auto",document.body.style.height="auto"),r.insideIframe=!1,t()||(document.body.style.overflow="auto")),y()},y(),window.onresize=y,(t()&&o&&!(navigator.userAgent.match(/iPad/i)||(navigator.userAgent.match(/iPhone/i)||void 0))||!t()&&n)&&toggleOrderingWidget(),a.addEventListener("click",toggleOrderingWidget)};</script>'
+  const widgetBot = '<script type="text/javascript">window.onload=function(){function e(e,t){return e===!0||e===!1||void 0!=e||null!=e?e:t}function t(){return navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i)?!0:!1}function n(){return navigator.userAgent.match(/iPad/i)?"iPad":navigator.userAgent.match(/iPhone/i)?"iPhone":void 0}function i(){h=!h,h?(t()&&(w.insideIframe=!0,document.body.style.overflow="hidden",document.body.style.height=window.innerHeight-150+"px"),g.innerHTML=p.outerHTML):(t()&&(w.insideIframe=!1,document.body.style.overflow="auto",document.body.style.height="auto"),g.innerHTML=c.outerHTML),o(m)}function o(e){e.style.height=s(),e.style.width=r(),window.innerWidth<=480&&(e.style.top=0,e.style.left=0,e.style.right=0,e.style.bottom=0)}function s(){if(h){if(window.innerWidth<=480)return"100%";var e=window.innerHeight-70-10-20;return (e>570&&y.type=="chat")?"570px":e+"px"}return"0px"}function r(){return h?window.innerWidth<=480?"100%":"chat"==y.type?"370px":window.innerWidth-40+"px":"0px"}function l(){console.log("onresize"),window.innerWidth<=480?(m.style.position="fixed",m.style.bottom=0,m.style.right=0,m.style.borderRadius=0,f.style.display="block"):(m.style.position="fixed",m.style.bottom="80px",m.style.right="20px",m.style.borderRadius="10px",f.style.display="none"),m.style.height=s(),m.style.width=r()}var d="' + url + '";"undefined"==typeof orderingSettings&&(orderingSettings={});var a=orderingSettings,y={openOnMobile:e(a.openOnMobile,!1),openOnDesktop:e(a.openOnDesktop,!1),type:e(a.type,"chat")},h=!1,g=document.createElement("div"),c=document.createElement("img");c.src="https://orderingweb.ordering.co/templates/web/img/icon.png",c.style.width="30px",c.style.marginTop="9px",c.style.maxWidth="none";var p=document.createElement("div");p.innerHTML="&times;",p.style.display="block",p.style.color="#fff",p.style.font="Arial",p.style.fontSize="30px",p.style.margin="0 5px",p.style.borderRadius="50px",p.style.width="40px",p.style.height="40px",p.style.lineHeight="47px",p.style.fontWeight="400",g.style.position="fixed",g.style.bottom="20px",g.style.right="20px",g.style.width="50px",g.style.height="50px",g.style.background="' + color + '",g.style.borderRadius="50px",g.style.textAlign="center",g.style.cursor="pointer",g.style.outline="none",g.style.border=0,g.style.zIndex=99999,g.appendChild(c);var m=document.createElement("div");m.id="ordering_bot",m.style.height=0,m.style.width=0,m.style.position="fixed",m.style.bottom="80px",m.style.right="20px",m.style.borderRadius="10px",m.style.overflow="hidden",m.style.zIndex=99999,m.style.maxheight=window.innerHeight+"px",m.style["-webkit-transition"]="height 0.5s, width 0.5s",m.style["-moz-transition"]="height 0.5s, width 0.5s",m.style["-ms-transition"]="height 0.5s, width 0.5s",m.style["-o-transition"]="height 0.5s, width 0.5s",m.style.transition="height 0.5s, width 0.5s";var u=document.createElement("iframe");u.id="ordering_bot_iframe",u.src=d,u.setAttribute("allow", "geolocation"),u.style.border=0,u.style.height="125%",u.style.width="125%",u.style.maxWidth="none",u.style["-ms-zoom"]="0.8",u.style["-moz-transform"]="scale(0.8)",u.style["-moz-transform-origin"]="0 0",u.style["-o-transform"]="scale(0.8)",u.style["-o-transform-origin"]="0 0",u.style["-webkit-transform"]="scale(0.8)",u.style["-webkit-transform-origin"]="0 0";var w={insideIframe:!1};m.addEventListener("mouseenter",function(){w.insideIframe=!0,w.scrollX=window.scrollX,w.scrollY=window.scrollY,t()||(document.body.style.overflow="hidden")}),m.addEventListener("mouseleave",function(){w.insideIframe=!1,t()||(document.body.style.overflow="auto")}),document.addEventListener("scroll",function(e){w.insideIframe&&(e.preventDefault(),window.scrollTo(0,0))});var f=document.createElement("div");f.style.position="absolute",f.style.width="35px",f.style.height="35px",f.style.bottom="45px",f.style.left="50%",f.style.lineHeight="36px",f.style.background="transparent",f.style.borderColor="transparent";var x=document.createElement("div");x.innerHTML="&times;",x.style.position="relative",x.style.left="-50%",x.style.zIndex="999",x.style.width="40px",x.style.height="40px",x.style.background="rgba(0,0,0,0.2)",x.style.textAlign="center",x.style.border=0,x.style.borderRadius="35px",x.style.color="#fff",x.style.fontSize="30px",x.style.outline="none",x.style.cursor="pointer",f.appendChild(x),m.appendChild(f),m.appendChild(u),document.getElementsByTagName("body")[0].appendChild(g),document.getElementsByTagName("body")[0].appendChild(m),window.toggleOrderingWidget=i,g.onclick=i,f.onclick=i,l(),window.onresize=l,(t()&&y.openOnMobile&&!n()||!t()&&y.openOnDesktop)&&i(),setInterval(function(){n()&&window.innerHeight<m.clientHeight&&(u.style.height=.7*window.innerHeight+"px"),n()&&window.innerHeight==m.clientHeight&&(m.style.bottom=0,u.style.height="125%")},2e3)};</script>'
+  const widgetInline = '<script type="text/javascript">var orderingInlineSettings = {baseUrl: "/"};</script><script type="text/javascript">window.onload=function(){var i={baseUrl:orderingInlineSettings&&orderingInlineSettings.baseUrl?orderingInlineSettings.baseUrl:"/inline/"},l=location.href.split(i.baseUrl)[0],e=location.href.split(i.baseUrl)[1],a="' + url + '",r=document.createElement("iframe");r.id="ordering_iframe",r.src=(a+"/"+e).replace(/([^:]\\/)\\/+/g,"$1"),r.style.border=0,r.style.height="100%",r.style.width="100%",r.style.maxWidth="none",r.allow="geolocation";var d=document.getElementById("ordering_iframe_inline");d.appendChild(r),r.addEventListener("load",function(){t(),setInterval(function(){var e=JSON.stringify({event:"body",data:{}});r.contentWindow.postMessage(e,a)},100)});function t(){var e=document.documentElement,t=window.innerwidth||e.clientWidth,n=window.innerHeight||e.clientHeight,o=(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0),i=(window.pageYOffset||e.scrollTop)-(e.clientTop||0),l=JSON.stringify({event:"scroll",data:{top:i,left:o,width:t,height:n,offsetTop:s(r).top}});r.contentWindow.postMessage(l,a)}function s(e){for(var t=0,n=0;t+=e.offsetTop||0,n+=e.offsetLeft||0,e=e.offsetParent;);return{top:t,left:n}}window.addEventListener("message",function(e){var t=e.data;if("body"==t.event)d.style.height=t.data.height+"px";else if("scroll"==t.event)t.data.enable?document.getElementsByTagName("body")[0].style.overflowY="auto":document.getElementsByTagName("body")[0].style.overflowY="hidden";else if("url"==t.event){var n=document.createElement("a");n.href=t.data;var o=((l?l+"/":"")+i.baseUrl+"/"+n.pathname).replace(/([^:]\\/)\\/+/g,"$1");window.history.pushState("","",o),"http://localhost/"!=t.data&&window.scrollTo(0,s(r).top)}},!1),window.onscroll=function(e){t()}};</script><div style="height: 1000px;" id="ordering_iframe_inline"></div>'
+
+  return (
+    <Container>
+      <HeaderTitleContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('ORDERING_WIDGETS', 'Ordering Widgets')}</h1>
+      </HeaderTitleContainer>
+      <Content>
+        <PopupContainer>
+          <h2>{t('INTEGRATION_WEBSITE', 'Integration on your website')}: {t('POPUP', 'Popup')}</h2>
+          <h3>{t('BUTTON_WITH_MODAL_STYLE', 'Button with modal style')}</h3>
+          <FormGroup>
+            <label>1* {t('INSERT_ON_DIV_DISPLAY', 'Insert in the div where you want to display it.')}</label>
+            <Input
+              placeholder={t('CODE', 'Code')}
+              defaultValue={`<button onclick="toggleOrderingWidget()">${t('Online_Ordering', 'Online Ordering')}</button>`}
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>2* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')} ({t('IF_USED_PAYPALEXPRESS', 'Use only if Paypal Express is used')})</label>
+            <Input
+              placeholder={t('CODE', 'Code')}
+              defaultValue='<script src="https://www.paypalobjects.com/api/checkout.js"></script>'
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>3* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')}</label>
+            <TextArea
+              placeholder={t('CODE', 'Code')}
+              value={widgetPopup}
+              disabled
+            />
+          </FormGroup>
+          <h3>{t('CHAT_STYLE_INTEGRATION', 'Chat style integration')}</h3>
+          <FormGroup>
+            <label>1* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')} ({t('IF_USED_PAYPALEXPRESS', 'Use only if Paypal Express is used')})</label>
+            <Input
+              placeholder={t('CODE', 'Code')}
+              defaultValue='<script src="https://www.paypalobjects.com/api/checkout.js"></script>'
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>2* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')}</label>
+            <TextArea
+              placeholder={t('CODE', 'Code')}
+              value={widgetBot}
+              disabled
+            />
+          </FormGroup>
+        </PopupContainer>
+        <InlineContainer>
+          <h2>{t('INTEGRATION_WEBSITE', 'Integration on your website')}: {t('INLINE', 'Inline')}</h2>
+          <FormGroup>
+            <label>1* {t('INSERT_ON_END_BODY', 'Insert at the end of the body tag')} ({t('IF_USED_PAYPALEXPRESS', 'Use only if Paypal Express is used')})</label>
+            <Input
+              placeholder={t('CODE', 'Code')}
+              defaultValue='<script src="https://www.paypalobjects.com/api/checkout.js"></script>'
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>2* {t('INSERT_ON_DIV_DISPLAY', 'Insert in the div where you want to display it.')}</label>
+            <TextArea
+              placeholder={t('CODE', 'Code')}
+              defaultValue={widgetInline}
+              disabled
+            />
+          </FormGroup>
+          <FormGroup>
+            <label>3* .htaccess</label>
+            <TextArea
+              placeholder={t('CODE', 'Code')}
+              defaultValue='RewriteEngine On
+              RewriteRule ^inline/(.+)$ /inline/ [NC,L] #where inline is the folder'
+              disabled
+            />
+          </FormGroup>
+        </InlineContainer>
+      </Content>
+    </Container>
+  )
+}

package/src/components/MyProducts/OrderingWidgets/styles.js

@@ -0,0 +1,84 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 25px 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+`
+
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 35px;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+export const Content = styled.div``
+
+export const FormGroup = styled.div`
+  margin-bottom: 30px;
+  label {
+    display: block;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 11px;
+  }
+  input, textarea {
+    width: 100%;
+  }
+  textarea {
+    height: 200px;
+  }
+`
+
+export const PopupContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 20px;
+  }
+  h3 {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    margin-bottom: 25px;
+  }
+`
+
+export const InlineContainer = styled.div`
+  h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 20px;
+  }
+`

package/src/components/MyProducts/index.js

@@ -6,6 +6,7 @@ import { PosApp } from './PosApp'
 import { CallCenterApp } from './CallCenterApp'
 import { KioskApp } from './KioskApp'
 import { CustomProject } from './CustomProject'
+import { OrderingWidgets } from './OrderingWidgets'
 
 export {
   OrderingWebsite,
@@ -15,5 +16,6 @@ export {
   PosApp,
   CallCenterApp,
   KioskApp,
-  CustomProject
+  CustomProject,
+  OrderingWidgets
 }

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>