feat: add CTAs logic (#265)

* feat: add CTAs logic * fix: after CR
bosonprotocol · Oct 4, 2022 · 89d3ad1 · 89d3ad1
1 parent c4fe0d0
commit 89d3ad1
Show file tree

Hide file tree

Showing 14 changed files with 216 additions and 54 deletions.
diff --git a/src/components/detail/DetailTable.tsx b/src/components/detail/DetailTable.tsx
@@ -1,3 +1,5 @@
+import { Fragment } from "react";
+
 import Tooltip from "../tooltip/Tooltip";
 import Grid from "../ui/Grid";
 import Typography from "../ui/Typography";
@@ -32,8 +34,8 @@ export default function DetailTable({
         {data?.map(
           ({ hide = false, ...d }: Data, index: number) =>
             !hide && (
-              <>
-                <tr key={`tr_${index}`}>
+              <Fragment key={`tr_fragment_${index}`}>
+                <tr>
                   <td>
                     <Grid justifyContent="flex-start">
                       <Typography tag={tag}>{d.name}</Typography>
@@ -55,7 +57,7 @@ export default function DetailTable({
                 ) : (
                   <></>
                 )}
-              </>
+              </Fragment>
             )
         )}
       </tbody>

diff --git a/src/components/seller/SellerAddNewProduct.tsx b/src/components/seller/SellerAddNewProduct.tsx
@@ -2,14 +2,20 @@ import { PlusCircle } from "phosphor-react";
 
 import { SellerCenterRoutes } from "../../lib/routing/routes";
 import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
+import { SellerRolesProps } from "../../lib/utils/hooks/useSellerRoles";
 import Button from "../ui/Button";
 
-function SellerAddNewProduct() {
+interface Props {
+  sellerRoles: SellerRolesProps;
+}
+function SellerAddNewProduct({ sellerRoles }: Props) {
   const navigate = useKeepQueryParamsNavigate();
   return (
     <Button
       theme="bosonPrimary"
       size="small"
+      disabled={!sellerRoles?.isOperator}
+      tooltip="This action is restricted to only the operator wallet"
       onClick={() => {
         navigate({ pathname: SellerCenterRoutes.CreateProduct });
       }}

diff --git a/src/components/seller/SellerBatchComplete.tsx b/src/components/seller/SellerBatchComplete.tsx
@@ -1,17 +1,21 @@
 import { Exchange } from "../../lib/utils/hooks/useExchanges";
+import { SellerRolesProps } from "../../lib/utils/hooks/useSellerRoles";
 import { useModal } from "../modal/useModal";
 import Button from "../ui/Button";
 
 interface Props {
   selected: Array<Exchange | null>;
   refetch: () => void;
+  sellerRoles: SellerRolesProps;
 }
-function SellerBatchComplete({ selected, refetch }: Props) {
+function SellerBatchComplete({ selected, refetch, sellerRoles }: Props) {
   const { showModal, modalTypes } = useModal();
   return (
     <Button
       theme="bosonPrimary"
       size="small"
+      disabled={!sellerRoles?.isOperator}
+      tooltip="This action is restricted to only the operator wallet"
       onClick={() => {
         showModal(
           modalTypes.COMPLETE_EXCHANGE,

diff --git a/src/components/seller/SellerBatchVoid.tsx b/src/components/seller/SellerBatchVoid.tsx
@@ -1,18 +1,22 @@
 import { useModal } from "../../components/modal/useModal";
 import { Offer } from "../../lib/types/offer";
+import { SellerRolesProps } from "../../lib/utils/hooks/useSellerRoles";
 import Button from "../ui/Button";
 
 interface Props {
   selected: Array<Offer | null>;
   refetch: () => void;
+  sellerRoles: SellerRolesProps;
 }
-function SellerBatchVoid({ selected, refetch }: Props) {
+function SellerBatchVoid({ selected, refetch, sellerRoles }: Props) {
   const { showModal, modalTypes } = useModal();
 
   return (
     <Button
       theme="bosonSecondary"
       size="small"
+      disabled={!sellerRoles?.isOperator}
+      tooltip="This action is restricted to only the operator wallet"
       onClick={() => {
         showModal(
           modalTypes.VOID_PRODUCT,

diff --git a/src/components/seller/common/WithSellerData.tsx b/src/components/seller/common/WithSellerData.tsx
@@ -16,6 +16,10 @@ import {
   SellerProps,
   useSellerDeposit
 } from "../../../lib/utils/hooks/useSellerDeposit";
+import {
+  SellerRolesProps,
+  useSellerRoles
+} from "../../../lib/utils/hooks/useSellerRoles";
 import useFunds, { FundsProps } from "../../../pages/account/funds/useFunds";
 import { useConvertionRate } from "../../convertion-rate/useConvertionRate";
 import Loading from "../../ui/Loading";
@@ -61,6 +65,7 @@ export interface WithSellerDataProps {
   exchangesTokens: ExchangesTokensProps;
   sellerDeposit: SellerDepositProps;
   offersBacked: OffersBackedProps;
+  sellerRoles: SellerRolesProps;
 }
 export function WithSellerData<P>(
   WrappedComponent: React.ComponentType<P & WithSellerDataProps>
@@ -69,6 +74,7 @@ export function WithSellerData<P>(
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     const sellerId = props.sellerId;
+    const sellerRoles = useSellerRoles(sellerId);
     const {
       store: { tokens }
     } = useConvertionRate();
@@ -99,7 +105,8 @@ export function WithSellerData<P>(
       exchanges,
       exchangesTokens,
       sellerDeposit,
-      funds
+      funds,
+      sellerRoles
     };
 
     const offersBacked = useOffersBacked({ ...newProps });

diff --git a/src/components/seller/exchanges/SellerAction.tsx b/src/components/seller/exchanges/SellerAction.tsx
@@ -1,12 +1,12 @@
 import { exchanges as ExchangesKit, subgraph } from "@bosonprotocol/react-kit";
 import { Chat } from "phosphor-react";
-import { generatePath } from "react-router-dom";
-import { NavigateOptions, Path } from "react-router-dom";
+import { generatePath, NavigateOptions, Path } from "react-router-dom";
 
 import { UrlParameters } from "../../../lib/routing/parameters";
 import { BosonRoutes } from "../../../lib/routing/routes";
 import { useDisputeSubStatusInfo } from "../../../lib/utils/hooks/useDisputeSubStatusInfo";
 import { Exchange } from "../../../lib/utils/hooks/useExchanges";
+import { SellerRolesProps } from "../../../lib/utils/hooks/useSellerRoles";
 import { useModal } from "../../modal/useModal";
 import Button from "../../ui/Button";
 import Grid from "../../ui/Grid";
@@ -27,10 +27,12 @@ const generatePathAndNavigate = ({
 
 export const SellerResolveDisputeButton = ({
   exchange,
-  navigate
+  navigate,
+  sellerRoles
 }: {
   exchange: Exchange | null;
   navigate: (to: Partial<Path>, options?: NavigateOptions | undefined) => void;
+  sellerRoles: SellerRolesProps;
 }) => {
   const { status } = useDisputeSubStatusInfo(exchange);
   if (!exchange || status !== "Resolving") {
@@ -53,6 +55,8 @@ export const SellerResolveDisputeButton = ({
     <Button
       theme="primary"
       size="small"
+      disabled={!sellerRoles?.isOperator}
+      tooltip="This action is restricted to only the operator wallet"
       onClick={() => {
         if (exchange?.id) {
           generatePathAndNavigate({ exchangeId: exchange?.id, navigate });
@@ -68,12 +72,14 @@ export const SellerActionButton = ({
   exchange,
   refetch,
   navigate,
-  status
+  status,
+  sellerRoles
 }: {
   exchange: Exchange | null;
   refetch: () => void;
   navigate: (to: Partial<Path>, options?: NavigateOptions | undefined) => void;
   status: ExchangesKit.AllExchangeStates | string;
+  sellerRoles: SellerRolesProps;
 }) => {
   const { showModal, modalTypes } = useModal();
   if (!exchange) {
@@ -85,6 +91,8 @@ export const SellerActionButton = ({
         <Button
           theme="bosonPrimary"
           size="small"
+          disabled={!sellerRoles?.isOperator}
+          tooltip="This action is restricted to only the operator wallet"
           onClick={() => {
             showModal(
               modalTypes.COMPLETE_EXCHANGE,
@@ -115,6 +123,8 @@ export const SellerActionButton = ({
         <Button
           theme="orangeInverse"
           size="small"
+          disabled={!sellerRoles?.isOperator}
+          tooltip="This action is restricted to only the operator wallet"
           onClick={() => {
             if (exchange) {
               showModal(

diff --git a/src/components/seller/exchanges/SellerExchangeTable.tsx b/src/components/seller/exchanges/SellerExchangeTable.tsx
@@ -1,7 +1,12 @@
 import { exchanges as ExchangesKit, subgraph } from "@bosonprotocol/react-kit";
 import dayjs from "dayjs";
-import { Check } from "phosphor-react";
-import { CaretDown, CaretLeft, CaretRight, CaretUp } from "phosphor-react";
+import {
+  CaretDown,
+  CaretLeft,
+  CaretRight,
+  CaretUp,
+  Check
+} from "phosphor-react";
 import { forwardRef, useEffect, useMemo, useRef } from "react";
 import { generatePath } from "react-router-dom";
 import {
@@ -19,6 +24,7 @@ import { colors } from "../../../lib/styles/colors";
 import { getDateTimestamp } from "../../../lib/utils/getDateTimestamp";
 import { Exchange } from "../../../lib/utils/hooks/useExchanges";
 import { useKeepQueryParamsNavigate } from "../../../lib/utils/hooks/useKeepQueryParamsNavigate";
+import { SellerRolesProps } from "../../../lib/utils/hooks/useSellerRoles";
 import ExchangeTimeline from "../../../pages/chat/components/ExchangeTimeline";
 import { CheckboxWrapper } from "../../form/Field.styles";
 import ExchangeStatuses from "../../offer/ExchangeStatuses";
@@ -39,6 +45,7 @@ interface Props {
   isLoading?: boolean;
   refetch: () => void;
   setSelected: React.Dispatch<React.SetStateAction<Array<Exchange | null>>>;
+  sellerRoles: SellerRolesProps;
 }
 
 interface IIndeterminateInputProps {
@@ -197,7 +204,8 @@ export const isCompletable = (exchange: Exchange) => {
 export default function SellerExchangeTable({
   data,
   refetch,
-  setSelected
+  setSelected,
+  sellerRoles
 }: Props) {
   const navigate = useKeepQueryParamsNavigate();
   const columns = useMemo(
@@ -311,18 +319,20 @@ export default function SellerExchangeTable({
               <SellerResolveDisputeButton
                 exchange={element}
                 navigate={navigate}
+                sellerRoles={sellerRoles}
               />
             ) : (
               <SellerActionButton
                 exchange={element}
                 refetch={refetch}
                 navigate={navigate}
                 status={status}
+                sellerRoles={sellerRoles}
               />
             )
         };
       }),
-    [data] // eslint-disable-line
+    [data, sellerRoles] // eslint-disable-line
   );
 
   const tableProps = useTable(

diff --git a/src/components/seller/exchanges/SellerExchanges.tsx b/src/components/seller/exchanges/SellerExchanges.tsx
@@ -47,7 +47,8 @@ interface MyLocationState {
   currentTag: string;
 }
 export default function SellerExchanges({
-  exchanges: exchangesData
+  exchanges: exchangesData,
+  sellerRoles
 }: SellerInsideProps & WithSellerDataProps) {
   const location = useLocation();
   const state = location.state as MyLocationState;
@@ -147,7 +148,11 @@ export default function SellerExchanges({
     return (
       <>
         {selected.length > 0 && (
-          <SellerBatchComplete selected={selected} refetch={refetch} />
+          <SellerBatchComplete
+            selected={selected}
+            refetch={refetch}
+            sellerRoles={sellerRoles}
+          />
         )}
         <ExportDropdown
           children={[
@@ -172,7 +177,7 @@ export default function SellerExchanges({
         />
       </>
     );
-  }, [prepareCSVData, refetch, selected]);
+  }, [prepareCSVData, refetch, selected, sellerRoles]);
 
   if (isLoading) {
     return <Loading />;
@@ -198,6 +203,7 @@ export default function SellerExchanges({
         isError={isError}
         refetch={refetch}
         setSelected={setSelected}
+        sellerRoles={sellerRoles}
       />
     </>
   );

diff --git a/src/components/seller/finances/SellerFinances.tsx b/src/components/seller/finances/SellerFinances.tsx
@@ -149,7 +149,8 @@ export default function SellerFinances({
   funds: fundsData,
   exchangesTokens: exchangesTokensData,
   sellerDeposit: sellerDepositData,
-  offersBacked
+  offersBacked,
+  sellerRoles
 }: SellerInsideProps & WithSellerDataProps) {
   const { showModal, modalTypes } = useModal();
   const { funds, reload, fundStatus } = fundsData;
@@ -289,6 +290,8 @@ export default function SellerFinances({
               <WithdrawButton
                 theme="outline"
                 size="small"
+                disabled={!sellerRoles.isClerk}
+                tooltip="This action is restricted to only the clerk wallet"
                 onClick={() => {
                   showModal(
                     modalTypes.FINANCE_WITHDRAW_MODAL,
@@ -344,7 +347,8 @@ export default function SellerFinances({
       sellerId,
       sellerLockedFunds,
       showModal,
-      funds
+      funds,
+      sellerRoles
     ]
   );
 

diff --git a/src/components/seller/products/SellerProducts.tsx b/src/components/seller/products/SellerProducts.tsx
@@ -46,7 +46,8 @@ interface FilterValue {
 }
 
 export default function SellerProducts({
-  offers: offersData
+  offers: offersData,
+  sellerRoles
 }: SellerInsideProps & WithSellerDataProps) {
   const [currentTag, setCurrentTag] = useState(productTags[0].value);
   const [search, setSearch] = useState<string>("");
@@ -131,18 +132,22 @@ export default function SellerProducts({
     return (
       <>
         {selected.length > 0 && (
-          <SellerBatchVoid selected={selected} refetch={refetch} />
+          <SellerBatchVoid
+            selected={selected}
+            refetch={refetch}
+            sellerRoles={sellerRoles}
+          />
         )}
         <SellerExport
           csvProps={{
             data: prepareCSVData,
             filename: `products-${dateString}`
           }}
         />
-        <SellerAddNewProduct />
+        <SellerAddNewProduct sellerRoles={sellerRoles} />
       </>
     );
-  }, [prepareCSVData, selected, refetch]);
+  }, [prepareCSVData, selected, refetch, sellerRoles]);
 
   if (isLoading) {
     return <Loading />;
@@ -168,6 +173,7 @@ export default function SellerProducts({
         isError={isError}
         refetch={refetch}
         setSelected={setSelected}
+        sellerRoles={sellerRoles}
       />
     </>
   );