feat: add seller landing page (#683)

* feat: custom store changes * fix: additional footer links * wip * feat: token gating screen * feat: add sales channels page in seller center * feat: improve sales channels cards * feat: congratulations page * fix: footer styles * feat: build more pages * feat: products * wip * wip * fix: bug crash * wip * wip * wip * wip * help section * fix sales channels column and fetching * copies and images * font changes create product * support for non-meta tx * fix layout * fix spinner sales channels * attempt to fix owner query for nonexisten token * sales channels with products * lastupdated divided by 1000 * wip * wip * wip * works * wip * fix * fix * spinner * reload button in products page * stop propagation * some fixes * token gating * token gating * carousel loading * carousel swipeable * images * no tags * styles * create product click * wip * redesign token gating form * wip * wip * wip * wip * typeforms * wip * wip * wip * wup * fix: merge * fix: merge * chore: remove comment
bosonprotocol · Jun 19, 2023 · dd552f9 · dd552f9
1 parent 8f60660
commit dd552f9
Show file tree

Hide file tree

Showing 57 changed files with 1,833 additions and 191 deletions.
diff --git a/src/components/customNavigation/LinkWithQuery.tsx b/src/components/customNavigation/LinkWithQuery.tsx
@@ -1,22 +1,28 @@
+import { ReactNode } from "react";
 import { Link, useLocation } from "react-router-dom";
 
 import { getKeepStoreFieldsQueryParams } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
 
-type Props = {
-  children: string | JSX.Element;
+export type LinkWithQueryProps = {
+  children: ReactNode;
   to: string;
   state?: Record<string, unknown>;
-  [x: string]: unknown;
+  search?: Parameters<typeof getKeepStoreFieldsQueryParams>[1];
 } & Parameters<typeof Link>[0];
-export const LinkWithQuery = ({ children, to, state, ...props }: Props) => {
+export const LinkWithQuery = ({
+  children,
+  to,
+  state,
+  search,
+  ...props
+}: LinkWithQueryProps) => {
   const location = useLocation();
-  // TODO: doesnt currently support passing query params in the 'to' parameter
-  const search = getKeepStoreFieldsQueryParams(location, null);
+  const searchWithStoreFields = getKeepStoreFieldsQueryParams(location, search);
   return (
     <Link
       to={{
         pathname: to,
-        search
+        search: searchWithStoreFields
       }}
       state={{ ...state, prevPath: location.pathname }}
       {...props}

diff --git a/src/components/customNavigation/Navigate.tsx b/src/components/customNavigation/Navigate.tsx
@@ -6,20 +6,20 @@ import {
 
 import { getKeepStoreFieldsQueryParams } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
 
-type NavigateProps = Parameters<typeof ReactRouterDomNavigate>[0];
+type NavigateProps = Omit<Parameters<typeof ReactRouterDomNavigate>[0], "to"> &
+  Required<{ to: Partial<Path> }> & {
+    search?: Parameters<typeof getKeepStoreFieldsQueryParams>[1];
+  };
 
-export default function Navigate(
-  props: Omit<NavigateProps, "to"> & Required<{ to: Partial<Path> }>
-) {
+export default function Navigate({ search, ...props }: NavigateProps) {
   const location = useLocation();
-  // TODO: doesnt currently support passing query params in the 'to' parameter
-  const search = getKeepStoreFieldsQueryParams(location, null);
+  const searchWithStoreFields = getKeepStoreFieldsQueryParams(location, search);
   return (
     <ReactRouterDomNavigate
       {...props}
       to={{
         ...props.to,
-        search
+        search: searchWithStoreFields
       }}
       state={{ ...props.state, prevPath: location.pathname }}
     />

diff --git a/src/components/detail/DetailWidget/DetailWidget.tsx b/src/components/detail/DetailWidget/DetailWidget.tsx
@@ -877,7 +877,7 @@ const DetailWidget: React.FC<IDetailWidget> = ({
                     isPauseCommitting={!address}
                     buttonRef={commitButtonRef}
                     onGetSignerAddress={handleOnGetSignerAddress}
-                    disabled={isCommitDisabled}
+                    disabled={!!isCommitDisabled}
                     offerId={offer.id}
                     exchangeToken={offer.exchangeToken.address}
                     price={offer.price}

diff --git a/src/components/footer/routes.tsx b/src/components/footer/routes.tsx
@@ -126,7 +126,10 @@ export const getSellRoutes = ({
 }) => {
   const isAccountSeller = roles.some((role) => role === UserRoles.Seller);
   const productRoutes: { name: string; url: string }[] = [];
-
+  productRoutes.push({
+    name: "Sell",
+    url: BosonRoutes.Sell
+  });
   productRoutes.push({
     name: "Create Products",
     url: SellerCenterRoutes.CreateProduct

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -22,9 +22,10 @@ export const layoutPadding = css`
 `;
 
 export const LayoutRoot = styled.div<{ fullWidth?: boolean }>`
+  position: relative;
   ${({ fullWidth }) => {
     if (fullWidth) {
-      return "";
+      return css``;
     }
     return css`
       margin: 0 auto;

diff --git a/src/components/modal/ModalComponents.tsx b/src/components/modal/ModalComponents.tsx
@@ -4,6 +4,8 @@ import EscalateModal from "./components/Chat/components/EscalateModal/EscalateMo
 import MakeProposalModal from "./components/Chat/MakeProposal/MakeProposalModal";
 import ResolveDisputeModal from "./components/Chat/ResolveDisputeModal";
 import CompleteExchange from "./components/CompleteExchange";
+import { AccountCreationModal } from "./components/createProduct/AccountCreationModal";
+import VariableStepsExplainerModal from "./components/createProduct/VariableStepsExplainerModal";
 import CreateProductDraft from "./components/CreateProductDraft";
 import CustomStore from "./components/CustomStore";
 import DetailWidget from "./components/DetailWidget";
@@ -76,7 +78,9 @@ export const MODAL_TYPES = {
   PROFILE_DETAILS: "PROFILE_DETAILS",
   IMAGE_EDITOR: "IMAGE_EDITOR",
   IFRAME_MODAL: "IFRAME_MODAL",
-  SALES_CHANNELS: "SALES_CHANNELS"
+  SALES_CHANNELS: "SALES_CHANNELS",
+  ACCOUNT_CREATION: "ACCOUNT_CREATION",
+  VARIABLE_STEPS_EXPLAINER: "VARIABLE_STEPS_EXPLAINER"
 } as const;
 
 export const MODAL_COMPONENTS = {
@@ -118,5 +122,7 @@ export const MODAL_COMPONENTS = {
   [MODAL_TYPES.PROFILE_DETAILS]: ProfileDetailsModal,
   [MODAL_TYPES.IMAGE_EDITOR]: ImageEditorModal,
   [MODAL_TYPES.IFRAME_MODAL]: IframeModal,
-  [MODAL_TYPES.SALES_CHANNELS]: SalesChannelsModal
+  [MODAL_TYPES.SALES_CHANNELS]: SalesChannelsModal,
+  [MODAL_TYPES.ACCOUNT_CREATION]: AccountCreationModal,
+  [MODAL_TYPES.VARIABLE_STEPS_EXPLAINER]: VariableStepsExplainerModal
 } as const;
diff --git a/src/components/modal/components/CreateProductDraft.tsx b/src/components/modal/components/CreateProductDraft.tsx
@@ -16,11 +16,19 @@ export default function CreateProductDraft({ chooseNew, chooseDraft }: Props) {
           Do you wish to continue editing this product or start fresh?
         </Typography>
       </Grid>
-      <Grid flexDirection="row" justifyContent="space-between">
-        <BosonButton variant="primaryFill" onClick={chooseDraft}>
+      <Grid flexDirection="row" justifyContent="space-between" flexWrap="wrap">
+        <BosonButton
+          variant="primaryFill"
+          onClick={chooseDraft}
+          style={{ whiteSpace: "pre-line" }}
+        >
           Edit draft
         </BosonButton>
-        <BosonButton variant="accentInverted" onClick={chooseNew}>
+        <BosonButton
+          variant="accentInverted"
+          onClick={chooseNew}
+          style={{ whiteSpace: "pre-line" }}
+        >
           Start Fresh
         </BosonButton>
       </Grid>

diff --git a/src/components/modal/components/CustomStore.tsx b/src/components/modal/components/CustomStore.tsx
@@ -4,17 +4,29 @@ import { Copy, CopySimple, Info } from "phosphor-react";
 import * as pretty from "pretty";
 import { useState } from "react";
 import toast from "react-hot-toast";
+import { useSearchParams } from "react-router-dom";
 import styled from "styled-components";
 
 import Collapse from "../../../components/collapse/Collapse";
+import { SellerLandingPageParameters } from "../../../lib/routing/parameters";
 import { colors } from "../../../lib/styles/colors";
 import copyToClipboard from "../../../lib/utils/copyToClipboard";
 import { Notify } from "../../detail/Detail.style";
 import { CopyButton } from "../../form/Field.styles";
 import BosonButton from "../../ui/BosonButton";
 import Grid from "../../ui/Grid";
 import Typography from "../../ui/Typography";
-import { ModalProps } from "../ModalContext";
+import { useModal } from "../useModal";
+import {
+  getNextButtonText,
+  getNextStepFromQueryParams,
+  getNextTo,
+  getSlTitle,
+  getVariableStepsFromQueryParams,
+  QueryParamStep,
+  useRemoveLandingQueryParams,
+  VariableStep
+} from "./createProduct/const";
 
 const CopyIcon = styled(CopySimple)`
   cursor: pointer;
@@ -60,13 +72,11 @@ const StyledCopyButton = styled(CopyButton)`
 interface Props {
   ipfsUrl: string;
   htmlString: string;
-  hideModal: NonNullable<ModalProps["hideModal"]>;
 }
-export default function CustomStore({
-  ipfsUrl = "",
-  htmlString = "",
-  hideModal
-}: Props) {
+export default function CustomStore({ ipfsUrl = "", htmlString = "" }: Props) {
+  const { showModal, hideModal } = useModal();
+  const removeLandingQueryParams = useRemoveLandingQueryParams();
+  const [searchParams] = useSearchParams();
   const [show, setShow] = useState<boolean>(false);
 
   const iframeString = htmlString.substring(
@@ -222,7 +232,35 @@ export default function CustomStore({
         <BosonButton
           variant="primaryFill"
           type="button"
-          onClick={() => hideModal()}
+          onClick={() => {
+            if (searchParams.has(SellerLandingPageParameters.slsteps)) {
+              const nextStepResult = getNextStepFromQueryParams(
+                searchParams,
+                QueryParamStep.store
+              );
+              hideModal(!nextStepResult);
+              if (nextStepResult) {
+                const title = getSlTitle(searchParams);
+                showModal("VARIABLE_STEPS_EXPLAINER", {
+                  title,
+                  doSetQueryParams: false,
+                  order: getVariableStepsFromQueryParams(searchParams) as [
+                    VariableStep,
+                    VariableStep,
+                    VariableStep
+                  ],
+                  text: "Your storefront is now successfully created!",
+                  buttonText: getNextButtonText(nextStepResult.nextStep),
+                  to: getNextTo(nextStepResult.nextStep),
+                  firstActiveStep: nextStepResult.nextStepInNumber
+                });
+              } else {
+                removeLandingQueryParams();
+              }
+            } else {
+              hideModal(true);
+            }
+          }}
         >
           Done
         </BosonButton>

diff --git a/src/components/modal/components/Profile/CreateProfileModal.tsx b/src/components/modal/components/Profile/CreateProfileModal.tsx
@@ -1,5 +1,4 @@
 import { subgraph } from "@bosonprotocol/react-kit";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { useCallback, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useAccount } from "wagmi";
@@ -9,8 +8,10 @@ import { colors } from "../../../../lib/styles/colors";
 import { Profile } from "../../../../lib/utils/hooks/lens/graphql/generated";
 import useGetLensProfiles from "../../../../lib/utils/hooks/lens/profile/useGetLensProfiles";
 import useUpdateSellerMetadata from "../../../../lib/utils/hooks/seller/useUpdateSellerMetadata";
+import { useCurrentSellers } from "../../../../lib/utils/hooks/useCurrentSellers";
 import { useKeepQueryParamsNavigate } from "../../../../lib/utils/hooks/useKeepQueryParamsNavigate";
 import { Switch } from "../../../form/Switch";
+import ConnectButton from "../../../header/ConnectButton";
 import { CreateProfile } from "../../../product/utils";
 import SuccessTransactionToast from "../../../toasts/SuccessTransactionToast";
 import BosonButton from "../../../ui/BosonButton";
@@ -23,18 +24,42 @@ import { ProfileType } from "./const";
 import LensProfileFlow from "./Lens/LensProfileFlow";
 import { CreateRegularProfileFlow } from "./Regular/CreateRegularProfileFlow";
 
+const waitForIndexedSeller = async (
+  refetch: ReturnType<typeof useCurrentSellers>["refetch"]
+) => {
+  let i = 0;
+  while (i < 100) {
+    const r = await refetch();
+    const [resultByAddress] = r;
+    if (resultByAddress.status === "fulfilled") {
+      const val = resultByAddress.value;
+      if (val) {
+        const hasSellers = val.data?.sellers?.length;
+        if (hasSellers) {
+          break;
+        }
+      }
+    }
+    await new Promise<void>((resolve) => setTimeout(() => resolve(), 300));
+
+    i++;
+  }
+};
+
 interface Props {
-  initialRegularCreateProfile: CreateProfile;
+  initialRegularCreateProfile?: CreateProfile;
   onRegularProfileCreated?: (createValues: CreateProfile) => void;
   seller?: subgraph.SellerFieldsFragment;
   lensProfile?: Profile;
+  waitUntilIndexed?: boolean;
 }
 
 export default function CreateProfileModal({
   initialRegularCreateProfile,
   onRegularProfileCreated,
   seller,
-  lensProfile: selectedProfile
+  lensProfile: selectedProfile,
+  waitUntilIndexed
 }: Props) {
   const navigate = useKeepQueryParamsNavigate();
   const { mutateAsync: updateSellerMetadata } = useUpdateSellerMetadata();
@@ -67,6 +92,7 @@ export default function CreateProfileModal({
   const [switchChecked, setSwitchChecked] = useState<boolean>(
     profileType === ProfileType.LENS
   );
+  const { refetch } = useCurrentSellers();
   const setSwitchAndProfileType = useCallback((switchToLens: boolean) => {
     setSwitchChecked(switchToLens);
     setProfileType(switchToLens ? ProfileType.LENS : ProfileType.REGULAR);
@@ -122,11 +148,13 @@ export default function CreateProfileModal({
   if (profileType === undefined && hasLensProfile) {
     return <ChooseProfileType setProfileType={setProfileType} />;
   }
-
   return profileType === ProfileType.LENS ? (
     <LensProfileFlow
       onSubmit={async (id, overrides) => {
-        hideModal(selectedProfile);
+        if (waitUntilIndexed) {
+          await waitForIndexedSeller(refetch);
+        }
+        hideModal(true);
         if (selectedProfile) {
           onRegularProfileCreated?.(overrides);
         }
@@ -141,12 +169,16 @@ export default function CreateProfileModal({
   ) : (
     <CreateRegularProfileFlow
       initialData={initialRegularCreateProfile}
-      onSubmit={(regularProfile) => {
+      onSubmit={async (regularProfile) => {
+        if (waitUntilIndexed) {
+          await waitForIndexedSeller(refetch);
+        }
+
         toast((t) => (
           <SuccessTransactionToast t={t} action="Create Seller Account" />
         ));
         onRegularProfileCreated?.(regularProfile);
-        hideModal();
+        hideModal(true);
       }}
       switchButton={SwitchButton}
     />

diff --git a/src/components/modal/components/Profile/EditProfileModal.tsx b/src/components/modal/components/Profile/EditProfileModal.tsx
@@ -1,5 +1,4 @@
 import { AuthTokenType } from "@bosonprotocol/react-kit";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { useCallback, useState } from "react";
 import { useAccount } from "wagmi";
 
@@ -9,6 +8,7 @@ import useUpdateSellerMetadata from "../../../../lib/utils/hooks/seller/useUpdat
 import { useCurrentSellers } from "../../../../lib/utils/hooks/useCurrentSellers";
 import { useKeepQueryParamsNavigate } from "../../../../lib/utils/hooks/useKeepQueryParamsNavigate";
 import { Switch } from "../../../form/Switch";
+import ConnectButton from "../../../header/ConnectButton";
 import { CreateProfile } from "../../../product/utils";
 import BosonButton from "../../../ui/BosonButton";
 import Grid from "../../../ui/Grid";