build thank you and failed payment pages

app/icons/check/check.tsx

@@ -0,0 +1,11 @@
+import type { CheckProps } from './types'
+
+const Check = ({ className }: CheckProps) => {
+  return (
+    <svg viewBox="0 0 26 21" fill="none" className={className ? className : ''}>
+      <path d="M1.75391 11.3328L8.50542 18.0843L24.3085 2.28125" strokeWidth="4"/>
+    </svg>
+  )
+}
+
+export default Check

app/icons/check/index.ts

@@ -0,0 +1 @@
+export { default } from './check'

app/icons/check/types.ts

@@ -0,0 +1,3 @@
+export interface CheckProps {
+  className?: string
+}

app/icons/index.ts

@@ -7,3 +7,4 @@ export { default as BurgerMenu } from './burger-menu'
 export { default as PurchaseCart } from './purchase-cart'
 export { default as Cross } from './cross'
 export { default as TrashCan } from './trash-can'
+export { default as Check } from './check'

app/routes/checkout/payment-failed.tsx

@@ -0,0 +1,23 @@
+import { Text, ButtonLink } from '~/components'
+import trackPageView from '~/utils/track-page-view'
+
+import type { LoaderArgs } from '@remix-run/node'
+
+export const loader = async ({ request }: LoaderArgs) => {
+  trackPageView(request)
+  return null
+}
+
+export default () => {
+  return (
+    <div>
+      <Text variant="heading-4" className="mb-6">
+        Sorry, there was an issue with your payment. Please try again later
+      </Text>
+
+      <ButtonLink to="/" variant="primary" className='text-center'>
+        Go Home
+      </ButtonLink>
+    </div>
+  )
+}

app/routes/checkout/payment.tsx

@@ -7,7 +7,7 @@ import { Text, PaymentForm } from '~/components'
 import { getAccessToken } from "~/utils/auth-storage"
 import { getSessionId } from "~/utils/session-storage"
 import { startPayment } from "~/models/payment"
-import { getLastStartedCart } from "~/models/purchase-cart"
+import { getCartDetails } from "~/models/purchase-cart"
 import { Elements } from "@stripe/react-stripe-js";
 import stripeStylesheetUrl from "~/styles/stripe-elements.css";
 
@@ -21,17 +21,15 @@ export const links: LinksFunction = () => {
 export const loader = async ({ request }: LoaderArgs) => {
   const url = new URL(request.url)
   const cartUuid = url.searchParams.get('cart_uuid')
+  invariant(cartUuid, 'cart_uuid param must be present')
 
   const accessToken = await getAccessToken(request)
   invariant(accessToken, 'user must be authenticated')
 
   const sessionId = await getSessionId(request)
   invariant(sessionId, 'session must exist')
 
-  const activeCart = await getLastStartedCart(sessionId)
-  invariant(activeCart, 'cart must be started')
-
-  const payment = await startPayment(accessToken, activeCart.uuid)
+  const payment = await startPayment(accessToken, cartUuid)
   const stripeKey = process.env.STRIPE_PUBLIC_API_KEY
   const redirectUrl = `${process.env.BASE_URL}/checkout?payment_uuid=${payment.uuid}&cart_uuid=${cartUuid}`
 

app/routes/checkout/shipping-info/index.tsx

@@ -30,7 +30,7 @@ export const loader = async ({ request }: LoaderArgs) => {
   invariant(accessToken, 'user is not authenticated')
 
   const locations = await getAllLocations(accessToken)
-  if (!locations.length) return redirect('/checkout/shipping-info/new-location')
+  if (!locations.length) return redirect(`/checkout/shipping-info/new-location?cart_uuid=${cartUuid}`)
 
   return json({ locations, cartUuid })
 }

app/routes/checkout/thank-you.tsx

@@ -1,15 +1,90 @@
+import invariant from 'tiny-invariant'
+import { json } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import { Text, ButtonLink, PurchaseCartSummaryItem } from '~/components'
+import { Check } from '~/icons'
+import { getCartDetails } from '~/models/purchase-cart'
+import { getPayment } from '~/models/payment'
 import trackPageView from "~/utils/track-page-view"
+import { getSessionId } from '~/utils/session-storage'
+import { getAccessToken } from '~/utils/auth-storage'
+import formatCurrency from '~/utils/format-currency'
 
 import type { LoaderArgs } from "@remix-run/node"
 
 export const loader = async ({ request }: LoaderArgs) => {
   trackPageView(request)
 
-  return null
+  const sessionId = await getSessionId(request)
+  invariant(sessionId, 'session must exist')
+
+  const accessToken = await getAccessToken(request)
+  invariant(accessToken, 'user must be authenticated')
+
+  const url = new URL(request.url)
+  const cartUuid = url.searchParams.get('cart_uuid')
+  invariant(cartUuid, 'cart_uuid param must be present')
+
+  const cart = await getCartDetails(sessionId, cartUuid)
+  invariant(cart, 'cart must exist')
+
+  const paymentUuid = url.searchParams.get('payment_uuid')
+  invariant(paymentUuid, 'payment_uuid param must be present')
+
+  const payment = await getPayment(accessToken, paymentUuid)
+  invariant(payment, 'payment must exist')
+
+  return json({ cart, payment })
 }
 
 export default () => {
+  const { cart, payment } = useLoaderData<typeof loader>()
+
+  const { items } = cart
+  const { amount } = payment
+  const formattedAmount = formatCurrency(amount)
+
   return (
-    <h1>THANK YOU!</h1>
+    <div>
+      <div className="bg-orange w-16 h-16 flex items-center justify-center rounded-full p-5 mb-6 sm:mb-8">
+        <Check className="[&>path]:stroke-white"/>
+      </div>
+
+      <Text variant="heading-5" className="mb-4" as="h3">
+        Thank you for your order
+      </Text>
+
+      <Text variant="body" className="mb-6 opacity-50 sm:mb-8">
+        You will receive an email confirmation shortly
+      </Text>
+
+      <div className="mb-6 flex flex-col sm:flex-row w-full sm:mb-12">
+        <div className="bg-gray rounded-tl-lg rounded-tr-lg p-6 flex-1 sm:rounded-tr-none sm:rounded-bl-lg">
+          <PurchaseCartSummaryItem cartItem={items[0]} />
+
+          { items.length > 1 && (
+            <>
+              <hr className="my-3 opacity-10" />
+              <Text variant="body" as="span" className="!font-bold opacity-50 block text-center">
+                and { items.length - 1 } other item(s)
+              </Text>
+            </>
+          )}
+        </div>
+        <div className="bg-black px-6 py-4 rounded-bl-lg rounded-br-lg flex-0.5 sm:rounded-bl-none sm:rounded-tr-lg flex flex-col justify-center">
+          <Text variant="body" as="span" className="block !text-white opacity-50 mb-2 uppercase">
+            Grand Total
+          </Text>
+
+          <Text variant="heading-6" as="span" className="!font-bold !text-white">
+            { formattedAmount }
+          </Text>
+        </div>
+      </div>
+
+      <ButtonLink variant="primary" to="/" className="text-center">
+        Back To Home
+      </ButtonLink>
+    </div>
   )
 }