kitchen-simulator 5.0.0-test.17 → 5.0.0-test.19

package/src/components/toolbar/components/Pricing.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import Skeleton from '@material-ui/lab/Skeleton';
+import * as PS from '../popup/styles';
+import { TEXT_COLOR_NEUTRAL_0 } from '../../../../src/constants';
+import { useGetPricesBySku } from '../../../../src/hooks/useGetPricesBySku';
+import { useValidateToken } from '../../../../src/hooks/useValidateToken';
+
+export const Pricing = ({ internalSKU, accessToken }) => {
+  const { data } = useValidateToken(accessToken);
+
+  const {
+    data: { prices = [] },
+    isFetching
+  } = useGetPricesBySku(data?.source === 'none' ? [] : [internalSKU]);
+
+  if (isFetching || data?.source === 'none') {
+    return (
+      <React.Fragment>
+        <PS.DesignValue
+          style={{
+            fontSize: 16,
+            margin: '10px 0',
+            fontWeight: 600,
+            marginBottom: 0
+          }}
+        >
+          <Skeleton variant="text" width={80} height={24} />
+        </PS.DesignValue>
+        <span
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            marginBottom: 5
+          }}
+        >
+          <Skeleton variant="text" width={100} height={20} />
+          <Skeleton variant="text" width={60} height={20} />
+        </span>
+        <span
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between'
+          }}
+        >
+          <Skeleton variant="text" width={120} height={20} />
+          <Skeleton variant="text" width={60} height={20} />
+        </span>
+      </React.Fragment>
+    );
+  }
+
+  const product = prices && prices.length > 0 ? prices[0] : null;
+
+  if (!prices || prices.length === 0) {
+    return (
+      <PS.DesignValue
+        style={{
+          fontSize: 16,
+          margin: '10px 0',
+          fontWeight: 600,
+          marginBottom: 0
+        }}
+      >
+        No pricing information available
+      </PS.DesignValue>
+    );
+  }
+
+  return (
+    <React.Fragment>
+      <PS.DesignValue
+        style={{
+          fontSize: 16,
+          margin: '10px 0',
+          fontWeight: 600,
+          marginBottom: 0
+        }}
+      >
+        Pricing
+      </PS.DesignValue>
+      <span
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          marginBottom: 5
+        }}
+      >
+        <PS.PropteryValue2>Regular Price: </PS.PropteryValue2>
+        <PS.PropteryValue2
+          style={{
+            color: TEXT_COLOR_NEUTRAL_0,
+            textDecoration:
+              product?.discounted_price !== product?.regular_price
+                ? 'line-through'
+                : 'none',
+            width: 'unset',
+            fontWeight: 600
+          }}
+        >
+          {`$${product?.regular_price}`}
+        </PS.PropteryValue2>
+      </span>
+      {product?.discounted_price !== null ? (
+        <span
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between'
+          }}
+        >
+          <PS.PropteryValue2>Discounted Price: </PS.PropteryValue2>
+          <PS.PropteryValue2
+            style={{
+              color: 'green',
+              width: 'unset',
+              fontWeight: 600
+            }}
+          >
+            {product?.discounted_price !== product.regular_price
+              ? `$${product?.discounted_price}`
+              : '-'}
+          </PS.PropteryValue2>
+        </span>
+      ) : null}
+    </React.Fragment>
+  );
+};