Merge branch 'Weaverse:main' into main

app/components/icons.tsx

@@ -287,6 +287,21 @@ export function IconSignIn(props: IconProps) {
   );
 }
 
+export function IconSignOut(props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z"></path>
+    </svg>
+  );
+}
+
 export function IconList(props: IconProps) {
   return (
     <svg

app/data/fragments.ts

@@ -180,6 +180,12 @@ export const CART_QUERY_FRAGMENT = `#graphql
         ...Money
       }
     }
+    
+    sellingPlanAllocation {
+      sellingPlan {
+        name
+      }
+    }
     merchandise {
       ... on ProductVariant {
         id

app/data/queries.ts

@@ -29,19 +29,6 @@ export let HOMEPAGE_SEO_QUERY = `#graphql
   ${COLLECTION_CONTENT_FRAGMENT}
 ` as const;
 
-// @see: https://shopify.dev/api/storefront/current/queries/products
-export let HOMEPAGE_FEATURED_PRODUCTS_QUERY = `#graphql
-  query homepageFeaturedProducts($country: CountryCode, $language: LanguageCode)
-  @inContext(country: $country, language: $language) {
-    products(first: 8) {
-      nodes {
-        ...ProductCard
-      }
-    }
-  }
-  ${PRODUCT_CARD_FRAGMENT}
-`;
-
 export let PRODUCT_INFO_QUERY = `#graphql
   query ProductInfo(
     $country: CountryCode

app/graphql/customer-account/customer-order-query.ts

@@ -5,6 +5,12 @@ export const CUSTOMER_ORDER_QUERY = `#graphql
     currencyCode
   }
   fragment DiscountApplication on DiscountApplication {
+    ... on AutomaticDiscountApplication {
+      title
+    }
+    ... on DiscountCodeApplication {
+      code
+    }
     value {
       __typename
       ... on MoneyV2 {
@@ -22,6 +28,12 @@ export const CUSTOMER_ORDER_QUERY = `#graphql
     price {
       ...OrderMoney
     }
+    currentTotalPrice {
+      ...OrderMoney
+    }
+    totalPrice {
+      ...OrderMoney
+    }
     discountAllocations {
       allocatedAmount {
         ...OrderMoney
@@ -61,6 +73,9 @@ export const CUSTOMER_ORDER_QUERY = `#graphql
     subtotal {
       ...OrderMoney
     }
+    totalShipping {
+      ...OrderMoney
+    }
     shippingAddress {
       name
       formatted(withName: true)

app/lib/judgeme.ts

@@ -1,3 +1,4 @@
+import { json } from "@remix-run/server-runtime";
 import type { WeaverseClient } from "@weaverse/hydrogen";
 
 type JudgemeProductData = {
@@ -7,17 +8,36 @@ type JudgemeProductData = {
   };
 };
 
-type JudgemeReviewsData = {
-  reviews: {
-    rating: number;
+type JudgemeReviewType = {
+  id: string;
+  title: string;
+  body: string;
+  rating: number;
+  reviewer: {
+    id: number;
+    email: string;
+    name: string;
+    phone: string;
+  };
+  pictures: {
+    urls: {
+      original: string;
+      small: string;
+      compact: string;
+      huge: string;
+    };
   }[];
 };
 
+type JudgemeReviewsData = {
+  reviews: JudgemeReviewType[];
+};
+
 async function getInternalIdByHandle(
   api_token: string,
   shop_domain: string,
   handle: string,
-  weaverseClient: WeaverseClient,
+  weaverseClient: WeaverseClient
 ) {
   let api = `https://judge.me/api/v1/products/-1?${new URLSearchParams({
     api_token,
@@ -32,26 +52,29 @@ export let getJudgemeReviews = async (
   api_token: string,
   shop_domain: string,
   handle: string,
-  weaverse: WeaverseClient,
+  weaverse: WeaverseClient
 ) => {
+  const defaultData = {
+    rating: 0,
+    reviewNumber: 0,
+    reviews: [],
+  };
   if (!api_token) {
-    return {
-      error: "Missing JUDGEME_PRIVATE_API_TOKEN",
-    };
+    return defaultData;
   }
   let internalId = await getInternalIdByHandle(
     api_token,
     shop_domain,
     handle,
-    weaverse,
+    weaverse
   );
   if (internalId) {
     let data = (await weaverse.fetchWithCache(
       `https://judge.me/api/v1/reviews?${new URLSearchParams({
         api_token,
         shop_domain,
         product_id: internalId,
-      })}`,
+      })}`
     )) as JudgemeReviewsData;
     let reviews = data.reviews;
     let rating =
@@ -60,9 +83,64 @@ export let getJudgemeReviews = async (
     return {
       rating,
       reviewNumber: reviews.length,
+      reviews,
     };
   }
-  return {
-    rating: 0,
-  };
+  return defaultData;
 };
+
+const endpoint = "https://judge.me/api/v1/reviews";
+export let createJudgemeReview = async (
+  api_token: string,
+  shop_domain: string,
+  formData: FormData
+) => {
+  if (!api_token) {
+    return {
+      error: "Missing JUDGEME_PRIVATE_API_TOKEN",
+    };
+  }
+  const body = formDataToObject(formData);
+  const url = new URL(endpoint);
+  url.searchParams.append("api_token", api_token);
+  url.searchParams.append("shop_domain", shop_domain);
+  const payload = JSON.stringify({
+    shop_domain,
+    platform: "shopify",
+    ...body,
+  });
+
+  try {
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: payload,
+    });
+    const status = response.status;
+    if (response.ok) {
+      return { success: true, status };
+    }
+    return {
+      success: false,
+      message: "Something went wrong! Please try again.",
+      status,
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      success: false,
+      message: "Something went wrong! Please try again.",
+      status: 500,
+    };
+  }
+};
+
+function formDataToObject(formData: FormData) {
+  const data: any = {};
+  for (const [key, value] of formData.entries()) {
+    data[key] = value;
+  }
+  return data;
+}

app/modules/account-address-book.tsx

@@ -1,9 +1,9 @@
 import { Form } from "@remix-run/react";
 import type { CustomerAddress } from "@shopify/hydrogen/customer-account-api-types";
 import type { CustomerDetailsFragment } from "customer-accountapi.generated";
+import Button from "~/components/button";
 import { Link } from "~/components/link";
-import { Button } from "~/modules/button";
-import { Text } from "~/modules/text";
+import { Text } from "./text";
 
 export function AccountAddressBook({
   customer,
@@ -13,39 +13,33 @@ export function AccountAddressBook({
   addresses: CustomerAddress[];
 }) {
   return (
-    <>
-      <div className="grid w-full gap-4 p-4 py-6 md:gap-8 md:p-8 lg:p-12">
-        <h3 className="font-bold text-lg">Address Book</h3>
-        <div>
-          {!addresses?.length && (
-            <Text className="mb-1" width="narrow" as="p" size="copy">
-              You haven&apos;t saved any addresses yet.
-            </Text>
-          )}
-          <div className="w-48">
-            <Button
-              to="address/add"
-              className="mt-2 text-sm w-full mb-6"
-              variant="secondary"
-            >
-              Add an Address
-            </Button>
-          </div>
-          {Boolean(addresses?.length) && (
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-              {customer.defaultAddress && (
-                <Address address={customer.defaultAddress} defaultAddress />
-              )}
-              {addresses
-                .filter((address) => address.id !== customer.defaultAddress?.id)
-                .map((address) => (
-                  <Address key={address.id} address={address} />
-                ))}
-            </div>
-          )}
+    <div className="space-y-4">
+      <div className="font-bold">Address Book</div>
+      <div>
+        {!addresses?.length && (
+          <Text className="mb-1" size="fine" width="narrow" as="p">
+            You haven&apos;t saved any addresses yet.
+          </Text>
+        )}
+        <div className="">
+          <Button link="address/add" className="mb-5" variant="primary">
+            Add an Address
+          </Button>
         </div>
+        {Boolean(addresses?.length) && (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+            {customer.defaultAddress && (
+              <Address address={customer.defaultAddress} defaultAddress />
+            )}
+            {addresses
+              .filter((address) => address.id !== customer.defaultAddress?.id)
+              .map((address) => (
+                <Address key={address.id} address={address} />
+              ))}
+          </div>
+        )}
       </div>
-    </>
+    </div>
   );
 }
 
@@ -57,18 +51,20 @@ function Address({
   defaultAddress?: boolean;
 }) {
   return (
-    <div className="lg:p-8 p-6 border border-gray-200 rounded flex flex-col">
+    <div className="p-5 border border-[#B7B7B7] rounded-sm flex flex-col">
       {defaultAddress && (
         <div className="mb-3 flex flex-row">
-          <span className="px-3 py-1 text-xs font-medium rounded-full bg-background/20 text-body/50">
+          <span className="px-3 py-1 text-xs font-medium border text-body/50">
             Default
           </span>
         </div>
       )}
       <ul className="flex-1 flex-row">
         {(address.firstName || address.lastName) && (
-          <li>
-            {`${address.firstName && `${address.firstName} `}${address?.lastName}`}
+          <li className="mb-2">
+            {`${address.firstName && `${address.firstName} `}${
+              address?.lastName
+            }`}
           </li>
         )}
         {address.formatted?.map((line: string) => (
@@ -79,7 +75,7 @@ function Address({
       <div className="flex flex-row font-medium mt-6 items-baseline">
         <Link
           to={`/account/address/${encodeURIComponent(address.id)}`}
-          className="text-left underline text-sm"
+          className="text-left underline text-body/50"
           prefetch="intent"
         >
           Edit