Skip to content

Commit 441a608

Browse files
hta218hta218
authored
Merge pull request #246 from Weaverse/dev
v3.2.3
2 parents 8c6045e + 8b86aa9 commit 441a608

15 files changed

Lines changed: 162 additions & 243 deletions

‎app/components/root/generic-error.tsx‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Link from "~/components/link";
2-
import { PageHeader, Text } from "~/modules/text";
2+
import { Section } from "~/components/section";
33

44
export function GenericError({
55
error,
@@ -17,31 +17,32 @@ export function GenericError({
1717
}
1818

1919
return (
20-
<>
21-
<PageHeader heading={heading} as="div">
22-
<Text width="narrow" as="p">
23-
{description}
24-
</Text>
25-
{error?.stack && (
26-
<pre
27-
style={{
28-
padding: "2rem",
29-
background: "hsla(10, 50%, 50%, 0.1)",
30-
color: "red",
31-
overflow: "auto",
32-
maxWidth: "100%",
33-
}}
34-
suppressHydrationWarning
35-
dangerouslySetInnerHTML={{
36-
__html: addLinksToStackTrace(error.stack),
37-
}}
38-
/>
39-
)}
40-
<Link variant="outline" to="/">
41-
Take me to the home page
42-
</Link>
43-
</PageHeader>
44-
</>
20+
<Section
21+
width="fixed"
22+
verticalPadding="large"
23+
containerClassName="space-y-4 flex justify-center items-center flex-col"
24+
>
25+
<h4 className="font-medium">{heading}</h4>
26+
<p>{description}</p>
27+
{error?.stack && (
28+
<pre
29+
style={{
30+
padding: "2rem",
31+
background: "hsla(10, 50%, 50%, 0.1)",
32+
color: "red",
33+
overflow: "auto",
34+
maxWidth: "100%",
35+
}}
36+
suppressHydrationWarning
37+
dangerouslySetInnerHTML={{
38+
__html: addLinksToStackTrace(error.stack),
39+
}}
40+
/>
41+
)}
42+
<Link variant="outline" to="/" className="w-fit">
43+
Take me to the home page
44+
</Link>
45+
</Section>
4546
);
4647
}
4748

‎app/lib/root.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,8 @@ async function getColorsConfigs(context: AppLoadContext) {
131131
return metaobjects.nodes.map(({ id, name, value }) => {
132132
return {
133133
id,
134-
name: name.value,
135-
value: value.value,
134+
name: name?.value,
135+
value: value?.value,
136136
};
137137
}) as ColorSwatch[];
138138
}

‎app/modules/text.tsx‎

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -97,64 +97,6 @@ export function Heading({
9797
);
9898
}
9999

100-
export function Section({
101-
as: Component = "section",
102-
children,
103-
className,
104-
divider = "none",
105-
display = "grid",
106-
heading,
107-
padding = "all",
108-
...props
109-
}: {
110-
as?: React.ElementType;
111-
children?: React.ReactNode;
112-
className?: string;
113-
divider?: "none" | "top" | "bottom" | "both";
114-
display?: "grid" | "flex";
115-
heading?: string;
116-
padding?: "x" | "y" | "swimlane" | "all";
117-
[key: string]: any;
118-
}) {
119-
const paddings = {
120-
x: "px-6 md:px-8 lg:px-12",
121-
y: "py-6 md:py-8 lg:py-12",
122-
swimlane: "pt-4 md:pt-8 lg:pt-12 md:pb-4 lg:pb-8",
123-
all: "p-6 md:p-8 lg:p-12",
124-
};
125-
126-
const dividers = {
127-
none: "border-none",
128-
top: "border-t border-line-subtle",
129-
bottom: "border-b border-line-subtle",
130-
both: "border-y border-line-subtle",
131-
};
132-
133-
const displays = {
134-
flex: "flex",
135-
grid: "grid",
136-
};
137-
138-
const styles = clsx(
139-
"w-full gap-4 md:gap-8",
140-
displays[display],
141-
missingClass(className, "\\mp[xy]?-") && paddings[padding],
142-
dividers[divider],
143-
className,
144-
);
145-
146-
return (
147-
<Component {...props} className={styles}>
148-
{heading && (
149-
<Heading size="lead" className={padding === "y" ? paddings.x : ""}>
150-
{heading}
151-
</Heading>
152-
)}
153-
{children}
154-
</Component>
155-
);
156-
}
157-
158100
export function PageHeader({
159101
children,
160102
className,

‎app/routes/($locale).account.$.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { type LoaderFunctionArgs, redirect } from "@shopify/remix-oxygen";
33
// fallback wild card for all unauthenticated routes in account section
44
export async function loader({ context, params }: LoaderFunctionArgs) {
55
await context.customerAccount.handleAuthStatus();
6-
7-
const locale = params.locale;
6+
let locale = params.locale;
87
return redirect(locale ? `/${locale}/account` : "/account");
98
}

‎app/routes/($locale).account.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import {
99
} from "@remix-run/react";
1010
import { flattenConnection } from "@shopify/hydrogen";
1111
import { type LoaderFunctionArgs, defer } from "@shopify/remix-oxygen";
12-
import type { CustomerDetailsFragment } from "customer-accountapi.generated";
12+
import type {
13+
CustomerDetailsFragment,
14+
CustomerDetailsQuery,
15+
} from "customer-accountapi.generated";
1316
import { Suspense } from "react";
1417
import { AccountDetails } from "~/components/account/account-details";
1518
import { AccountAddressBook } from "~/components/account/address-book";
@@ -29,9 +32,10 @@ import {
2932
export let headers = routeHeaders;
3033

3134
export async function loader({ context }: LoaderFunctionArgs) {
32-
let { data, errors } = await context.customerAccount.query(
33-
CUSTOMER_DETAILS_QUERY,
34-
);
35+
let { data, errors } =
36+
await context.customerAccount.query<CustomerDetailsQuery>(
37+
CUSTOMER_DETAILS_QUERY,
38+
);
3539

3640
/**
3741
* If the customer failed to load, we assume their access token is invalid.

‎app/routes/($locale).account_.authorize.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { LoaderFunctionArgs } from "@shopify/remix-oxygen";
22

3-
export async function loader({ context, params }: LoaderFunctionArgs) {
3+
export async function loader({ context }: LoaderFunctionArgs) {
44
return context.customerAccount.authorize();
55
}

‎app/routes/($locale).account_.login.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { LoaderFunctionArgs } from "@shopify/remix-oxygen";
22

3-
export async function loader({ params, request, context }: LoaderFunctionArgs) {
3+
export async function loader({ context }: LoaderFunctionArgs) {
44
return context.customerAccount.login();
55
}

‎app/routes/($locale).account_.logout.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,10 @@ export async function doLogout(context: AppLoadContext) {
1111
}
1212

1313
export async function loader({ params }: LoaderFunctionArgs) {
14-
const locale = params.locale;
14+
let locale = params.locale;
1515
return redirect(locale ? `/${locale}` : "/");
1616
}
1717

18-
export const action: ActionFunction = async ({
19-
context,
20-
}: ActionFunctionArgs) => {
18+
export let action: ActionFunction = async ({ context }: ActionFunctionArgs) => {
2119
return doLogout(context);
2220
};

‎app/routes/($locale).policies.$policyHandle.tsx‎

Lines changed: 35 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,65 @@ import { type LoaderFunctionArgs, json } from "@shopify/remix-oxygen";
33
import invariant from "tiny-invariant";
44
import { routeHeaders } from "~/data/cache";
55
import { seoPayload } from "~/lib/seo.server";
6-
import { PageHeader, Section } from "~/modules/text";
7-
import { Button } from "~/modules/button";
6+
import type { PoliciesHandleQuery } from "storefrontapi.generated";
7+
import { Section } from "~/components/section";
8+
import { BreadCrumb } from "~/components/breadcrumb";
9+
import Link from "~/components/link";
810

9-
export const headers = routeHeaders;
11+
export let headers = routeHeaders;
1012

1113
export async function loader({ request, params, context }: LoaderFunctionArgs) {
1214
invariant(params.policyHandle, "Missing policy handle");
1315

14-
const policyName = params.policyHandle.replace(
16+
let policyName = params.policyHandle.replace(
1517
/-([a-z])/g,
1618
(_: unknown, m1: string) => m1.toUpperCase(),
1719
) as "privacyPolicy" | "shippingPolicy" | "termsOfService" | "refundPolicy";
1820

19-
const data = await context.storefront.query(POLICY_CONTENT_QUERY, {
20-
variables: {
21-
privacyPolicy: false,
22-
shippingPolicy: false,
23-
termsOfService: false,
24-
refundPolicy: false,
25-
[policyName]: true,
26-
language: context.storefront.i18n.language,
21+
let data = await context.storefront.query<PoliciesHandleQuery>(
22+
POLICY_CONTENT_QUERY,
23+
{
24+
variables: {
25+
privacyPolicy: false,
26+
shippingPolicy: false,
27+
termsOfService: false,
28+
refundPolicy: false,
29+
[policyName]: true,
30+
language: context.storefront.i18n.language,
31+
},
2732
},
28-
});
33+
);
2934

3035
invariant(data, "No data returned from Shopify API");
31-
const policy = data.shop?.[policyName];
36+
let policy = data.shop?.[policyName];
3237

3338
if (!policy) {
3439
throw new Response(null, { status: 404 });
3540
}
3641

37-
const seo = seoPayload.policy({ policy, url: request.url });
42+
let seo = seoPayload.policy({ policy, url: request.url });
3843

3944
return json({ policy, seo });
4045
}
4146

4247
export default function Policies() {
43-
const { policy } = useLoaderData<typeof loader>();
48+
let { policy } = useLoaderData<typeof loader>();
4449

4550
return (
46-
<>
47-
<Section
48-
padding="all"
49-
display="flex"
50-
className="flex-col items-baseline w-full gap-8 md:flex-row"
51-
>
52-
<PageHeader
53-
heading={policy.title}
54-
className="grid items-start flex-grow gap-4 md:sticky top-36 md:w-5/12"
55-
>
56-
<Button
57-
className="justify-self-start"
58-
variant="inline"
59-
to={"/policies"}
60-
>
61-
&larr; Back to Policies
62-
</Button>
63-
</PageHeader>
64-
<div className="flex-grow w-full md:w-7/12">
65-
<div
66-
suppressHydrationWarning
67-
dangerouslySetInnerHTML={{ __html: policy.body }}
68-
className="prose dark:prose-invert"
69-
/>
70-
</div>
71-
</Section>
72-
</>
51+
<Section verticalPadding="medium" width="fixed">
52+
<BreadCrumb page="Policies" className="mb-4" />
53+
<h4 className="mb-4 font-medium">Policies</h4>
54+
<Link variant="underline" to="/policies" className="text-body-subtle">
55+
&larr; Back to Policies
56+
</Link>
57+
<div className="mt-8 lg:mt-20">
58+
<div
59+
suppressHydrationWarning
60+
dangerouslySetInnerHTML={{ __html: policy.body }}
61+
className="prose"
62+
/>
63+
</div>
64+
</Section>
7365
);
7466
}
7567

0 commit comments

Comments
 (0)