feat: custom storefront fixed (#249)

* custom storefront fixed * feat: code clean up Co-authored-by: Piotr Kniaź <[email protected]>
bosonprotocol · Sep 30, 2022 · 90f4a27 · 90f4a27
1 parent 3b58da0
commit 90f4a27
Show file tree

Hide file tree

Showing 13 changed files with 172 additions and 38 deletions.
diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
@@ -27,11 +27,13 @@ interface Props {
   withLayout?: boolean;
   withFooter?: boolean;
   fluidHeader?: boolean;
+  withBosonStyles?: boolean;
 }
 export default function App({
   withLayout = true,
   withFooter = true,
   fluidHeader = false,
+  withBosonStyles = true,
   children
 }: Props) {
   const headerBgColor = useCustomStoreQueryParameter("headerBgColor");
@@ -44,6 +46,8 @@ export default function App({
   const footerTextColor = useCustomStoreQueryParameter("footerTextColor");
   const showFooterValue = useCustomStoreQueryParameter("showFooter");
   const fontFamily = useCustomStoreQueryParameter("fontFamily");
+  const buttonBgColor = useCustomStoreQueryParameter("buttonBgColor");
+  const buttonTextColor = useCustomStoreQueryParameter("buttonTextColor");
   const showFooter = ["", "true"].includes(showFooterValue) && withFooter;
   const Wrapper = withLayout ? Layout : Fragment;
 
@@ -59,6 +63,7 @@ export default function App({
           <ModalProvider>
             <Container>
               <GlobalStyle
+                $withBosonStyles={withBosonStyles}
                 $headerBgColor={headerBgColor}
                 $headerTextColor={headerTextColor}
                 $primaryBgColor={primaryBgColor}
@@ -68,6 +73,8 @@ export default function App({
                 $footerBgColor={footerBgColor}
                 $footerTextColor={footerTextColor}
                 $fontFamily={fontFamily}
+                $buttonBgColor={buttonBgColor}
+                $buttonTextColor={buttonTextColor}
               />
               <Header fluidHeader={fluidHeader} />
               <Wrapper>{children}</Wrapper>

diff --git a/src/components/exchange/Exchange.tsx b/src/components/exchange/Exchange.tsx
@@ -35,6 +35,7 @@ interface Props {
 const ExchangeCardWrapper = styled.div`
   [data-card="exchange-card"] {
     min-height: 500px;
+    color: ${colors.black};
   }
 `;
 

diff --git a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
@@ -14,6 +14,7 @@ import Typography from "../../../../ui/Typography";
 const CardContainer = styled.div`
   position: relative;
   padding-bottom: 7.8125rem;
+  background: ${colors.lightGrey};
   display: flex;
   flex-direction: column;
   border: 1px solid ${colors.black}20;

diff --git a/src/components/offers/OfferList.tsx b/src/components/offers/OfferList.tsx
@@ -7,6 +7,7 @@ import { BosonRoutes } from "../../lib/routing/routes";
 import { colors } from "../../lib/styles/colors";
 import { Offer } from "../../lib/types/offer";
 import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
+import { useIsCustomStoreValueChanged } from "../../pages/custom-store/useIsCustomStoreValueChanged";
 import { ProductGridContainer } from "../../pages/profile/ProfilePage.styles";
 import Breadcrumbs from "../breadcrumbs/Breadcrumbs";
 import { Action } from "../offer/OfferCard";
@@ -30,8 +31,9 @@ interface Props {
   breadcrumbs?: boolean;
 }
 
-const Container = styled.div`
-  background: ${colors.lightGrey};
+const Container = styled.div<{ $isPrimaryBgChanged: boolean }>`
+  background: ${({ $isPrimaryBgChanged }) =>
+    $isPrimaryBgChanged ? "var(--primaryBgColor)" : colors.lightGrey};
 `;
 
 const ViewMoreButton = styled.button`
@@ -60,6 +62,7 @@ export default function OfferList({
   itemsPerRow,
   breadcrumbs
 }: Props) {
+  const isPrimaryBgChanged = useIsCustomStoreValueChanged("primaryBgColor");
   const navigate = useKeepQueryParamsNavigate();
   const location = useLocation();
 
@@ -106,7 +109,7 @@ export default function OfferList({
           </Typography>
         </StyledGrid>
       )}
-      <Container>
+      <Container $isPrimaryBgChanged={isPrimaryBgChanged}>
         {breadcrumbs && (
           <Breadcrumbs
             steps={[

diff --git a/src/components/productCard/ProductCard.tsx b/src/components/productCard/ProductCard.tsx
@@ -27,6 +27,7 @@ interface Props {
 const ProductCardWrapper = styled.div`
   [data-card="product-card"] {
     min-height: 500px;
+    color: ${colors.black};
   }
 `;
 

diff --git a/src/lib/styles/GlobalStyle.tsx b/src/lib/styles/GlobalStyle.tsx
@@ -4,6 +4,7 @@ import { breakpoint } from "../../lib/styles/breakpoint";
 import { colors } from "../../lib/styles/colors";
 
 const GlobalStyle = createGlobalStyle<{
+  $withBosonStyles: boolean;
   $headerBgColor: string;
   $headerTextColor: string;
   $primaryBgColor: string;
@@ -13,6 +14,8 @@ const GlobalStyle = createGlobalStyle<{
   $footerBgColor: string;
   $footerTextColor: string;
   $fontFamily: string;
+  $buttonBgColor: string;
+  $buttonTextColor: string;
 }>`
 
   * {
@@ -21,29 +24,59 @@ const GlobalStyle = createGlobalStyle<{
   :root {
     --l: 50%;
     --headerBgColor: ${(props) =>
-      props.$headerBgColor ? props.$headerBgColor : colors.white};
+      props.$headerBgColor && !props.$withBosonStyles
+        ? props.$headerBgColor
+        : colors.white};
     --headerTextColor: ${(props) =>
-      props.$headerTextColor ? props.$headerTextColor : colors.darkGrey};
+      props.$headerTextColor && !props.$withBosonStyles
+        ? props.$headerTextColor
+        : colors.darkGrey};
     --primary: ${(props) =>
-      props.$primaryBgColor ? props.$primaryBgColor : colors.primary};
+      props.$primaryBgColor && !props.$withBosonStyles
+        ? props.$primaryBgColor
+        : colors.primary};
     --secondary: ${(props) =>
-      props.$secondaryBgColor ? props.$secondaryBgColor : colors.lightGrey};
+      props.$secondaryBgColor && !props.$withBosonStyles
+        ? props.$secondaryBgColor
+        : colors.lightGrey};
     --accent: ${(props) =>
-      props.$accentColor ? props.$accentColor : colors.secondary};
+      props.$accentColor && !props.$withBosonStyles
+        ? props.$accentColor
+        : colors.secondary};
     --accentNoDefault : ${(props) =>
-      props.$accentColor ? props.$accentColor : ""};
+      props.$accentColor && !props.$withBosonStyles ? props.$accentColor : ""};
     --accentDark: ${(props) =>
-      props.$accentColor ? props.$accentColor : colors.arsenic};
+      props.$accentColor && !props.$withBosonStyles
+        ? props.$accentColor
+        : colors.arsenic};
     --textColor: ${(props) =>
-      props.$textColor ? props.$textColor : colors.black};
+      props.$textColor && !props.$withBosonStyles
+        ? props.$textColor
+        : colors.black};
     --primaryBgColor: ${(props) =>
-      props.$primaryBgColor ? props.$primaryBgColor : colors.primaryBgColor};
+      props.$primaryBgColor && !props.$withBosonStyles
+        ? props.$primaryBgColor
+        : colors.primaryBgColor};
     --secondaryBgColor: ${(props) =>
-      props.$secondaryBgColor ? props.$secondaryBgColor : colors.secondary};
+      props.$secondaryBgColor && !props.$withBosonStyles
+        ? props.$secondaryBgColor
+        : colors.secondary};
     --footerBgColor: ${(props) =>
-      props.$footerBgColor ? props.$footerBgColor : colors.black};
+      props.$footerBgColor && !props.$withBosonStyles
+        ? props.$footerBgColor
+        : colors.black};
     --footerTextColor: ${(props) =>
-      props.$footerTextColor ? props.$footerTextColor : colors.white};
+      props.$footerTextColor && !props.$withBosonStyles
+        ? props.$footerTextColor
+        : colors.white};
+    --buttonBgColor: ${(props) =>
+      props.$buttonBgColor && !props.$withBosonStyles
+        ? props.$buttonBgColor
+        : colors.primary};
+    --buttonTextColor: ${(props) =>
+      props.$buttonTextColor && !props.$withBosonStyles
+        ? props.$buttonTextColor
+        : colors.black};
 
     font-size: 12px;
     ${breakpoint.xs} {

diff --git a/src/pages/custom-store/CustomStoreFormContent.tsx b/src/pages/custom-store/CustomStoreFormContent.tsx
@@ -16,6 +16,7 @@ import { useCurrentSellerId } from "../../lib/utils/hooks/useCurrentSellerId";
 import SocialLogo from "./SocialLogo";
 import {
   formModel,
+  initialValues,
   SelectType,
   storeFields,
   StoreFormFields,
@@ -195,6 +196,16 @@ export default function CustomStoreFormContent({ hasSubmitError }: Props) {
     }
   }, [values.withOwnProducts?.value, setFieldValue, sellerId]);
 
+  useEffect(() => {
+    if (
+      values.headerBgColor !== initialValues.headerBgColor &&
+      values.headerTextColor !== initialValues.headerTextColor
+    ) {
+      setFieldValue(storeFields.footerBgColor, values.headerBgColor, true);
+      setFieldValue(storeFields.footerTextColor, values.headerTextColor, true);
+    }
+  }, [values.headerBgColor, setFieldValue, values.headerTextColor]);
+
   const removeEmptyRowsExceptOne = () => {
     const value = values.additionalFooterLinks;
     const onlyFilledValues = value.filter((v) => !!v?.label || !!v?.value);
@@ -366,8 +377,29 @@ export default function CustomStoreFormContent({ hasSubmitError }: Props) {
                     />
                   </Grid>
                 </Grid>
+                <Grid gap={gapBetweenInputs}>
+                  <Grid flexDirection="column" alignItems="flex-start">
+                    <FieldDescription>Button background</FieldDescription>
+                    <InputColor
+                      name={storeFields.buttonBgColor}
+                      placeholder={
+                        formModel.formFields.buttonBgColor.placeholder
+                      }
+                    />
+                  </Grid>
+                  <Grid flexDirection="column" alignItems="flex-start">
+                    <FieldDescription>Button Text Color</FieldDescription>
+                    <InputColor
+                      name={storeFields.buttonTextColor}
+                      placeholder={
+                        formModel.formFields.buttonTextColor.placeholder
+                      }
+                    />
+                  </Grid>
+                </Grid>
               </Grid>
-              <Grid flexDirection="column" alignItems="flex-start">
+              {/* // NOTE: we may wish to show it again in the future */}
+              {/* <Grid flexDirection="column" alignItems="flex-start">
                 <FieldTitle>Footer Color</FieldTitle>
                 <Grid gap={gapBetweenInputs}>
                   <Grid flexDirection="column" alignItems="flex-start">
@@ -389,7 +421,7 @@ export default function CustomStoreFormContent({ hasSubmitError }: Props) {
                     />
                   </Grid>
                 </Grid>
-              </Grid>
+              </Grid> */}
               <Grid flexDirection="column" alignItems="flex-start">
                 <FieldTitle>Font family</FieldTitle>
                 <FieldDescription>Choose your font type</FieldDescription>
@@ -673,7 +705,7 @@ export default function CustomStoreFormContent({ hasSubmitError }: Props) {
                   </Grid>
                 </Grid>
               )}
-              <Grid flexDirection="column" alignItems="flex-start">
+              {/* <Grid flexDirection="column" alignItems="flex-start">
                 <FieldTitle>Toggle header/footer options</FieldTitle>
                 <FieldDescription>
                   Focus your user's attention exclusively on relevant actions
@@ -691,7 +723,7 @@ export default function CustomStoreFormContent({ hasSubmitError }: Props) {
                   isClearable
                   isMulti
                 />
-              </Grid>
+              </Grid> */}
             </Grid>
           </CollapseWithTrigger>
         </Grid>

diff --git a/src/pages/custom-store/store-fields.ts b/src/pages/custom-store/store-fields.ts
@@ -22,6 +22,8 @@ export type StoreFields = {
   textColor: string;
   footerBgColor: string;
   footerTextColor: string;
+  buttonBgColor: string;
+  buttonTextColor: string;
   fontFamily: string;
   navigationBarPosition: SelectType;
   copyright: string;
@@ -69,7 +71,9 @@ export const storeFields = {
   offerCurationList: "offerCurationList",
   withMetaTx: "withMetaTx",
   metaTransactionsApiKey: "metaTransactionsApiKey",
-  supportFunctionality: "supportFunctionality"
+  supportFunctionality: "supportFunctionality",
+  buttonBgColor: "buttonBgColor",
+  buttonTextColor: "buttonTextColor"
 } as const;
 
 const getYesNoOptions = (defaultValue: "yes" | "no") => {
@@ -260,6 +264,16 @@ export const formModel = {
         { label: "Seller", value: "seller" },
         { label: "Dispute Resolver", value: "dr" }
       ]
+    },
+    [storeFields.buttonBgColor]: {
+      name: storeFields.buttonBgColor,
+      requiredErrorMessage: standardRequiredErrorMessage,
+      placeholder: "Accent"
+    },
+    [storeFields.buttonTextColor]: {
+      name: storeFields.buttonTextColor,
+      requiredErrorMessage: standardRequiredErrorMessage,
+      placeholder: "Text"
     }
   }
 } as const;
@@ -285,8 +299,11 @@ export const validationSchema = Yup.object({
   [storeFields.secondaryBgColor]: Yup.string(),
   [storeFields.accentColor]: Yup.string(),
   [storeFields.textColor]: Yup.string(),
-  [storeFields.footerBgColor]: Yup.string(),
+  // NOTE: we may wish to show it again in the future
+  // [storeFields.footerBgColor]: Yup.string(),
   [storeFields.footerTextColor]: Yup.string(),
+  [storeFields.buttonBgColor]: Yup.string(),
+  [storeFields.buttonTextColor]: Yup.string(),
   [storeFields.textColor]: Yup.string(),
   [storeFields.fontFamily]: Yup.object({
     label: Yup.string().required(standardRequiredErrorMessage),
@@ -339,13 +356,14 @@ export const validationSchema = Yup.object({
     label: Yup.string().required(standardRequiredErrorMessage),
     value: Yup.string().required(standardRequiredErrorMessage)
   }).nullable(),
-  [storeFields.metaTransactionsApiKey]: Yup.string(),
-  [storeFields.supportFunctionality]: Yup.array(
-    Yup.object({
-      label: Yup.string().required(standardRequiredErrorMessage),
-      value: Yup.string().required(standardRequiredErrorMessage)
-    }).nullable()
-  )
+  [storeFields.metaTransactionsApiKey]: Yup.string()
+  // NOTE: we may wish to show it again in the future
+  // [storeFields.supportFunctionality]: Yup.array(
+  //   Yup.object({
+  //     label: Yup.string().required(standardRequiredErrorMessage),
+  //     value: Yup.string().required(standardRequiredErrorMessage)
+  //   }).nullable()
+  // )
 });
 
 export const initialValues = {
@@ -362,6 +380,8 @@ export const initialValues = {
   [storeFields.accentColor]: "",
   [storeFields.textColor]: colors.black,
   [storeFields.footerBgColor]: colors.black,
+  [storeFields.buttonBgColor]: colors.primary,
+  [storeFields.buttonTextColor]: colors.black,
   [storeFields.footerTextColor]: colors.white,
   [storeFields.fontFamily]: formModel.formFields.fontFamily.options.find(
     (option) => "default" in option && option.default

diff --git a/src/pages/custom-store/useIsCustomStoreValueChanged.ts b/src/pages/custom-store/useIsCustomStoreValueChanged.ts
@@ -0,0 +1,7 @@
+import { initialValues, StoreFields } from "./store-fields";
+import { useCustomStoreQueryParameter } from "./useCustomStoreQueryParameter";
+
+export const useIsCustomStoreValueChanged = (key: keyof StoreFields) => {
+  const value = useCustomStoreQueryParameter(key);
+  return !value ? false : value !== initialValues[key];
+};