docs: added customer storefront guides (#7685)

* added customer guides

* fixes to sidebar

* remove old customer registration guide

* fix build error

* generate files

* run linter

www/apps/resources/app/storefront-development/checkout/address/page.mdx

@@ -29,19 +29,19 @@ For example:
     city,
     country_code,
     province,
-    phone
+    phone,
   }
 
   fetch(`http://localhost:9000/store/carts/${cartId}`, {
     credentials: "include",
     method: "POST",
     headers: {
-      "Content-Type": "application/json"
+      "Content-Type": "application/json",
     },
     body: JSON.stringify({
       shipping_address: address,
-      billing_address: address
-    })
+      billing_address: address,
+    }),
   })
   .then((res) => res.json())
   .then(({ cart }) => {
@@ -64,10 +64,10 @@ export const highlights = [
   ```tsx highlights={highlights}
   "use client" // include with Next.js 13+
 
-  import { useState } from "react";
-  import { useCart } from "../../../providers/cart";
-
-  export default function CheckoutAddressStep () {
+  import { useState } from "react"
+  import { useCart } from "../../../providers/cart"
+  
+  export default function CheckoutAddressStep() {
     const { cart, setCart } = useCart()
     const [loading, setLoading] = useState(false)
     const [firstName, setFirstName] = useState("")
@@ -99,19 +99,19 @@ export const highlights = [
         city,
         country_code: countryCode,
         province,
-        phone: phoneNumber
+        phone: phoneNumber,
       }
 
       fetch(`http://localhost:9000/store/carts/${cart.id}`, {
         credentials: "include",
         method: "POST",
         headers: {
-          "Content-Type": "application/json"
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           shipping_address: address,
-          billing_address: address
-        })
+          billing_address: address,
+        }),
       })
       .then((res) => res.json())
       .then(({ cart: updatedCart }) => {

www/apps/resources/app/storefront-development/checkout/complete-cart/page.mdx

@@ -17,7 +17,7 @@ fetch(
   `http://localhost:9000/store/carts/${cartId}/complete`,
   {
     credentials: "include",
-    method: "POST"
+    method: "POST",
   }
 )
 .then((res) => res.json())
@@ -65,7 +65,7 @@ export const highlights = [
 import { useState } from "react"
 import { useCart } from "../../providers/cart"
 
-export default function SystemDefaultPayment () {
+export default function SystemDefaultPayment() {
   const { cart, refreshCart } = useCart()
   const [loading, setLoading] = useState(false)
 
@@ -87,7 +87,7 @@ export default function SystemDefaultPayment () {
       `http://localhost:9000/store/carts/${cart.id}/complete`,
       {
         credentials: "include",
-        method: "POST"
+        method: "POST",
       }
     )
     .then((res) => res.json())

www/apps/resources/app/storefront-development/checkout/email/page.mdx

@@ -26,11 +26,11 @@ For example:
     credentials: "include",
     method: "POST",
     headers: {
-      "Content-Type": "application/json"
+      "Content-Type": "application/json",
     },
     body: JSON.stringify({
-      email
-    })
+      email,
+    }),
   })
   .then((res) => res.json())
   .then(({ cart }) => {
@@ -55,7 +55,7 @@ export const highlights = [
   import { useState } from "react"
   import { useCart } from "../../../providers/cart"
 
-  export default function CheckoutEmailStep () {
+  export default function CheckoutEmailStep() {
     const { cart, setCart } = useCart()
     const [email, setEmail] = useState("")
     const [loading, setLoading] = useState(false)
@@ -80,11 +80,11 @@ export const highlights = [
         credentials: "include",
         method: "POST",
         headers: {
-          "Content-Type": "application/json"
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          email
-        })
+          email,
+        }),
       })
       .then((res) => res.json())
       .then(({ cart: updatedCart }) => {

www/apps/resources/app/storefront-development/checkout/payment/page.mdx

@@ -57,7 +57,7 @@ export const fetchHighlights = [
       `http://localhost:9000/store/payment-providers?region_id=${
         cart.region_id
       }`, {
-        credentials: "include"
+        credentials: "include",
       })
       .then((res) => res.json())
 
@@ -77,14 +77,14 @@ export const fetchHighlights = [
           credentials: "include",
           method: "POST",
           headers: {
-            "Content-Type": "application/json"
+            "Content-Type": "application/json",
           },
           body: JSON.stringify({
             cart_id: cart.id,
             region_id: cart.region_id,
             currency_code: cart.currency_code,
-            amount: cart.total
-          })
+            amount: cart.total,
+          }),
         }
       )
       .then((res) => res.json())
@@ -100,21 +100,21 @@ export const fetchHighlights = [
       credentials: "include",
       method: "POST",
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        provider_id: selectedPaymentProviderId
-      })
+        provider_id: selectedPaymentProviderId,
+      }),
     })
     .then((res) => res.json())
 
     // re-fetch cart
     const { 
-      cart: updatedCart
+      cart: updatedCart,
     } = await fetch(
       `http://localhost:9000/store/carts/${cart.id}`, 
       {
-        credentials: "include"
+        credentials: "include",
       }
     )
     .then((res) => res.json())
@@ -171,14 +171,14 @@ export const highlights = [
   import { useCart } from "../../../providers/cart"
   import { HttpTypes } from "@medusajs/types"
 
-  export default function CheckoutPaymentStep () {
+  export default function CheckoutPaymentStep() {
     const { cart, setCart } = useCart()
     const [paymentProviders, setPaymentProviders] = useState<
       HttpTypes.StorePaymentProvider[]
     >([])
     const [
       selectedPaymentProvider, 
-      setSelectedPaymentProvider
+      setSelectedPaymentProvider,
     ] = useState<string | undefined>()
     const [loading, setLoading] = useState(false)
 
@@ -190,7 +190,7 @@ export const highlights = [
       fetch(`http://localhost:9000/store/payment-providers?region_id=${
         cart.region_id
       }`, {
-        credentials: "include"
+        credentials: "include",
       })
       .then((res) => res.json())
       .then(({ payment_providers }) => {
@@ -221,14 +221,14 @@ export const highlights = [
             credentials: "include",
             method: "POST",
             headers: {
-              "Content-Type": "application/json"
+              "Content-Type": "application/json",
             },
             body: JSON.stringify({
               cart_id: cart.id,
               region_id: cart.region_id,
               currency_code: cart.currency_code,
-              amount: cart.total
-            })
+              amount: cart.total,
+            }),
           }
         )
         .then((res) => res.json())
@@ -244,21 +244,21 @@ export const highlights = [
         credentials: "include",
         method: "POST",
         headers: {
-          "Content-Type": "application/json"
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          provider_id: selectedPaymentProvider
-        })
+          provider_id: selectedPaymentProvider,
+        }),
       })
       .then((res) => res.json())
 
       // re-fetch cart
       const { 
-        cart: updatedCart
+        cart: updatedCart,
       } = await fetch(
         `http://localhost:9000/store/carts/${cart.id}`, 
         {
-          credentials: "include"
+          credentials: "include",
         }
       )
       .then((res) => res.json())

www/apps/resources/app/storefront-development/checkout/payment/stripe/page.mdx

@@ -75,7 +75,7 @@ import {
   CardElement, 
   Elements, 
   useElements, 
-  useStripe
+  useStripe,
 } from "@stripe/react-stripe-js"
 import { loadStripe } from "@stripe/stripe-js"
 import { useCart } from "../../providers/cart"
@@ -102,7 +102,7 @@ export default function StripePayment() {
 }
 
 const StripeForm = ({ 
-  clientSecret
+  clientSecret,
 }: {
   clientSecret: string | undefined
 }) => {
@@ -157,7 +157,7 @@ const StripeForm = ({
         `http://localhost:9000/store/carts/${cart.id}/complete`,
         {
           credentials: "include",
-          method: "POST"
+          method: "POST",
         }
       )
       .then((res) => res.json())

www/apps/resources/app/storefront-development/checkout/shipping/page.mdx

@@ -32,7 +32,7 @@ export const fetchHighlights = [
       `http://localhost:9000/store/shipping-options?cart_id=${
         cart.id
       }`, {
-        credentials: "include"
+        credentials: "include",
       }
     )
     .then((res) => res.json())
@@ -49,15 +49,15 @@ export const fetchHighlights = [
       credentials: "include",
       method: "POST",
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         option_id: selectedShippingOptionId,
         data: {
           // TODO add any data necessary for
           // fulfillment provider
-        }
-      })
+        },
+      }),
     })
     .then((res) => res.json())
     .then(({ cart }) => {
@@ -84,7 +84,7 @@ export const highlights = [
   import { useCart } from "../../../providers/cart"
   import { HttpTypes } from "@medusajs/types"
 
-  export default function CheckoutShippingStep () {
+  export default function CheckoutShippingStep() {
     const { cart, setCart } = useCart()
     const [loading, setLoading] = useState(false)
     const [shippingOptions, setShippingOptions] = useState<
@@ -92,7 +92,7 @@ export const highlights = [
     >([])
     const [
       selectedShippingOption, 
-      setSelectedShippingOption
+      setSelectedShippingOption,
     ] = useState<string | undefined>()
 
     useEffect(() => {
@@ -102,7 +102,7 @@ export const highlights = [
       fetch(`http://localhost:9000/store/shipping-options?cart_id=${
         cart.id
       }`, {
-        credentials: "include"
+        credentials: "include",
       })
       .then((res) => res.json())
       .then(({ shipping_options }) => {
@@ -126,15 +126,15 @@ export const highlights = [
         credentials: "include",
         method: "POST",
         headers: {
-          "Content-Type": "application/json"
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           option_id: selectedShippingOption,
           data: {
             // TODO add any data necessary for
             // fulfillment provider
-          }
-        })
+          },
+        }),
       })
       .then((res) => res.json())
       .then(({ cart: updatedCart }) => {