Merge pull request Weaverse#246 from Weaverse/dev

v3.2.3
Weaverse · Dec 17, 2024 · 441a608 · 441a608
2 parents 8c6045e + 8b86aa9
commit 441a608
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 243 deletions.
diff --git a/app/components/root/generic-error.tsx b/app/components/root/generic-error.tsx
@@ -1,5 +1,5 @@
 import Link from "~/components/link";
-import { PageHeader, Text } from "~/modules/text";
+import { Section } from "~/components/section";
 
 export function GenericError({
   error,
@@ -17,31 +17,32 @@ export function GenericError({
   }
 
   return (
-    <>
-      <PageHeader heading={heading} as="div">
-        <Text width="narrow" as="p">
-          {description}
-        </Text>
-        {error?.stack && (
-          <pre
-            style={{
-              padding: "2rem",
-              background: "hsla(10, 50%, 50%, 0.1)",
-              color: "red",
-              overflow: "auto",
-              maxWidth: "100%",
-            }}
-            suppressHydrationWarning
-            dangerouslySetInnerHTML={{
-              __html: addLinksToStackTrace(error.stack),
-            }}
-          />
-        )}
-        <Link variant="outline" to="/">
-          Take me to the home page
-        </Link>
-      </PageHeader>
-    </>
+    <Section
+      width="fixed"
+      verticalPadding="large"
+      containerClassName="space-y-4 flex justify-center items-center flex-col"
+    >
+      <h4 className="font-medium">{heading}</h4>
+      <p>{description}</p>
+      {error?.stack && (
+        <pre
+          style={{
+            padding: "2rem",
+            background: "hsla(10, 50%, 50%, 0.1)",
+            color: "red",
+            overflow: "auto",
+            maxWidth: "100%",
+          }}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{
+            __html: addLinksToStackTrace(error.stack),
+          }}
+        />
+      )}
+      <Link variant="outline" to="/" className="w-fit">
+        Take me to the home page
+      </Link>
+    </Section>
   );
 }
 

diff --git a/app/lib/root.ts b/app/lib/root.ts
@@ -131,8 +131,8 @@ async function getColorsConfigs(context: AppLoadContext) {
   return metaobjects.nodes.map(({ id, name, value }) => {
     return {
       id,
-      name: name.value,
-      value: value.value,
+      name: name?.value,
+      value: value?.value,
     };
   }) as ColorSwatch[];
 }

diff --git a/app/modules/text.tsx b/app/modules/text.tsx
@@ -97,64 +97,6 @@ export function Heading({
   );
 }
 
-export function Section({
-  as: Component = "section",
-  children,
-  className,
-  divider = "none",
-  display = "grid",
-  heading,
-  padding = "all",
-  ...props
-}: {
-  as?: React.ElementType;
-  children?: React.ReactNode;
-  className?: string;
-  divider?: "none" | "top" | "bottom" | "both";
-  display?: "grid" | "flex";
-  heading?: string;
-  padding?: "x" | "y" | "swimlane" | "all";
-  [key: string]: any;
-}) {
-  const paddings = {
-    x: "px-6 md:px-8 lg:px-12",
-    y: "py-6 md:py-8 lg:py-12",
-    swimlane: "pt-4 md:pt-8 lg:pt-12 md:pb-4 lg:pb-8",
-    all: "p-6 md:p-8 lg:p-12",
-  };
-
-  const dividers = {
-    none: "border-none",
-    top: "border-t border-line-subtle",
-    bottom: "border-b border-line-subtle",
-    both: "border-y border-line-subtle",
-  };
-
-  const displays = {
-    flex: "flex",
-    grid: "grid",
-  };
-
-  const styles = clsx(
-    "w-full gap-4 md:gap-8",
-    displays[display],
-    missingClass(className, "\\mp[xy]?-") && paddings[padding],
-    dividers[divider],
-    className,
-  );
-
-  return (
-    <Component {...props} className={styles}>
-      {heading && (
-        <Heading size="lead" className={padding === "y" ? paddings.x : ""}>
-          {heading}
-        </Heading>
-      )}
-      {children}
-    </Component>
-  );
-}
-
 export function PageHeader({
   children,
   className,

diff --git a/app/routes/($locale).account.$.tsx b/app/routes/($locale).account.$.tsx
@@ -3,7 +3,6 @@ import { type LoaderFunctionArgs, redirect } from "@shopify/remix-oxygen";
 // fallback wild card for all unauthenticated routes in account section
 export async function loader({ context, params }: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
-
-  const locale = params.locale;
+  let locale = params.locale;
   return redirect(locale ? `/${locale}/account` : "/account");
 }
diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx
@@ -9,7 +9,10 @@ import {
 } from "@remix-run/react";
 import { flattenConnection } from "@shopify/hydrogen";
 import { type LoaderFunctionArgs, defer } from "@shopify/remix-oxygen";
-import type { CustomerDetailsFragment } from "customer-accountapi.generated";
+import type {
+  CustomerDetailsFragment,
+  CustomerDetailsQuery,
+} from "customer-accountapi.generated";
 import { Suspense } from "react";
 import { AccountDetails } from "~/components/account/account-details";
 import { AccountAddressBook } from "~/components/account/address-book";
@@ -29,9 +32,10 @@ import {
 export let headers = routeHeaders;
 
 export async function loader({ context }: LoaderFunctionArgs) {
-  let { data, errors } = await context.customerAccount.query(
-    CUSTOMER_DETAILS_QUERY,
-  );
+  let { data, errors } =
+    await context.customerAccount.query<CustomerDetailsQuery>(
+      CUSTOMER_DETAILS_QUERY,
+    );
 
   /**
    * If the customer failed to load, we assume their access token is invalid.

diff --git a/app/routes/($locale).account_.authorize.ts b/app/routes/($locale).account_.authorize.ts
@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@shopify/remix-oxygen";
 
-export async function loader({ context, params }: LoaderFunctionArgs) {
+export async function loader({ context }: LoaderFunctionArgs) {
   return context.customerAccount.authorize();
 }
diff --git a/app/routes/($locale).account_.login.tsx b/app/routes/($locale).account_.login.tsx
@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@shopify/remix-oxygen";
 
-export async function loader({ params, request, context }: LoaderFunctionArgs) {
+export async function loader({ context }: LoaderFunctionArgs) {
   return context.customerAccount.login();
 }
diff --git a/app/routes/($locale).account_.logout.ts b/app/routes/($locale).account_.logout.ts
@@ -11,12 +11,10 @@ export async function doLogout(context: AppLoadContext) {
 }
 
 export async function loader({ params }: LoaderFunctionArgs) {
-  const locale = params.locale;
+  let locale = params.locale;
   return redirect(locale ? `/${locale}` : "/");
 }
 
-export const action: ActionFunction = async ({
-  context,
-}: ActionFunctionArgs) => {
+export let action: ActionFunction = async ({ context }: ActionFunctionArgs) => {
   return doLogout(context);
 };
diff --git a/app/routes/($locale).policies.$policyHandle.tsx b/app/routes/($locale).policies.$policyHandle.tsx
@@ -3,73 +3,65 @@ import { type LoaderFunctionArgs, json } from "@shopify/remix-oxygen";
 import invariant from "tiny-invariant";
 import { routeHeaders } from "~/data/cache";
 import { seoPayload } from "~/lib/seo.server";
-import { PageHeader, Section } from "~/modules/text";
-import { Button } from "~/modules/button";
+import type { PoliciesHandleQuery } from "storefrontapi.generated";
+import { Section } from "~/components/section";
+import { BreadCrumb } from "~/components/breadcrumb";
+import Link from "~/components/link";
 
-export const headers = routeHeaders;
+export let headers = routeHeaders;
 
 export async function loader({ request, params, context }: LoaderFunctionArgs) {
   invariant(params.policyHandle, "Missing policy handle");
 
-  const policyName = params.policyHandle.replace(
+  let policyName = params.policyHandle.replace(
     /-([a-z])/g,
     (_: unknown, m1: string) => m1.toUpperCase(),
   ) as "privacyPolicy" | "shippingPolicy" | "termsOfService" | "refundPolicy";
 
-  const data = await context.storefront.query(POLICY_CONTENT_QUERY, {
-    variables: {
-      privacyPolicy: false,
-      shippingPolicy: false,
-      termsOfService: false,
-      refundPolicy: false,
-      [policyName]: true,
-      language: context.storefront.i18n.language,
+  let data = await context.storefront.query<PoliciesHandleQuery>(
+    POLICY_CONTENT_QUERY,
+    {
+      variables: {
+        privacyPolicy: false,
+        shippingPolicy: false,
+        termsOfService: false,
+        refundPolicy: false,
+        [policyName]: true,
+        language: context.storefront.i18n.language,
+      },
     },
-  });
+  );
 
   invariant(data, "No data returned from Shopify API");
-  const policy = data.shop?.[policyName];
+  let policy = data.shop?.[policyName];
 
   if (!policy) {
     throw new Response(null, { status: 404 });
   }
 
-  const seo = seoPayload.policy({ policy, url: request.url });
+  let seo = seoPayload.policy({ policy, url: request.url });
 
   return json({ policy, seo });
 }
 
 export default function Policies() {
-  const { policy } = useLoaderData<typeof loader>();
+  let { policy } = useLoaderData<typeof loader>();
 
   return (
-    <>
-      <Section
-        padding="all"
-        display="flex"
-        className="flex-col items-baseline w-full gap-8 md:flex-row"
-      >
-        <PageHeader
-          heading={policy.title}
-          className="grid items-start flex-grow gap-4 md:sticky top-36 md:w-5/12"
-        >
-          <Button
-            className="justify-self-start"
-            variant="inline"
-            to={"/policies"}
-          >
-            &larr; Back to Policies
-          </Button>
-        </PageHeader>
-        <div className="flex-grow w-full md:w-7/12">
-          <div
-            suppressHydrationWarning
-            dangerouslySetInnerHTML={{ __html: policy.body }}
-            className="prose dark:prose-invert"
-          />
-        </div>
-      </Section>
-    </>
+    <Section verticalPadding="medium" width="fixed">
+      <BreadCrumb page="Policies" className="mb-4" />
+      <h4 className="mb-4 font-medium">Policies</h4>
+      <Link variant="underline" to="/policies" className="text-body-subtle">
+        &larr; Back to Policies
+      </Link>
+      <div className="mt-8 lg:mt-20">
+        <div
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: policy.body }}
+          className="prose"
+        />
+      </div>
+    </Section>
   );
 }