feat: ✨ policies page

src/lib/server/data/queries.ts

@@ -280,3 +280,35 @@ export const UPDATE_CART_BUYER = gql`
  }
  }
 `
+
+export const POLICY_CONTENT_QUERY = gql`
+ fragment Policy on ShopPolicy {
+ body
+ handle
+ id
+ title
+ url
+ }
+ query policy_query(
+ $language: LanguageCode
+ $privacyPolicy: Boolean!
+ $shippingPolicy: Boolean!
+ $termsOfService: Boolean!
+ $refundPolicy: Boolean!
+ ) @inContext(language: $language) {
+ shop {
+ privacyPolicy @include(if: $privacyPolicy) {
+ ...Policy
+ }
+ shippingPolicy @include(if: $shippingPolicy) {
+ ...Policy
+ }
+ termsOfService @include(if: $termsOfService) {
+ ...Policy
+ }
+ refundPolicy @include(if: $refundPolicy) {
+ ...Policy
+ }
+ }
+ }
+`

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

@@ -0,0 +1,42 @@
+import type { PageServerLoad } from './$types'
+import { POLICY_CONTENT_QUERY } from '$lib/server/data'
+import invariant from 'tiny-invariant'
+import { error } from '@sveltejs/kit'
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+ const { storefront, locale } = locals
+ const { handle } = params
+
+ const policyName = handle.replace(
+ /-([a-z])/g,
+ (_: unknown, m1: string) => m1.toUpperCase(),
+ ) as 'privacyPolicy' | 'shippingPolicy' | 'termsOfService' | 'refundPolicy'
+
+ const { data } = await storefront.query({
+ query: POLICY_CONTENT_QUERY,
+ variables: {
+ privacyPolicy: false,
+ shippingPolicy: false,
+ termsOfService: false,
+ refundPolicy: false,
+ [policyName]: true,
+ language: locale.language,
+ }
+ })
+
+ invariant(data, 'No data returned from Shopify API')
+
+ const policy = data.shop?.[policyName]
+
+ if (!policy) {
+ throw error(404, 'Policy not found')
+ }
+
+ return {
+ seo: {
+ title: policy.title,
+ description: policy.body,
+ },
+ policy,
+ }
+}

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+import type { PageServerData } from './$types'
+
+export let data: PageServerData
+$: ({ policy } = data)
+</script>
+
+<h1>{policy.title}</h1>
+<div>{@html policy.body}</div>