Crosscheck fixes

app/api/client.ts

@@ -1,6 +1,7 @@
 import { ClientBuilder, type HttpMiddlewareOptions } from '@commercetools/ts-client'
 import {
   type ByProjectKeyMeRequestBuilder,
+  type ApiRequest,
   type ByProjectKeyRequestBuilder,
   type ClientResponse,
   createApiBuilderFromCtpClient,
@@ -99,19 +100,37 @@ export class CtpApiClient {
     }
   }
 
+  private static isAnonymousIdError(error: unknown): boolean {
+    return (
+      typeof error === 'object' &&
+      error !== null &&
+      'statusCode' in error &&
+      error.statusCode === 400 &&
+      'message' in error &&
+      typeof error.message === 'string' &&
+      error.message.includes('anonymousId')
+    )
+  }
+
   public async login(email: string, password: string): Promise<ClientResponse<Customer>> {
-    await this.public
-      .me()
-      .login()
-      .post({
-        body: {
-          email,
-          password,
-          activeCartSignInMode: 'UseAsNewActiveCustomerCart',
-          updateProductData: true
-        }
-      })
-      .execute()
+    const request: () => ApiRequest<CustomerSignInResult> = () =>
+      this.public
+        .me()
+        .login()
+        .post({
+          body: {
+            email,
+            password,
+            activeCartSignInMode: 'UseAsNewActiveCustomerCart',
+            updateProductData: true
+          }
+        })
+
+    try {
+      await request().execute()
+    } catch (error) {
+      await this.handleError<CustomerSignInResult>({ error, request })
+    }
 
     this.protected = this.createProtectedWithCredentials(email, password)
     this.current = this.protected
@@ -139,31 +158,37 @@ export class CtpApiClient {
     const billingAddressIndex = payload.addresses.findIndex(({ type }) => type === CUSTOMER_ADDRESS_TYPE.BILLING)
     const shippingAddressIndex = payload.addresses.findIndex(({ type }) => type === CUSTOMER_ADDRESS_TYPE.SHIPPING)
 
-    return this.public
-      .me()
-      .signup()
-      .post({
-        body: {
-          addresses: payload.addresses.map(
-            (address): Omit<CustomerAddress, 'type'> => ({
-              city: address.city,
-              country: address.country,
-              firstName: payload.firstName,
-              lastName: payload.lastName,
-              postalCode: address.postalCode,
-              streetName: address.streetName
-            })
-          ),
-          dateOfBirth: payload.dateOfBirth,
-          defaultBillingAddress: billingAddressIndex === -1 ? undefined : billingAddressIndex,
-          defaultShippingAddress: shippingAddressIndex === -1 ? undefined : shippingAddressIndex,
-          email: payload.email,
-          firstName: payload.firstName,
-          lastName: payload.lastName,
-          password: payload.password
-        }
-      })
-      .execute()
+    const request: () => ApiRequest<CustomerSignInResult> = () =>
+      this.public
+        .me()
+        .signup()
+        .post({
+          body: {
+            addresses: payload.addresses.map(
+              (address): Omit<CustomerAddress, 'type'> => ({
+                city: address.city,
+                country: address.country,
+                firstName: payload.firstName,
+                lastName: payload.lastName,
+                postalCode: address.postalCode,
+                streetName: address.streetName
+              })
+            ),
+            dateOfBirth: payload.dateOfBirth,
+            defaultBillingAddress: billingAddressIndex === -1 ? undefined : billingAddressIndex,
+            defaultShippingAddress: shippingAddressIndex === -1 ? undefined : shippingAddressIndex,
+            email: payload.email,
+            firstName: payload.firstName,
+            lastName: payload.lastName,
+            password: payload.password
+          }
+        })
+
+    try {
+      return await request().execute()
+    } catch (error) {
+      return await this.handleError<CustomerSignInResult>({ error, request })
+    }
   }
 
   private getHttpOptions(): HttpMiddlewareOptions {
@@ -247,6 +272,23 @@ export class CtpApiClient {
     })
   }
 
+  private async handleError<T>({
+    error,
+    request
+  }: {
+    error: unknown
+    request: () => ApiRequest<T>
+  }): Promise<ClientResponse<T>> {
+    if (!CtpApiClient.isAnonymousIdError(error)) {
+      throw error
+    }
+
+    console.log('Anonymous ID is already in use. Creating new anonymous ID...')
+
+    this.logout()
+    return await request().execute()
+  }
+
   private getOrCreateAnonymousId(): string {
     let id = this.getAnonymousIdFromStorage()
 

app/pages/cart/CartTotalPrice.tsx

@@ -9,11 +9,13 @@ type CartTotalPriceProps = {
 
 export function CartTotalPrice({ totalPrice, discount }: CartTotalPriceProps): ReactElement {
   const hasDiscount = discount !== undefined
+  const fullPrice = (totalPrice ?? 0) + (discount?.discountedAmount?.centAmount ?? 0)
+  const discountedPrice = totalPrice ?? 0
+
   return (
-    <div className="text-center m-0 text-sm sm:text-base font-semibold">
-      {hasDiscount
-        ? `Total price with discount code applied: ${formatProductItemPrice(discount.discountedAmount?.centAmount ?? 0)}`
-        : `Total price: ${formatProductItemPrice(totalPrice ?? 0)}`}
+    <div className="text-center m-0 text-sm sm:text-base font-semibold justify-items-start">
+      <div>Total price: {formatProductItemPrice(fullPrice)}</div>
+      {hasDiscount && <div>Total price with discount code applied: {formatProductItemPrice(discountedPrice)}</div>}
     </div>
   )
 }