feat: add sales channels page in seller center and modal in products page in seller center

package.json

@@ -42,13 +42,15 @@
   },
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.1",
-    "@bosonprotocol/react-kit": "^0.17.3",
+    "@bosonprotocol/react-kit": "^0.17.4-alpha.2",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.6.1",
     "@glidejs/glide": "^3.5.2",
     "@graphql-codegen/fragment-matcher": "^3.3.1",
     "@popperjs/core": "^2.11.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-progress": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-toast": "^1.0.0",
@@ -105,7 +107,7 @@
     "react-router-dom": "^6.4.0",
     "react-scripts": "^5.0.1",
     "react-select": "^5.4.0",
-    "react-swipeable": "^7.0.0",
+    "react-swipeable": "^7.0.1",
     "react-table": "^7.8.0",
     "react-uuid": "^1.0.3",
     "rehype-raw": "^6.1.1",

src/components/app/index.tsx

@@ -1,8 +1,7 @@
 import { IconContext } from "phosphor-react";
-import { Fragment } from "react";
+import { Fragment, ReactNode, useMemo } from "react";
 import styled, { ThemeProvider } from "styled-components";
 
-import Layout from "../../components/Layout";
 import ModalProvider from "../../components/modal/ModalProvider";
 import GlobalStyle from "../../lib/styles/GlobalStyle";
 import ChatProvider from "../../pages/chat/ChatProvider/ChatProvider";
@@ -11,6 +10,7 @@ import theme from "../../theme";
 import CookieBanner from "../cookie/CookieBanner";
 import Footer from "../footer/Footer";
 import Header from "../header/Header";
+import Layout, { LayoutProps } from "../layout/Layout";
 
 const Container = styled.div`
   width: 100%;
@@ -25,12 +25,29 @@ const Container = styled.div`
 
 interface Props {
   children: JSX.Element;
+  withHeader?: boolean;
   withLayout?: boolean;
+  withFullLayout?: boolean;
   withFooter?: boolean;
   fluidHeader?: boolean;
   withBosonStyles?: boolean;
 }
+
+const getLayoutWrapper =
+  (fullWidth: LayoutProps["fullWidth"]) =>
+  ({ children }: { children: ReactNode }) =>
+    (
+      <Layout
+        style={{ display: "flex", flex: "1", flexDirection: "column" }}
+        fullWidth={fullWidth}
+      >
+        {children}
+      </Layout>
+    );
+
 export default function App({
+  withHeader = true,
+  withFullLayout = false,
   withLayout = true,
   withFooter = true,
   fluidHeader = false,
@@ -50,7 +67,10 @@ export default function App({
   const fontFamily = useCustomStoreQueryParameter("fontFamily");
   const buttonBgColor = useCustomStoreQueryParameter("buttonBgColor");
   const buttonTextColor = useCustomStoreQueryParameter("buttonTextColor");
-  const Wrapper = withLayout ? Layout : Fragment;
+  const LayoutWrapper = useMemo(() => {
+    return getLayoutWrapper(withFullLayout);
+  }, [withFullLayout]);
+  const Wrapper = withLayout ? LayoutWrapper : Fragment;
 
   return (
     <ThemeProvider theme={theme}>
@@ -78,7 +98,7 @@ export default function App({
                   $buttonBgColor={buttonBgColor}
                   $buttonTextColor={buttonTextColor}
                 />
-                <Header fluidHeader={fluidHeader} />
+                {withHeader && <Header fluidHeader={fluidHeader} />}
                 <Wrapper>{children}</Wrapper>
                 <Footer withFooter={withFooter} />
               </Container>

src/components/footer/Footer.tsx

@@ -19,7 +19,7 @@ import SocialLogo, {
 import { useCustomStoreQueryParameter } from "../../pages/custom-store/useCustomStoreQueryParameter";
 import useUserRoles from "../../router/useUserRoles";
 import { LinkWithQuery } from "../customNavigation/LinkWithQuery";
-import Layout from "../Layout";
+import Layout from "../layout/Layout";
 import Grid from "../ui/Grid";
 import GridContainer from "../ui/GridContainer";
 import Typography from "../ui/Typography";

src/components/footer/routes.tsx

@@ -17,7 +17,7 @@ import {
 import { isTruthy } from "../../lib/types/helpers";
 import { UserRoles } from "../../router/routes";
 import { checkIfUserHaveRole } from "../../router/useUserRoles";
-import { DEFAULT_SELLER_PAGE } from "../seller/SellerPages";
+import { getSellerCenterPath } from "../seller/paths";
 import ViewTxButton from "../transactions/ViewTxButton";
 
 export const SOCIAL_ROUTES = [
@@ -138,9 +138,7 @@ export const getSellRoutes = ({
   ) {
     productRoutes.push({
       name: "Seller Center",
-      url: generatePath(SellerCenterRoutes.SellerCenter, {
-        [UrlParameters.sellerPage]: DEFAULT_SELLER_PAGE
-      })
+      url: getSellerCenterPath("Dashboard")
     });
   }
   if (

src/components/form/Select.tsx

@@ -1,6 +1,11 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
 import { useField } from "formik";
-import Select from "react-select";
+import Select, {
+  ActionMeta,
+  MultiValue,
+  SingleValue,
+  StylesConfig
+} from "react-select";
 import styled from "styled-components";
 
 import { colors } from "../../lib/styles/colors";
@@ -13,9 +18,12 @@ const StyledSelect = styled(Select)`
   * {
     font-size: 13.33px;
   }
+  [class*="-indicatorContainer"] {
+    padding: 6.92px; // to make selects less tall but as tall as inputs
+  }
 ` as Select;
 
-const customStyles = (error: any) => ({
+const customStyles = (error: any): StylesConfig<any, true> => ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   singleValue: (provided: any, state: any) => {
     return {
@@ -55,7 +63,8 @@ const customStyles = (error: any) => ({
     ...provided,
     zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
     position: "relative",
-    width: "100%"
+    width: "100%",
+    height: "25px"
   }),
   option: (provided: any, state: any) => ({
     ...provided,
@@ -72,7 +81,20 @@ const customStyles = (error: any) => ({
   }),
   indicatorSeparator: () => ({
     display: "none"
-  })
+  }),
+  multiValue: (base, state) => {
+    return (state.data as Record<string, any>).isFixed
+      ? { ...base, backgroundColor: colors.darkGrey }
+      : base;
+  },
+  multiValueLabel: (base, state) => {
+    return state.data.isFixed
+      ? { ...base, fontWeight: "bold", color: colors.white, paddingRight: 6 }
+      : base;
+  },
+  multiValueRemove: (base, state) => {
+    return state.data.isFixed ? { ...base, display: "none" } : base;
+  }
 });
 
 export default function SelectComponent({
@@ -85,7 +107,7 @@ export default function SelectComponent({
   errorMessage,
   onChange,
   ...props
-}: SelectProps) {
+}: SelectProps<boolean>) {
   const [field, meta, helpers] = useField(name);
   const displayErrorMessage =
     meta.error && meta.touched && !errorMessage
@@ -98,13 +120,50 @@ export default function SelectComponent({
     typeof displayErrorMessage === typeof "string" &&
     displayErrorMessage !== "";
 
-  const handleChange = (option: SelectDataProps<string>) => {
-    if (!meta.touched) {
-      helpers.setTouched(true);
-    }
-    helpers.setValue(option);
-    onChange?.(option);
-  };
+  let handleChange:
+    | ((
+        newValue: MultiValue<SelectDataProps<string>> | null,
+        actionMeta: ActionMeta<SelectDataProps<string>>
+      ) => void)
+    | ((newValue: SingleValue<SelectDataProps<string> | null>) => void);
+  if (props.isMulti) {
+    handleChange = (
+      newValue: MultiValue<SelectDataProps<string>> | null,
+      actionMeta: ActionMeta<SelectDataProps<string>>
+    ) => {
+      let newValueTemp: typeof newValue = newValue;
+      if (!meta.touched) {
+        helpers.setTouched(true);
+      }
+      switch (actionMeta.action) {
+        case "remove-value":
+        case "pop-value":
+          if (actionMeta.removedValue.isFixed) {
+            return;
+          }
+          break;
+        case "clear":
+          if (Array.isArray(field.value)) {
+            newValueTemp = (field.value as any[]).filter((v) => v.isFixed);
+          }
+          break;
+      }
+
+      helpers.setValue(newValueTemp);
+      onChange?.(newValueTemp);
+    };
+  } else {
+    handleChange = (newValue: SingleValue<SelectDataProps<string> | null>) => {
+      const newValueTemp: typeof newValue = newValue;
+      if (!meta.touched) {
+        helpers.setTouched(true);
+      }
+
+      helpers.setValue(newValueTemp);
+      onChange?.(newValueTemp);
+    };
+  }
+
   const handleBlur = () => {
     if (!meta.touched) {
       helpers.setTouched(true);
@@ -120,12 +179,14 @@ export default function SelectComponent({
         placeholder={placeholder}
         options={options}
         value={field.value}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         onChange={handleChange}
         onBlur={handleBlur}
         isSearchable={isSearchable}
         isClearable={isClearable}
         isDisabled={disabled}
-        isOptionDisabled={(option) => option.disabled}
+        isOptionDisabled={(option) => !!option.disabled}
       />
       <Error display={displayError} message={displayErrorMessage} />{" "}
     </>

src/components/form/types.ts

@@ -1,6 +1,6 @@
 import { Dayjs } from "dayjs";
 import { CSSProperties, ReactNode } from "react";
-import { SingleValue } from "react-select";
+import { MultiValue, SingleValue } from "react-select";
 
 import { UploadFileType } from "./Upload/types";
 
@@ -64,6 +64,7 @@ export interface SelectDataProps<Value extends string = string> {
   label: string;
   value: Value;
   disabled?: boolean;
+  isFixed?: boolean;
   [others: string]: unknown;
 }
 
@@ -80,14 +81,18 @@ export interface BaseSelectProps {
   onChange?: OnChange;
 }
 
-export interface SelectProps extends BaseProps {
-  isMulti?: boolean;
+export interface SelectProps<IsMulti extends boolean> extends BaseProps {
+  isMulti?: IsMulti;
   disabled?: boolean;
   isClearable?: boolean;
   isSearchable?: boolean;
   options: Array<SelectDataProps> | Readonly<Array<SelectDataProps>>;
   errorMessage?: string;
-  onChange?: (option: SelectDataProps<string>) => void;
+  onChange?: (
+    option: IsMulti extends true
+      ? MultiValue<SelectDataProps<string>>
+      : SingleValue<SelectDataProps<string>>
+  ) => void;
   label?: string;
   className?: string;
   classNamePrefix?: string;

src/components/header/Header.tsx

@@ -17,7 +17,7 @@ import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryPa
 import { useCustomStoreQueryParameter } from "../../pages/custom-store/useCustomStoreQueryParameter";
 import useUserRoles from "../../router/useUserRoles";
 import { LinkWithQuery } from "../customNavigation/LinkWithQuery";
-import Layout from "../Layout";
+import Layout from "../layout/Layout";
 import { Spinner } from "../loading/Spinner";
 import { DEFAULT_SELLER_PAGE } from "../seller/SellerPages";
 import BosonButton from "../ui/BosonButton";

src/components/layout/Context.tsx

@@ -0,0 +1,11 @@
+import { createContext, Dispatch, SetStateAction, useContext } from "react";
+
+export const LayoutContext = createContext<{
+  fullWidth: boolean;
+  setFullWidth: Dispatch<SetStateAction<boolean>>;
+}>({
+  fullWidth: false,
+  setFullWidth: () => null
+});
+
+export const useLayoutContext = () => useContext(LayoutContext);