Merge pull request #124 from commercelayer/my-account-back-to-shop

Add "back to shop" feature to my account

Author: marcomontalbano

packages/docs/stories/my-account/cl-my-account-link.stories.ts

@@ -14,7 +14,7 @@ export default meta
 
 const Template: StoryFn<Args> = (args) => {
   return create(html`
-    <cl-my-account-link target=${args.target ?? nothing}>
+    <cl-my-account-link target=${args.target ?? nothing} back-to-shop=${args["back-to-shop"] ?? nothing}>
       Go to my account
     </cl-my-account-link>
   `)

packages/drop-in/src/apis/commercelayer/account.ts

@@ -2,7 +2,11 @@ import { getAccessToken } from "@/apis/commercelayer/client"
 import { getConfig, getOrganizationConfig } from "@/apis/commercelayer/config"
 import { getClosestLocationHref } from "@/utils/url"
 
-export async function getMyAccountUrl(): Promise<string | undefined> {
+export async function getMyAccountUrl({
+  returnUrl,
+}: {
+  returnUrl?: string
+}): Promise<string | undefined> {
   const config = getConfig()
   const { ownerType } = await getAccessToken(config)
 
@@ -13,7 +17,7 @@ export async function getMyAccountUrl(): Promise<string | undefined> {
   const organizationConfig = await getOrganizationConfig()
   const lang = config.defaultAttributes?.orders?.language_code
 
-  return `${organizationConfig.links.my_account}${lang != null ? `&lang=${lang}` : ""}`
+  return `${organizationConfig.links.my_account}${lang != null ? `&lang=${lang}` : ""}${returnUrl != null ? `&returnUrl=${returnUrl}` : ""}`
 }
 
 export async function getIdentityUrl(

packages/drop-in/src/apis/commercelayer/client.ts

@@ -105,6 +105,20 @@ export async function createClient(config: Config) {
   CommerceLayer({
     accessToken: token.accessToken,
     domain: config.domain,
+    fetch: async (input, init) => {
+      const response = await fetch(input, init)
+
+      if (response.status === 401) {
+        const config = getConfig()
+        const clientCredentials = configToClientCredentials(config)
+        const salesChannel = getSalesChannel(clientCredentials)
+        await salesChannel.removeAuthorization()
+
+        window.location.reload()
+      }
+
+      return response
+    },
   })
 
   return {

packages/drop-in/src/components.d.ts

@@ -145,6 +145,10 @@ export namespace Components {
         "type": "guest" | "customer" | undefined;
     }
     interface ClMyAccountLink {
+        /**
+          * Providing this attribute will enable the "Back to shop" and "Logout" navigation links on the My Account page. When set to `true`, the link will redirect to the current page URL. You can also provide a custom URL string.
+         */
+        "backToShop"?: "true" | string;
         /**
           * The browsing context in which to open the linked URL (a tab, a window, or an <iframe>).
           * @default "_self"
@@ -407,6 +411,10 @@ declare namespace LocalJSX {
         "type": "guest" | "customer" | undefined;
     }
     interface ClMyAccountLink {
+        /**
+          * Providing this attribute will enable the "Back to shop" and "Logout" navigation links on the My Account page. When set to `true`, the link will redirect to the current page URL. You can also provide a custom URL string.
+         */
+        "backToShop"?: "true" | string;
         /**
           * The browsing context in which to open the linked URL (a tab, a window, or an <iframe>).
           * @default "_self"

packages/drop-in/src/components/cl-identity-link/cl-identity-link.tsx

@@ -90,7 +90,7 @@ export class ClIdentityLink {
             if (this.type === "logout") {
               event.preventDefault()
               void logout().then(() => {
-                location.reload()
+                window.location.reload()
               })
             }
           }}

packages/drop-in/src/components/cl-my-account-link/cl-my-account-link.tsx

@@ -10,6 +10,7 @@ import {
 } from "@stencil/core"
 import { getMyAccountUrl } from "@/apis/commercelayer/account"
 import { listenTo } from "@/apis/event"
+import { getClosestLocationHref } from "@/utils/url"
 
 @Component({
   tag: "cl-my-account-link",
@@ -24,14 +25,29 @@ export class ClMyAccountLink {
   @Prop({ reflect: true }) target: "_self" | "_blank" | "_parent" | "_top" =
     "_self"
 
+  /**
+   * Providing this attribute will enable the "Back to shop" and "Logout" navigation links on the My Account page.
+   * When set to `true`, the link will redirect to the current page URL.
+   * You can also provide a custom URL string.
+   */
+  @Prop({ reflect: true, mutable: true }) backToShop?: "true" | string
+
   @State() href: string | undefined
 
   async componentWillLoad(): Promise<void> {
     listenTo("cl-identity-gettoken", async () => {
-      this.href = await getMyAccountUrl()
+      if (isTrue(this.backToShop)) {
+        this.backToShop = getClosestLocationHref()
+      }
+
+      this.href = await getMyAccountUrl({ returnUrl: this.backToShop })
     })
 
-    this.href = await getMyAccountUrl()
+    if (isTrue(this.backToShop)) {
+      this.backToShop = getClosestLocationHref()
+    }
+
+    this.href = await getMyAccountUrl({ returnUrl: this.backToShop })
   }
 
   render(): JSX.Element {
@@ -44,3 +60,7 @@ export class ClMyAccountLink {
     )
   }
 }
+
+function isTrue(value: unknown): value is true {
+  return value === true || value === "true"
+}

packages/drop-in/src/components/cl-my-account-link/readme.md

@@ -7,9 +7,10 @@
 
 ## Properties
 
-| Property | Attribute | Description                                                                                   | Type                                         | Default   |
-| -------- | --------- | --------------------------------------------------------------------------------------------- | -------------------------------------------- | --------- |
-| `target` | `target`  | The browsing context in which to open the linked URL (a tab, a window, or an <iframe>). | `"_blank" \| "_parent" \| "_self" \| "_top"` | `"_self"` |
+| Property     | Attribute      | Description                                                                                                                                                                                                                 | Type                                         | Default     |
+| ------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
+| `backToShop` | `back-to-shop` | Providing this attribute will enable the "Back to shop" and "Logout" navigation links on the My Account page. When set to `true`, the link will redirect to the current page URL. You can also provide a custom URL string. | `string \| undefined`                        | `undefined` |
+| `target`     | `target`       | The browsing context in which to open the linked URL (a tab, a window, or an <iframe>).                                                                                                                               | `"_blank" \| "_parent" \| "_self" \| "_top"` | `"_self"`   |
 
 
 ----------------------------------------------

packages/drop-in/src/index.html

@@ -86,7 +86,7 @@
                 <cl-identity-link type="signup">Signup</cl-identity-link>
               </cl-identity-status>
               <cl-identity-status type="customer">
-                <cl-my-account-link target="_blank" class="mr-4">My Account</cl-my-account-link>
+                <cl-my-account-link class="mr-4" back-to-shop="true">My Account</cl-my-account-link>
                 <cl-identity-link type="logout">Logout</cl-identity-link>
               </cl-identity-status>
             </div>