Merge branch 'Weaverse:main' into main

.env.example

@@ -15,5 +15,5 @@ WEAVERSE_PROJECT_ID="your-project-id"
 
 # Additional services
 #PUBLIC_GOOGLE_GTM_ID=G-R1KFYYKE48
-#JUDGEME_PUBLIC_TOKEN="your-judgeme-public-token"
+#JUDGEME_PRIVATE_API_TOKEN="your-judgeme-private-api-token"
 

README.md

@@ -213,7 +213,6 @@ Export a `schema` object from the file to define the component's schema with def
 export let schema: HydrogenComponentSchema = {
   type: 'video',
   title: 'Video',
-  toolbar: ['general-settings', ['duplicate', 'delete']],
   inspector: [
     {
       group: 'Video',

app/components/Button.tsx

@@ -38,25 +38,29 @@ let variants = cva(
   },
 );
 
+export interface ButtonStyleProps {
+  buttonStyle: "inherit" | "custom";
+  backgroundColor: string;
+  textColor: string;
+  borderColor: string;
+  backgroundColorHover: string;
+  textColorHover: string;
+  borderColorHover: string;
+}
+
 export interface ButtonProps
   extends VariantProps<typeof variants>,
     Omit<
       HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,
       "children" | "type"
     >,
-    Partial<HydrogenComponentProps> {
+    Partial<HydrogenComponentProps>,
+    Partial<ButtonStyleProps> {
   as?: keyof HTMLElementTagNameMap;
   className?: string;
   text: string;
   link?: string;
   openInNewTab?: boolean;
-  buttonStyle?: "inherit" | "custom";
-  backgroundColor?: string;
-  textColor?: string;
-  borderColor?: string;
-  backgroundColorHover?: string;
-  textColorHover?: string;
-  borderColorHover?: string;
 }
 
 let Button = forwardRef<HTMLElement, ButtonProps>((props, ref) => {
@@ -158,10 +162,6 @@ export let buttonContentInputs: InspectorGroup["inputs"] = [
   },
 ];
 export let buttonStylesInputs: InspectorGroup["inputs"] = [
-  {
-    type: "heading",
-    label: "Button styles",
-  },
   {
     type: "select",
     name: "buttonStyle",
@@ -222,6 +222,10 @@ export let buttonStylesInputs: InspectorGroup["inputs"] = [
 
 export let buttonInputs: InspectorGroup["inputs"] = [
   ...buttonContentInputs,
+  {
+    type: "heading",
+    label: "Button styles",
+  },
   ...buttonStylesInputs,
 ];
 
@@ -234,5 +238,4 @@ export let schema: HydrogenComponentSchema = {
       inputs: buttonInputs,
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
 };

app/components/Heading.tsx

@@ -220,5 +220,4 @@ export let schema: HydrogenComponentSchema = {
       inputs: headingInputs,
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
 };

app/components/Paragraph.tsx

@@ -128,5 +128,4 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
 };

app/components/SubHeading.tsx

@@ -144,5 +144,4 @@ export let schema: HydrogenComponentSchema = {
       ],
     },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]],
 };

app/data/queries.ts

@@ -42,29 +42,6 @@ export let HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
   ${PRODUCT_CARD_FRAGMENT}
 `;
 
-// @see: https://shopify.dev/api/storefront/current/queries/collections
-export let FEATURED_COLLECTIONS_QUERY = `#graphql
-  query homepageFeaturedCollections($country: CountryCode, $language: LanguageCode)
-  @inContext(country: $country, language: $language) {
-    collections(
-      first: 4,
-      sortKey: UPDATED_AT
-    ) {
-      nodes {
-        id
-        title
-        handle
-        image {
-          altText
-          width
-          height
-          url
-        }
-      }
-    }
-  }
-` as const;
-
 export let PRODUCT_INFO_QUERY = `#graphql
   query ProductInfo(
     $country: CountryCode
@@ -462,20 +439,6 @@ export let VARIANTS_QUERY = `#graphql
   }
   ${PRODUCT_VARIANT_FRAGMENT}
 ` as const;
-export let CUSTOMER_CREATE =
-  `#graphql mutation customerCreate($input: CustomerCreateInput!) {
-  customerCreate(input: $input) {
-    customer {
-      id
-      email
-    }
-    customerUserErrors {
-      field
-      message
-      code
-    }
-  }
-}` as const;
 
 export const METAOBJECTS_QUERY = `#graphql
   query MetaObjects ($type: String!, $first: Int)

app/lib/judgeme.ts

@@ -34,7 +34,7 @@ export let getJudgemeReviews = async (
 ) => {
   if (!api_token) {
     return {
-      error: "Missing JUDGEME_PUBLIC_TOKEN",
+      error: "Missing JUDGEME_PRIVATE_API_TOKEN",
     };
   }
   let internalId = await getInternalIdByHandle(api_token, shop_domain, handle);

app/lib/menu.ts

@@ -0,0 +1,6 @@
+export function getMaxDepth(item: { items: any[] }): number {
+    if (item.items?.length > 0) {
+      return Math.max(...item.items.map(getMaxDepth)) + 1;
+    }
+    return 1;
+  }

app/lib/type.ts

@@ -25,3 +25,19 @@ export type I18nLocale = Locale & {
 export type Storefront = HydrogenStorefront<I18nLocale>;
 
 export type Alignment = "left" | "center" | "right";
+
+export interface SingleMenuItem {
+  id: string;
+  title: string;
+  items: SingleMenuItem[];
+  to: string;
+  resource?: {
+    image?: {
+      altText: string;
+      height: number;
+      id: string;
+      url: string;
+      width: number;
+    };
+  }
+}

app/lib/utils.ts

@@ -1,7 +1,6 @@
 import { useLocation } from "@remix-run/react";
 import type { FulfillmentStatus } from "@shopify/hydrogen/customer-account-api-types";
 import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
-import type { WeaverseImage } from "@weaverse/hydrogen";
 import type { LinkHTMLAttributes } from "react";
 import type {
   ChildMenuItemFragment,
@@ -335,7 +334,11 @@ export function removeFalsy<T = any>(
 }
 
 export function getImageAspectRatio(
-  image: Partial<WeaverseImage>,
+  image: {
+    width?: number | null;
+    height?: number | null;
+    [key: string]: any;
+  },
   aspectRatio: string,
 ) {
   let aspRt: string | undefined;

app/modules/Drawer.tsx

@@ -1,6 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
+import { useLocation } from "@remix-run/react";
 import clsx from "clsx";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { IconCaretLeft } from "~/components/Icons";
 import { cn } from "~/lib/cn";
 import { Heading, IconClose } from "~/modules";
@@ -141,6 +142,12 @@ Drawer.Title = Dialog.Title;
 
 export function useDrawer(openDefault = false) {
   const [isOpen, setIsOpen] = useState(openDefault);
+  let { pathname } = useLocation();
+  useEffect(() => {
+    if (isOpen) {
+      closeDrawer();
+    }
+  }, [pathname]);
 
   function openDrawer() {
     setIsOpen(true);