Return specific error message if location doesn't exist

src/routes/[country]/[location]/index.svelte

@@ -27,8 +27,6 @@
     export let totalPhotos: number
     export let product: any
 
-    console.log(product)
-
     dayjs.extend(relativeTime)
 
     const { params } = $page

src/routes/[country]/[location]/index.ts

@@ -76,8 +76,11 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
         `)
         const { data: { location: location, photos, total_published, product }} = res
 
-        if (params.country !== location[0].country.slug || !location.length) {
-            return { status: 404 }
+        if (!location.length || location.length && params.country !== location[0].country.slug) {
+            return {
+                status: 404,
+                body: Error("This location is not available… yet,"),
+            }
         }
 
         return {

src/routes/__error.svelte

@@ -17,6 +17,7 @@
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
     export let status: number
+    export let message: string = undefined
 
     const { locations }: any = getContext('global')
     const errors = {
@@ -29,7 +30,7 @@
             message: 'Server error…',
         },
     }
-    const defaultMessage = 'You are welcome to explore our locations or shop some products'
+    const defaultMessage = 'but you are welcome to explore our locations or discover our shop!'
 </script>
 
 <Metas
@@ -39,7 +40,7 @@
 <PageTransition name="page-error">
     <div class="page-error__top">
         <Heading
-            text="{errors[status].message} {defaultMessage}"
+            text="{message ?? errors[status].message} {defaultMessage}"
         />
 
         <ListCTAs>
@@ -87,10 +88,11 @@
 <script context="module" lang="ts">
     import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
 
-    export async function load ({ status }: LoadEvent): Promise<LoadOutput> {
+    export async function load ({ status, error: { message } }: LoadEvent): Promise<LoadOutput> {
         return {
             props: {
                 status,
+                message,
             },
         }
     }