@lookiero/checkout 8.14.0-beta.102 → 8.14.0-beta.2

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.d.ts

@@ -1,8 +1,12 @@
 import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { ProductVariantProjection } from "../../../../../../projection/bookedProductsVariants/bookedProductsVariants";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+interface ItemWithCustomerDecissionStyle {
+    readonly modal: StyleProp<ViewStyle>;
+}
 interface CheckoutItemWithCustomerDecission extends CheckoutItemProjection {
     readonly status: Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
 }
@@ -11,6 +15,7 @@ interface ItemWithCustomerDecissionProps {
     readonly checkoutItem: CheckoutItemWithCustomerDecission;
     readonly returnQuestions: ReturnQuestionProjection[];
     readonly currentProductVariant: ProductVariantProjection;
+    readonly style?: Partial<ItemWithCustomerDecissionStyle>;
     readonly onEditFeedback: () => void;
 }
 declare const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps>;

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.js

@@ -14,7 +14,7 @@ import { CustomerDecissionBanner, } from "../../components/banner/CustomerDeciss
 import { ReturnQuestionsFeedback } from "../../components/returnQuestionsFeedback/ReturnQuestionsFeedback";
 import { ProductVariant } from "../../views/productVariant/ProductVariant";
 import { style } from "./ItemWithCustomerDecission.style";
-const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions, currentProductVariant, onEditFeedback, }) => {
+const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions, currentProductVariant, style: customStyle, onEditFeedback, }) => {
     const screenSize = useScreenSize();
     const isMobile = screenSize === "S";
     const logger = useLogger();
@@ -42,6 +42,6 @@ const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions,
     }
     return (React.createElement(Body, { style: { row: style.container } },
         React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, customerDecissionBanner: React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: resetItem }) }, checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: [style.feedbackContainer, isMobile ? style.feedbackContainerMobile : undefined] },
-            React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions, onEditFeedback: onEditFeedback }))))));
+            React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions, style: customStyle, onEditFeedback: onEditFeedback }))))));
 };
 export { ItemWithCustomerDecission };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.d.ts

@@ -1,8 +1,12 @@
 import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { BookedProductsVariantsProjection, ProductVariantProjection } from "../../../../../../projection/bookedProductsVariants/bookedProductsVariants";
 import "../../../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+interface ItemWithoutCustomerDecissionStyle {
+    readonly modal: StyleProp<ViewStyle>;
+}
 interface CheckoutItemWithoutCustomerDecission extends CheckoutItemProjection {
     readonly status: CheckoutItemStatus.INITIAL;
 }
@@ -11,6 +15,7 @@ interface ItemWithoutCustomerDecissionProps {
     readonly checkoutItem: CheckoutItemWithoutCustomerDecission;
     readonly bookedProductsVariants: BookedProductsVariantsProjection;
     readonly currentProductVariant: ProductVariantProjection;
+    readonly style?: Partial<ItemWithoutCustomerDecissionStyle>;
     readonly onReturn: () => void;
 }
 declare const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps>;

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js

@@ -17,7 +17,7 @@ import { SizeWithoutStockModal } from "../../components/sizeWithoutStockModal/Si
 import { ProductVariant } from "../productVariant/ProductVariant";
 import { style } from "./ItemWithoutCustomerDecission.style";
 const { space6 } = theme();
-const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProductsVariants, currentProductVariant, onReturn, }) => {
+const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProductsVariants, currentProductVariant, style: customStyle, onReturn, }) => {
     const logger = useLogger();
     const { customer: { country, segment }, } = useStaticInfo();
     /* KeepCheckoutItem */
@@ -62,7 +62,7 @@ const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProducts
         return React.createElement(Spinner, { testID: "spinner" });
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
+        React.createElement(SizeWithoutStockModal, { style: customStyle?.modal, visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
             React.createElement(Body, { style: { row: style.container } },
                 React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: { content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } } }))),

package/dist/src/infrastructure/ui/views/return/Return.d.ts

@@ -1,7 +1,12 @@
 import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
+interface ReturnStyle {
+    readonly modal: StyleProp<ViewStyle>;
+}
 interface ReturnProps {
     readonly layout: UiLayout;
+    readonly style?: Partial<ReturnStyle>;
 }
 declare const Return: FC<ReturnProps>;
 export { Return };

package/dist/src/infrastructure/ui/views/return/Return.js

@@ -6,7 +6,7 @@ import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/c
 import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
-const Return = ({ layout }) => {
+const Return = ({ layout, style: customStyle }) => {
     const { id } = useParams();
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -16,6 +16,6 @@ const Return = ({ layout }) => {
         return React.createElement(Spinner, null);
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
-        React.createElement(ReturnQuestionsForm, { checkout: checkout, checkoutItem: checkoutItem, country: country, layout: layout, segment: segment })));
+        React.createElement(ReturnQuestionsForm, { checkout: checkout, checkoutItem: checkoutItem, country: country, layout: layout, segment: segment, style: customStyle })));
 };
 export { Return };

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.d.ts

@@ -1,15 +1,20 @@
 import { FC } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutProjection } from "../../../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+interface ReturnQuestionsFormStyle {
+    readonly modal: StyleProp<ViewStyle>;
+}
 interface ReturnQuestionsFormProps {
     readonly checkout: CheckoutProjection;
     readonly checkoutItem: CheckoutItemProjection;
     readonly country: Country;
     readonly layout: UiLayout;
     readonly segment: Segment;
+    readonly style?: Partial<ReturnQuestionsFormStyle>;
 }
 declare const ReturnQuestionsForm: FC<ReturnQuestionsFormProps>;
 export { ReturnQuestionsForm };

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -1,7 +1,6 @@
 import { PortalHost } from "@gorhom/portal";
 import React, { useCallback, useMemo } from "react";
-import { Platform } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import { ScrollView } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
 import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -38,7 +37,7 @@ const returnQuestionItems = {
     [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
     [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
 };
-const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout, segment, }) => {
+const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout, segment, style: customStyle, }) => {
     const navigate = useNavigate();
     const basePath = useBasePath();
     const logger = useLogger();
@@ -95,21 +94,20 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     }
     return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
         React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
-        React.createElement(Layout, { footer: null, header: header, scrollEnabled: false, style: {
+        React.createElement(Layout, { header: header, scrollEnabled: false, style: {
                 safeAreaView: style.safeAreaView,
                 scrollView: style.scrollView,
                 header: style.header,
             } },
             React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
-            React.createElement(KeyboardAwareScrollView, { extraKeyboardSpace: Platform.OS === "android" ? 10 : 120, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, testID: "return-questions-form" },
-                React.createElement(View, { style: style.background },
-                    React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
-                        React.createElement(Box, { size: { L: "2/3" } },
-                            React.createElement(View, { style: [style.info, !screen.S && style.desktopInfo] },
-                                React.createElement(Text, { level: 3, heading: true }, titleText),
-                                React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
-                            React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
-                            React.createElement(View, { style: [style.submit, !screen.S && style.submitDesktop] },
-                                React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText)))))))));
+            React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: "return-questions-form" },
+                React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
+                    React.createElement(Box, { size: { L: "2/3" } },
+                        React.createElement(View, { style: [style.info, !screen.S && style.desktopInfo] },
+                            React.createElement(Text, { level: 3, heading: true }, titleText),
+                            React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
+                        React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions, style: customStyle }),
+                        React.createElement(View, { style: style.submit },
+                            React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText))))))));
 };
 export { ReturnQuestionsForm };

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

@@ -1,7 +1,4 @@
 declare const style: {
-    background: {
-        backgroundColor: string;
-    };
     description: {
         color: string;
     };
@@ -30,6 +27,7 @@ declare const style: {
         justifyContent: "center";
     };
     safeAreaView: {
+        backgroundColor: string;
         flex: number;
     };
     scrollView: {
@@ -37,11 +35,9 @@ declare const style: {
     };
     submit: {
         backgroundColor: string;
-        padding: number;
-    };
-    submitDesktop: {
         borderBottomLeftRadius: number;
         borderBottomRightRadius: number;
+        padding: number;
     };
 };
 export { style };

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.js

@@ -3,9 +3,6 @@ import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../../../components/templates/header/Header.style";
 const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
 const style = StyleSheet.create({
-    background: {
-        backgroundColor: colorBgPrimaryLight,
-    },
     description: {
         color: colorTextMedium,
     },
@@ -34,6 +31,7 @@ const style = StyleSheet.create({
         justifyContent: "center",
     },
     safeAreaView: {
+        backgroundColor: colorBgPrimaryLight,
         flex: 1,
     },
     scrollView: {
@@ -41,11 +39,9 @@ const style = StyleSheet.create({
     },
     submit: {
         backgroundColor: colorBgBase,
-        padding: space6,
-    },
-    submitDesktop: {
         borderBottomLeftRadius: borderRadius5,
         borderBottomRightRadius: borderRadius5,
+        padding: space6,
     },
 });
 export { style };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "8.14.0-beta.102";
+export declare const VERSION = "8.14.0-beta.2";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "8.14.0-beta.102";
+export const VERSION = "8.14.0-beta.2";

package/jest.setup.js

@@ -11,6 +11,26 @@ jest.mock("@react-native-async-storage/async-storage", () => mockAsyncStorage);
  * Without these, jest will break or pollute the log warnings.
  */
 jest.mock("expo-linear-gradient", () => ({ LinearGradient: require("react-native").View }));
+jest.mock("expo-image-picker", () => ({
+  PermissionStatus: {
+    GRANTED: "granted",
+    UNDETERMINED: "undetermined",
+    DENIED: "denied",
+  },
+  MediaTypeOptions: {
+    Images: "Images",
+  },
+  requestMediaLibraryPermissionsAsync: jest.fn(),
+  requestCameraPermissionsAsync: jest.fn(),
+  launchImageLibraryAsync: jest.fn(),
+  launchCameraAsync: jest.fn(),
+}));
+jest.mock("expo-image-manipulator", () => ({
+  manipulateAsync: jest.fn(),
+  SaveFormat: {
+    JPEG: "jpeg",
+  },
+}));
 
 jest.mock("react-native-safe-area-context", () => ({
   SafeAreaProvider: ({ children }) => children,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "8.14.0-beta.102",
+  "version": "8.14.0-beta.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -21,18 +21,17 @@
     "@lookiero/sty-psp-i18n": "^0.2",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.3",
-    "@lookiero/sty-psp-notifications": "^0.5",
+    "@lookiero/sty-psp-notifications": "^0.5.16-beta.2",
     "@lookiero/sty-psp-react-native": "^0.2",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.1",
     "@lookiero/sty-psp-tracking": "^0.1",
-    "@lookiero/sty-psp-ui": "^0.6",
+    "@lookiero/sty-psp-ui": "^0.5",
     "@lookiero/sty-psp-ui-settings": "^0.1",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.1",
     "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-spring/native": "9.6.1",
-    "react-native-keyboard-controller": "^1.14.2",
     "react-native-svg": "^13.4.0",
     "tiny-invariant": "^1.3.1"
   },
@@ -45,6 +44,8 @@
     "@lookiero/sty-psp-scripts": "*",
     "@lookiero/sty-psp-typescript": "*",
     "@lookiero/testing-library-e2e-native": "1.0.41",
+    "@pact-foundation/pact": "^10.1.4",
+    "@pact-foundation/pact-node": "^10.17.6",
     "@remix-run/router": ">=1.10",
     "@testing-library/react-native": ">=12",
     "@types/jest-when": ">=3",

package/pact.config.ts

@@ -0,0 +1,31 @@
+import { V3MockServer } from "@pact-foundation/pact";
+
+interface StringObject {
+  readonly [k: string]: string;
+}
+
+const DEFAULT_PACT_OPTIONS: StringObject = { dir: ".contracts", logDir: ".pact/logs" };
+
+const AUTH_TOKEN =
+  "eyJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6InBpY2tlcixwYWNrZXIiLCJzdWIiOiIxIiwiaWF0IjoxNjAyODQ4MzEyfQ.gCs2_vBcJsXt4EdreNSjDI8NWkOTQ5Cy4SwtrGnuJ44";
+
+const DEFAULT_REQUEST_HEADERS: StringObject = {
+  Authorization: `Bearer ${AUTH_TOKEN}`,
+  ["Content-Type"]: "application/json",
+};
+
+const DEFAULT_RESPONSE_HEADERS: StringObject = { ["Content-Type"]: "application/json" };
+
+interface FromMockServerUrlToApiUrlFunction {
+  (mockServer: V3MockServer): string;
+}
+
+const fromMockServerUrlToApiUrl: FromMockServerUrlToApiUrlFunction = (mockServer) => mockServer.url.concat("/api");
+
+export {
+  fromMockServerUrlToApiUrl,
+  AUTH_TOKEN,
+  DEFAULT_PACT_OPTIONS,
+  DEFAULT_REQUEST_HEADERS,
+  DEFAULT_RESPONSE_HEADERS,
+};

package/pact.publish.js

@@ -0,0 +1,32 @@
+const pact = require("@pact-foundation/pact-node");
+
+const path = require("path");
+const pwd = process.cwd();
+
+const pjson = require(`${pwd}/package.json`);
+
+const projectName = "checkout-front";
+
+const branchName =
+  process.env.BRANCH_NAME ||
+  (() => {
+    throw "There is no defined branch";
+  })();
+
+const options = {
+  pactFilesOrDirs: [path.resolve(pwd, ".contracts")],
+  pactBroker: "https://pact.dev.envs.lookiero.tech",
+  consumerVersion: pjson.version,
+  tags: [branchName, projectName],
+};
+
+console.log("Publishing contracts with options:", options);
+
+pact
+  .publishPacts(options)
+  .then(() => {
+    console.log("Pact contract publishing complete!");
+  })
+  .catch((exception) => {
+    console.log("Pact contract publishing failed: ", exception);
+  });

package/src/infrastructure/projection/bookedProductsVariants/httpBookedProductsVariantsForCheckoutItemView.pact.ts

@@ -0,0 +1,62 @@
+import { MatchersV3, PactV3 } from "@pact-foundation/pact";
+import { fetchHttpPost } from "@lookiero/sty-psp-http";
+import {
+  AUTH_TOKEN,
+  DEFAULT_PACT_OPTIONS,
+  DEFAULT_REQUEST_HEADERS,
+  DEFAULT_RESPONSE_HEADERS,
+  fromMockServerUrlToApiUrl,
+} from "../../../../pact.config";
+import { BookedProductsVariantsProjection } from "../../../projection/bookedProductsVariants/bookedProductsVariants";
+import { bookedProductsVariants } from "./bookedProductsVariants.mock";
+import { httpBookedProductsVariantsForCheckoutItemView } from "./httpBookedProductsVariantsForCheckoutItemView";
+
+const provider = new PactV3({
+  ...DEFAULT_PACT_OPTIONS,
+  consumer: "STY-BOX_CHECKOUT-FRONT",
+  provider: "STY-BOX_CHECKOUT-BACK_ViewBookedProductVariantsForCheckoutItem",
+});
+
+const checkoutItemId = "52440ae5-7a4c-498b-8b35-08ecfde15776";
+
+const bookedProductsVariantsResponse: { result: BookedProductsVariantsProjection } = {
+  result: bookedProductsVariants,
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const EXPECTED_BODY = MatchersV3.like(bookedProductsVariantsResponse);
+
+describe("STY-BOX_CHECKOUT-BACK_ViewBookedProductVariantsForCheckoutItem API", () => {
+  it("returns a valid booked size change product variants for the given checkout item", () => {
+    provider
+      .given("a valid booked size change product variants for the given checkout item")
+      .uponReceiving("booked size change product variants projection")
+      .withRequest({
+        method: "POST",
+        path: "/api/view-booked-product-variants-for-checkout-item",
+        headers: DEFAULT_REQUEST_HEADERS,
+        body: { checkoutItemId },
+      })
+      .willRespondWith({
+        status: 200,
+        headers: DEFAULT_RESPONSE_HEADERS,
+        body: EXPECTED_BODY,
+      });
+
+    return provider.executeTest(async (mockserver) => {
+      const httpPost = fetchHttpPost({
+        apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
+        getAuthToken: () => Promise.resolve(AUTH_TOKEN),
+        device: "web",
+        version: "1.0.0",
+      });
+
+      const response = await httpBookedProductsVariantsForCheckoutItemView({ httpPost })({
+        checkoutItemId,
+        signal: undefined,
+      });
+
+      expect(response).toStrictEqual(bookedProductsVariantsResponse.result);
+    });
+  });
+});

package/src/infrastructure/projection/checkout/httpCheckoutByIdView.pact.ts

@@ -0,0 +1,128 @@
+import { MatchersV3, PactV3 } from "@pact-foundation/pact";
+import { fetchHttpPost } from "@lookiero/sty-psp-http";
+import {
+  AUTH_TOKEN,
+  DEFAULT_PACT_OPTIONS,
+  DEFAULT_REQUEST_HEADERS,
+  DEFAULT_RESPONSE_HEADERS,
+  fromMockServerUrlToApiUrl,
+} from "../../../../pact.config";
+import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { CheckoutProjection } from "../../../projection/checkout/checkout";
+import { CheckoutItemProductVariantProjection, MediaPerspective } from "../../../projection/checkoutItem/checkoutItem";
+import { checkout } from "./checkout.mock";
+import { httpCheckoutByIdView } from "./httpCheckoutByIdView";
+
+const provider = new PactV3({
+  ...DEFAULT_PACT_OPTIONS,
+  consumer: "STY-BOX_CHECKOUT-FRONT",
+  provider: "STY-BOX_CHECKOUT-BACK_ViewCheckoutById",
+});
+
+const checkoutId = "e2490de5-5bd3-43d5-b7c4-526e33f71304";
+const replacedFor: CheckoutItemProductVariantProjection = {
+  id: "2bf7fb8f-a283-4f53-bc27-0e7fc9466a33",
+  media: [
+    {
+      id: "d7ec731b-4123-4394-829b-297b952e73e5",
+      url: "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg",
+      perspective: MediaPerspective.MAIN,
+    },
+    {
+      id: "8055e209-2fe9-44c5-b715-b09ad3ef741c",
+      url: "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg",
+      perspective: MediaPerspective.DETAIL,
+    },
+  ],
+  brand: "CKS",
+  name: "Sari Tshirt lines",
+  size: {
+    id: "b3a76aea-ce7a-4ecb-82a4-6637d0ac2afd",
+    lookiero: "S",
+    uk: "S",
+    it: "S",
+    europe: "S",
+    unique: false,
+  },
+  color: {
+    id: "c228d1b0-d06d-4d5c-a7d5-953fd43af0d8",
+    label: "black_C2",
+    name: "black",
+  },
+};
+
+const checkoutResponseWithReplacedFor: { result: CheckoutProjection } = {
+  result: checkout({ items: [{ status: CheckoutItemStatus.KEPT, replacedFor }] }),
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const EXPECTED_BODY_WITH_REPLACED_FOR = MatchersV3.like(checkoutResponseWithReplacedFor);
+
+const checkoutResponseWithoutReplacedFor: { result: CheckoutProjection } = {
+  result: checkout({ items: [{ status: CheckoutItemStatus.KEPT }] }),
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const EXPECTED_BODY_WITHOUT_REPLACED_FOR = MatchersV3.like(checkoutResponseWithoutReplacedFor);
+
+describe("STY-BOX_CHECKOUT-BACK_ViewCheckoutById API", () => {
+  it("returns a valid checkout with replacedFor for the given id", () => {
+    provider
+      .given("a valid checkout with replacedFor for the given id")
+      .uponReceiving("checkout projection")
+      .withRequest({
+        method: "POST",
+        path: "/api/view-checkout-by-id",
+        headers: DEFAULT_REQUEST_HEADERS,
+        body: { checkoutId },
+      })
+      .willRespondWith({
+        status: 200,
+        headers: DEFAULT_RESPONSE_HEADERS,
+        body: EXPECTED_BODY_WITH_REPLACED_FOR,
+      });
+
+    return provider.executeTest(async (mockserver) => {
+      const httpPost = fetchHttpPost({
+        apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
+        getAuthToken: () => Promise.resolve(AUTH_TOKEN),
+        device: "web",
+        version: "1.0.0",
+      });
+
+      const response = await httpCheckoutByIdView({ httpPost })({ checkoutId, signal: undefined });
+
+      expect(response).toStrictEqual(checkoutResponseWithReplacedFor.result);
+    });
+  });
+
+  it("returns a valid checkout without replacedFor for the given id", () => {
+    provider
+      .given("a valid checkout without replacedFor for the given id")
+      .uponReceiving("checkout projection")
+      .withRequest({
+        method: "POST",
+        path: "/api/view-checkout-by-id",
+        headers: DEFAULT_REQUEST_HEADERS,
+        body: { checkoutId },
+      })
+      .willRespondWith({
+        status: 200,
+        headers: DEFAULT_RESPONSE_HEADERS,
+        body: EXPECTED_BODY_WITHOUT_REPLACED_FOR,
+      });
+
+    return provider.executeTest(async (mockserver) => {
+      const httpPost = fetchHttpPost({
+        apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
+        getAuthToken: () => Promise.resolve(AUTH_TOKEN),
+        device: "web",
+        version: "1.0.0",
+      });
+
+      const response = await httpCheckoutByIdView({ httpPost })({ checkoutId, signal: undefined });
+
+      expect(response).toStrictEqual(checkoutResponseWithoutReplacedFor.result);
+    });
+  });
+});

package/src/infrastructure/projection/checkout/httpFirstAvailableCheckoutByCustomerIdView.pact.ts

@@ -0,0 +1,63 @@
+import { MatchersV3, PactV3 } from "@pact-foundation/pact";
+import { fetchHttpPost } from "@lookiero/sty-psp-http";
+import {
+  AUTH_TOKEN,
+  DEFAULT_PACT_OPTIONS,
+  DEFAULT_REQUEST_HEADERS,
+  DEFAULT_RESPONSE_HEADERS,
+  fromMockServerUrlToApiUrl,
+} from "../../../../pact.config";
+import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { CheckoutProjection } from "../../../projection/checkout/checkout";
+import { checkout } from "./checkout.mock";
+import { httpFirstAvailableCheckoutByCustomerIdView } from "./httpFirstAvailableCheckoutByCustomerIdView";
+
+const provider = new PactV3({
+  ...DEFAULT_PACT_OPTIONS,
+  consumer: "STY-BOX_CHECKOUT-FRONT",
+  provider: "STY-BOX_CHECKOUT-BACK_ViewFirstAvailableCheckoutByCustomerId",
+});
+
+const customerId = "fab61a4d-c94d-4e33-b098-1945294a5f75";
+
+const checkoutResponse: { result: CheckoutProjection } = {
+  result: checkout({ items: [{ status: CheckoutItemStatus.KEPT }] }),
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const EXPECTED_BODY = MatchersV3.like(checkoutResponse);
+
+describe("STY-BOX_CHECKOUT-BACK_ViewFirstAvailableCheckoutByCustomerId API", () => {
+  it("returns a first available checkout for the given customer id", () => {
+    provider
+      .given("a first available checkout for the given customer id")
+      .uponReceiving("checkout projection")
+      .withRequest({
+        method: "POST",
+        path: "/api/view-first-available-checkout-by-customer-id",
+        headers: DEFAULT_REQUEST_HEADERS,
+        body: { customerId },
+      })
+      .willRespondWith({
+        status: 200,
+        headers: DEFAULT_RESPONSE_HEADERS,
+        body: EXPECTED_BODY,
+      });
+
+    return provider.executeTest(async (mockserver) => {
+      const httpPost = fetchHttpPost({
+        apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
+        getAuthToken: () => Promise.resolve(AUTH_TOKEN),
+        device: "web",
+        version: "1.0.0",
+      });
+
+      const response = await httpFirstAvailableCheckoutByCustomerIdView({ httpPost })({
+        customerId,
+        signal: undefined,
+      });
+
+      expect(response).toStrictEqual(checkoutResponse.result);
+    });
+  });
+});