Sprint 4: Basket Page, Catalog Page Enhancements, and About Us Page Implementation

app/api/TokenCache.ts

@@ -1,6 +1,6 @@
 import { type TokenStore, type TokenCache } from '@commercetools/ts-client'
 
-export class SessionStorageTokenCache implements TokenCache {
+export class LocalStorageTokenCache implements TokenCache {
   private readonly key: string
 
   constructor(key: string) {
@@ -19,25 +19,25 @@ export class SessionStorageTokenCache implements TokenCache {
   }
 
   public get(): TokenStore {
-    const raw = globalThis.sessionStorage.getItem(this.key)
+    const raw = globalThis.localStorage.getItem(this.key)
     const value: unknown = JSON.parse(String(raw))
 
     if (value === null) {
       return { token: '', expirationTime: 0 }
     }
 
-    if (!SessionStorageTokenCache.isTokenStore(value)) {
+    if (!LocalStorageTokenCache.isTokenStore(value)) {
       throw new Error('Token cache not found')
     }
 
     return value
   }
 
   public set(cache: TokenStore): void {
-    globalThis.sessionStorage.setItem(this.key, JSON.stringify(cache))
+    globalThis.localStorage.setItem(this.key, JSON.stringify(cache))
   }
 
   public remove(): void {
-    globalThis.sessionStorage.removeItem(this.key)
+    globalThis.localStorage.removeItem(this.key)
   }
 }

app/api/client.ts

@@ -1,14 +1,15 @@
-import { type AuthMiddlewareOptions, ClientBuilder, type HttpMiddlewareOptions } from '@commercetools/ts-client'
+import { ClientBuilder, type HttpMiddlewareOptions } from '@commercetools/ts-client'
 import {
+  type ByProjectKeyMeRequestBuilder,
   type ByProjectKeyRequestBuilder,
   type ClientResponse,
   createApiBuilderFromCtpClient,
   type Customer,
   type CustomerSignInResult
 } from '@commercetools/platform-sdk'
-import { SessionStorageTokenCache } from '~/api/TokenCache'
+import { LocalStorageTokenCache } from '~/api/TokenCache'
 
-type ApiClientProperties = {
+type ApiClientProps = {
   authUri?: string
   baseUri?: string
   clientId?: string
@@ -42,6 +43,8 @@ type SignupPayload = {
   password: string
 }
 
+export const LANG = 'en-US'
+
 export class CtpApiClient {
   private readonly authUri: string
   private readonly baseUri: string
@@ -50,9 +53,12 @@ export class CtpApiClient {
   private readonly projectKey: string
   private readonly scopes: string
 
-  private readonly tokenCache = new SessionStorageTokenCache('token')
+  private readonly publicTokenCache = new LocalStorageTokenCache('public')
+  private readonly protectedTokenCache = new LocalStorageTokenCache('protected')
+
+  private readonly anonymousIdStorageKey = 'anonymous_id'
 
-  private readonly public: ByProjectKeyRequestBuilder
+  private public: ByProjectKeyRequestBuilder
   private protected?: ByProjectKeyRequestBuilder
   private current: ByProjectKeyRequestBuilder
 
@@ -63,7 +69,7 @@ export class CtpApiClient {
     clientSecret = String(import.meta.env.VITE_CTP_CLIENT_SECRET),
     projectKey = String(import.meta.env.VITE_CTP_PROJECT_KEY),
     scopes = String(import.meta.env.VITE_CTP_SCOPES)
-  }: ApiClientProperties = {}) {
+  }: ApiClientProps = {}) {
     this.authUri = authUri
     this.baseUri = baseUri
     this.clientId = clientId
@@ -74,7 +80,7 @@ export class CtpApiClient {
     this.public = this.createPublic()
 
     if (this.hasToken) {
-      this.protected = this.createPublic(true)
+      this.protected = this.createProtectedWithToken()
       this.current = this.protected
     } else {
       this.current = this.public
@@ -87,38 +93,53 @@ export class CtpApiClient {
 
   public get hasToken(): boolean {
     try {
-      return this.tokenCache.get().token !== ''
+      return this.protectedTokenCache.get().token !== ''
     } catch {
       return false
     }
   }
 
   public async login(email: string, password: string): Promise<ClientResponse<Customer>> {
-    this.logout()
+    await this.public
+      .me()
+      .login()
+      .post({
+        body: {
+          email,
+          password,
+          activeCartSignInMode: 'UseAsNewActiveCustomerCart',
+          updateProductData: true
+        }
+      })
+      .execute()
 
-    this.protected = this.createProtected(email, password)
+    this.protected = this.createProtectedWithCredentials(email, password)
     this.current = this.protected
 
     return await this.getCurrentCustomer()
   }
 
   public logout(): void {
-    this.tokenCache.remove()
-    this.current = this.public
+    this.protectedTokenCache.remove()
+    this.publicTokenCache.remove()
+    this.public = this.createPublic()
     this.protected = undefined
+    this.current = this.public
+  }
+
+  public getCurrentCustomerBuilder(): ByProjectKeyMeRequestBuilder {
+    return this.current.me()
   }
 
   public async getCurrentCustomer(): Promise<ClientResponse<Customer>> {
-    return await this.current.me().get().execute()
+    return await this.getCurrentCustomerBuilder().get().execute()
   }
 
   public async signup(payload: SignupPayload): Promise<ClientResponse<CustomerSignInResult>> {
-    this.logout()
-
     const billingAddressIndex = payload.addresses.findIndex(({ type }) => type === CUSTOMER_ADDRESS_TYPE.BILLING)
     const shippingAddressIndex = payload.addresses.findIndex(({ type }) => type === CUSTOMER_ADDRESS_TYPE.SHIPPING)
 
-    return this.current
+    return this.public
       .me()
       .signup()
       .post({
@@ -154,22 +175,23 @@ export class CtpApiClient {
     }
   }
 
-  private createPublic(withTokenCache: boolean = false): ByProjectKeyRequestBuilder {
-    const authOptions: AuthMiddlewareOptions = {
-      credentials: { clientId: this.clientId, clientSecret: this.clientSecret },
-      host: this.authUri,
-      httpClient: fetch,
-      projectKey: this.projectKey,
-      scopes: [this.scopes]
-    }
-
-    if (withTokenCache) {
-      authOptions.tokenCache = this.tokenCache
-    }
+  private createPublic(): ByProjectKeyRequestBuilder {
+    const anonymousId = this.getOrCreateAnonymousId()
 
     const client = new ClientBuilder()
       .withProjectKey(this.projectKey)
-      .withClientCredentialsFlow(authOptions)
+      .withAnonymousSessionFlow({
+        credentials: {
+          clientId: this.clientId,
+          clientSecret: this.clientSecret,
+          anonymousId
+        },
+        host: this.authUri,
+        httpClient: fetch,
+        projectKey: this.projectKey,
+        scopes: [this.scopes],
+        tokenCache: this.publicTokenCache
+      })
       .withHttpMiddleware(this.getHttpOptions())
       .withLoggerMiddleware()
       .build()
@@ -179,7 +201,7 @@ export class CtpApiClient {
     })
   }
 
-  private createProtected(email: string, password: string): ByProjectKeyRequestBuilder {
+  private createProtectedWithCredentials(email: string, password: string): ByProjectKeyRequestBuilder {
     const client = new ClientBuilder()
       .withProjectKey(this.projectKey)
       .withPasswordFlow({
@@ -188,7 +210,7 @@ export class CtpApiClient {
         httpClient: fetch,
         projectKey: this.projectKey,
         scopes: [this.scopes],
-        tokenCache: this.tokenCache
+        tokenCache: this.protectedTokenCache
       })
       .withHttpMiddleware(this.getHttpOptions())
       .withLoggerMiddleware()
@@ -198,6 +220,51 @@ export class CtpApiClient {
       projectKey: this.projectKey
     })
   }
+
+  private createProtectedWithToken(): ByProjectKeyRequestBuilder {
+    const { refreshToken } = this.protectedTokenCache.get()
+
+    if (refreshToken === undefined) {
+      throw new Error('Refresh token is missing')
+    }
+
+    const client = new ClientBuilder()
+      .withProjectKey(this.projectKey)
+      .withRefreshTokenFlow({
+        credentials: { clientId: this.clientId, clientSecret: this.clientSecret },
+        host: this.authUri,
+        httpClient: fetch,
+        projectKey: this.projectKey,
+        tokenCache: this.protectedTokenCache,
+        refreshToken
+      })
+      .withHttpMiddleware(this.getHttpOptions())
+      .withLoggerMiddleware()
+      .build()
+
+    return createApiBuilderFromCtpClient(client).withProjectKey({
+      projectKey: this.projectKey
+    })
+  }
+
+  private getOrCreateAnonymousId(): string {
+    let id = this.getAnonymousIdFromStorage()
+
+    if (id === null || !this.hasToken) {
+      id = crypto.randomUUID()
+      this.saveAnonymousIdToStorage(id)
+    }
+
+    return id
+  }
+
+  private getAnonymousIdFromStorage(): string | null {
+    return localStorage.getItem(this.anonymousIdStorageKey)
+  }
+
+  private saveAnonymousIdToStorage(id: string): void {
+    localStorage.setItem(this.anonymousIdStorageKey, id)
+  }
 }
 
 export const ctpApiClient = new CtpApiClient()