feat: ✨ add main policies page

src/lib/server/data/queries.ts

@@ -281,6 +281,36 @@ export const UPDATE_CART_BUYER = gql`
  }
 `
 
+export const POLICIES_QUERY = gql`
+ fragment PolicyIndex on ShopPolicy {
+ id
+ title
+ handle
+ }
+
+ query PoliciesIndex {
+ shop {
+ privacyPolicy {
+ ...PolicyIndex
+ }
+ shippingPolicy {
+ ...PolicyIndex
+ }
+ termsOfService {
+ ...PolicyIndex
+ }
+ refundPolicy {
+ ...PolicyIndex
+ }
+ subscriptionPolicy {
+ id
+ title
+ handle
+ }
+ }
+ }
+`
+
 export const POLICY_CONTENT_QUERY = gql`
  fragment Policy on ShopPolicy {
  body

src/lib/types/index.ts

@@ -16,3 +16,7 @@ export enum CartAction {
  UPDATE_DISCOUNT = 'UPDATE_DISCOUNT',
  UPDATE_BUYER_IDENTITY = 'UPDATE_BUYER_IDENTITY',
 }
+
+export type NonNullableFields<T> = {
+ [P in keyof T]: NonNullable<T[P]>;
+}

src/routes/[[locale]]/policies/+page.server.ts

@@ -0,0 +1,30 @@
+import type { PageServerLoad } from './$types'
+import { POLICIES_QUERY } from '$lib/server/data'
+import invariant from 'tiny-invariant'
+import type { Shop, NonNullableFields, ShopPolicy } from '$lib/types'
+import { error } from '@sveltejs/kit'
+
+export const load: PageServerLoad = async ({ locals }) => {
+ const { storefront } = locals
+
+ const { data } = await storefront.query<{shop: Shop}>({
+ query: POLICIES_QUERY,
+ })
+ invariant(data, 'No data returned from shopify API')
+
+ const { shop } = data
+
+ const policies = Object.values(
+ shop as NonNullableFields<typeof shop>,
+ ).filter(Boolean) as ShopPolicy[]
+
+ if (!policies.length)
+ throw error(404, 'No policies found')
+
+ return {
+ seo: {
+ title: 'Policies',
+ },
+ policies,
+ }
+}

src/routes/[[locale]]/policies/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { PageServerData } from './$types'
+import LocaleLink from '$lib/components/LocaleLink.svelte'
+
+export let data: PageServerData
+const { policies } = data
+</script>
+
+{#each policies as policy}
+ {#if policy.title}
+ <LocaleLink href="/policies/{policy.handle}">
+ <h2>{policy.title}</h2>
+ </LocaleLink>
+ {/if}
+{/each}

src/routes/[[locale]]/policies/[handle]/+page.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 import type { PageServerData } from './$types'
+import LocaleLink from '$lib/components/LocaleLink.svelte'
 
 export let data: PageServerData
 $: ({ policy } = data)
 </script>
 
 <h1>{policy.title}</h1>
+<LocaleLink href="/policies">Back to Policies</LocaleLink>
+
 <div>{@html policy.body}</div>