@lookiero/checkout 5.3.0 → 6.0.0-beta.1

package/src/infrastructure/projection/returnQuestion/httpReturnQuestionsByCheckoutItemIdView.test.ts

@@ -0,0 +1,55 @@
+import { mock } from "jest-mock-extended";
+import { fetchHttpPost } from "@lookiero/sty-psp-http";
+import { ReturnQuestionProjection } from "../../../projection/returnQuestion/returnQuestion";
+import { httpReturnQuestionsByCheckoutItemIdView as sut } from "./httpReturnQuestionsByCheckoutItemIdView";
+import { returnQuestions } from "./returnQuestions.mock";
+
+const fetchMock = jest.fn();
+global.fetch = fetchMock;
+const apiUrl = "/api";
+const getAuthToken = () => Promise.resolve("token");
+const view = sut({ httpPost: fetchHttpPost({ apiUrl: () => apiUrl, getAuthToken }) });
+const signal = mock<AbortSignal>();
+
+const checkoutItemId = "29790d24-b139-4ab8-b618-d796d101e974";
+const returnQuestionsResponse: { result: ReturnQuestionProjection[] } = {
+  result: returnQuestions,
+};
+const returnQuestionsResponseOk: Response = {
+  ok: true,
+  status: 200,
+  text: () => Promise.resolve(JSON.stringify(returnQuestionsResponse)),
+} as Response;
+const returnQuestionsResponseNotFound: Response = {
+  ok: false,
+  status: 404,
+} as Response;
+const returnQuestionsResponseError: Response = {
+  ok: false,
+} as Response;
+
+describe("httpReturnQuestionsByCheckoutItemIdView", () => {
+  it("returns a ReturnQuestions projection for a 200 response", async () => {
+    fetchMock.mockReturnValue(Promise.resolve(returnQuestionsResponseOk));
+
+    const returnedReturnQuestions = await view({ checkoutItemId, signal });
+
+    expect(returnedReturnQuestions).toStrictEqual(returnQuestionsResponse.result);
+  });
+
+  it("returns null for a 404 response", async () => {
+    fetchMock.mockReturnValue(Promise.resolve(returnQuestionsResponseNotFound));
+
+    const returnedReturnQuestions = await view({ checkoutItemId, signal });
+
+    expect(returnedReturnQuestions).toBeNull();
+  });
+
+  it("returns null for a non successfull response", async () => {
+    fetchMock.mockReturnValue(Promise.resolve(returnQuestionsResponseError));
+
+    const returnedReturnQuestions = await view({ checkoutItemId, signal });
+
+    expect(returnedReturnQuestions).toBeNull();
+  });
+});

package/src/infrastructure/projection/returnQuestion/httpReturnQuestionsByCheckoutItemIdView.ts

@@ -0,0 +1,34 @@
+import { HttpPostFunction } from "@lookiero/sty-psp-http";
+import {
+  ListReturnQuestionsByCheckoutItemIdResult,
+  ReturnQuestionsByCheckoutItemIdView,
+} from "../../../projection/returnQuestion/listReturnQuestionsByCheckoutItemId";
+
+interface HttpReturnQuestionsByCheckoutItemIdView extends ReturnQuestionsByCheckoutItemIdView {}
+
+interface HttpReturnQuestionsByCheckoutItemIdViewFunctionArgs {
+  readonly httpPost: HttpPostFunction;
+}
+
+interface HttpReturnQuestionsByCheckoutItemIdViewFunction {
+  (args: HttpReturnQuestionsByCheckoutItemIdViewFunctionArgs): HttpReturnQuestionsByCheckoutItemIdView;
+}
+
+interface ListReturnQuestionsByCheckoutItemIdResponse {
+  readonly result: ListReturnQuestionsByCheckoutItemIdResult;
+}
+
+const httpReturnQuestionsByCheckoutItemIdView: HttpReturnQuestionsByCheckoutItemIdViewFunction =
+  ({ httpPost }) =>
+  async ({ checkoutItemId, signal }) =>
+    await httpPost<ListReturnQuestionsByCheckoutItemIdResponse, ListReturnQuestionsByCheckoutItemIdResult>({
+      endpoint: "/list-return-questions-by-checkout-item-id",
+      body: { checkoutItemId },
+      signal,
+      result: {
+        error: null,
+        success: (response) => response.result,
+      },
+    });
+
+export { httpReturnQuestionsByCheckoutItemIdView };

package/src/infrastructure/projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId.test.ts

@@ -0,0 +1,34 @@
+import { renderHook, waitFor } from "@testing-library/react-native";
+import { bootstrap, QueryStatus } from "@lookiero/messaging-react";
+import {
+  listReturnQuestionsByCheckoutItemIdHandler,
+  LIST_RETURN_QUESTIONS_BY_CHECKOUT_ITEM_ID,
+} from "../../../../projection/returnQuestion/listReturnQuestionsByCheckoutItemId";
+import { ReturnQuestionProjection, ReturnQuestionType } from "../../../../projection/returnQuestion/returnQuestion";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+import { useListReturnQuestionsByCheckoutItemId as sut } from "./useListReturnQuestionsByCheckoutItemId";
+
+const checkoutItemId = "29790d24-b139-4ab8-b618-d796d101e974";
+const returnQuestionProjection: ReturnQuestionProjection = {
+  id: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
+  name: "main_title",
+  placeholder: "",
+  type: ReturnQuestionType.HOST_DEFAULT,
+};
+const view = jest.fn().mockReturnValue(returnQuestionProjection);
+const { Component: Messaging } = bootstrap({ id: MESSAGING_CONTEXT_ID })
+  .query(LIST_RETURN_QUESTIONS_BY_CHECKOUT_ITEM_ID, listReturnQuestionsByCheckoutItemIdHandler, { view })
+  .build();
+
+describe("useListReturnQuestionsByCheckoutItemId integration hook", () => {
+  it("returns success as the query status and the result itself after rendering the hook", async () => {
+    const { result } = renderHook(() => sut({ checkoutItemId }), { wrapper: Messaging });
+
+    await waitFor(() => {
+      const [projection, status] = result.current;
+
+      expect(projection).toStrictEqual(returnQuestionProjection);
+      expect(status).toBe(QueryStatus.SUCCESS);
+    });
+  });
+});

package/src/infrastructure/projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId.ts

@@ -0,0 +1,21 @@
+import { useQuery, UseQueryFunctionResult } from "@lookiero/messaging-react";
+import { listReturnQuestionsByCheckoutItemId } from "../../../../projection/returnQuestion/listReturnQuestionsByCheckoutItemId";
+import { ReturnQuestionProjection } from "../../../../projection/returnQuestion/returnQuestion";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+
+interface UseListReturnQuestionsByCheckoutItemIdFunctionArgs {
+  readonly checkoutItemId: string;
+}
+
+interface UseListReturnQuestionsByCheckoutItemIdFunction {
+  (args: UseListReturnQuestionsByCheckoutItemIdFunctionArgs): UseQueryFunctionResult<ReturnQuestionProjection[]>;
+}
+
+const useListReturnQuestionsByCheckoutItemId: UseListReturnQuestionsByCheckoutItemIdFunction = ({ checkoutItemId }) =>
+  useQuery({
+    query: listReturnQuestionsByCheckoutItemId({ checkoutItemId }),
+    contextId: MESSAGING_CONTEXT_ID,
+    options: { staleTime: Infinity, retry: false, refetchOnWindowFocus: false },
+  });
+
+export { useListReturnQuestionsByCheckoutItemId };

package/src/infrastructure/projection/returnQuestion/returnQuestions.mock.ts

@@ -0,0 +1,402 @@
+import { ReturnQuestionProjection, ReturnQuestionType } from "../../../projection/returnQuestion/returnQuestion";
+
+const returnQuestions: ReturnQuestionProjection[] = [
+  {
+    id: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
+    name: "main_title",
+    placeholder: "",
+    type: ReturnQuestionType.HOST_DEFAULT,
+    children: [
+      {
+        id: "ed396b68-1436-48ab-842f-fbfea996fad4",
+        name: "size",
+        placeholder: "size_placeholder",
+        type: ReturnQuestionType.HOST_SELECT,
+        children: [
+          {
+            id: "0ad1dba8-b02c-4121-a1e3-981f1c30800d",
+            name: "size_title",
+            placeholder: "",
+            type: ReturnQuestionType.HOST_STACK,
+            children: [
+              {
+                id: "9251dc2c-d76a-484d-9299-346929af932f",
+                name: "size_large",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+                children: [
+                  {
+                    id: "542c4d24-e1da-484f-8c3a-7d89ee135adc",
+                    name: "",
+                    placeholder: "",
+                    type: ReturnQuestionType.HOST_STACK,
+                    children: [
+                      {
+                        id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+                        name: "size_overall",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "85e84a77-461c-41e6-8544-95b5294d0b80",
+                        name: "size_trousers_too_long",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "29441d25-8d9f-471e-a13e-a03f61c88091",
+                        name: "size_fit_cut_does_not_fit",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: "a081c3e9-1904-4a60-8899-b72c1a3a0291",
+                name: "size_correct",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+              {
+                id: "624cce3d-bd86-463a-b16b-c862ad73d5f3",
+                name: "size_small",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+                children: [
+                  {
+                    id: "58e5ae9a-bc0d-4d27-b267-854a51c2a79a",
+                    name: "",
+                    placeholder: "",
+                    type: ReturnQuestionType.HOST_STACK,
+                    children: [
+                      {
+                        id: "6a3d11fc-570c-4085-a850-1967228cdd4c",
+                        name: "size_overall",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "c27e1936-deea-4dbe-a8f1-fe4fb8564deb",
+                        name: "size_trousers_too_short",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "e77232ae-eeec-4722-b2d3-f5c0d34fd0ca",
+                        name: "size_fit_cut_does_not_fit",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "6a6d3878-5561-412c-96f3-7ed79ee587bb",
+        name: "style",
+        placeholder: "style_placeholder",
+        type: ReturnQuestionType.HOST_SELECT,
+        children: [
+          {
+            id: "fd7ff4a0-78ed-4c0d-aa4d-64962739c322",
+            name: "style_title",
+            placeholder: "",
+            type: ReturnQuestionType.HOST_STACK,
+            children: [
+              {
+                id: "56631448-d33d-49fb-b3f8-4486b68b60c3",
+                name: "style_i_love_it_but",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+                children: [
+                  {
+                    id: "90329d91-bd5d-4439-bb0a-b338caaeff2b",
+                    name: "",
+                    placeholder: "",
+                    type: ReturnQuestionType.HOST_STACK,
+                    children: [
+                      {
+                        id: "a3d937b6-7499-4a3c-86bf-5c0af9ab2e23",
+                        name: "style_i_already_have_something_similar",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "7970edd3-fb5c-42d3-afe3-ce31bcbb856c",
+                        name: "style_very_basic_simple",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "bab3d4f9-0227-4550-a53f-3c125d68429c",
+                        name: "style_i_dont_need_it_at_the_moment",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: "5287d1df-a28a-42cd-9138-01f82aeea4c2",
+                name: "style_i_like_it_but",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+                children: [
+                  {
+                    id: "35b86395-6b6b-4a39-ab16-05511f58acdd",
+                    name: "",
+                    placeholder: "",
+                    type: ReturnQuestionType.HOST_STACK,
+                    children: [
+                      {
+                        id: "e1f6ac53-f203-4b32-9ff0-782c028d9e95",
+                        name: "style_i_already_have_something_similar",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "12875926-b67a-4ad3-852c-1608c7dcc558",
+                        name: "style_very_basic_simple",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "a5eb96bf-73d4-4df5-8ad8-097410b24526",
+                        name: "style_i_dont_need_it_at_the_moment",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: "757107a9-8e2d-4194-a7fe-0d55cde49c11",
+                name: "style_not_bad_but",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+                children: [
+                  {
+                    id: "c6f75ee3-a445-4103-a682-f0c3a742108d",
+                    name: "",
+                    placeholder: "",
+                    type: ReturnQuestionType.HOST_STACK,
+                    children: [
+                      {
+                        id: "4f46d4b1-b103-43b2-b669-be721ab46e03",
+                        name: "style_i_dont_like_the_color",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "48412165-5e05-4806-8e21-ea59c41d0479",
+                        name: "style_very_basic_simple",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "51262c01-eaa3-4d3a-aeb9-95dc8b0dd687",
+                        name: "style_i_dont_like_the_fabric",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "9dea1c2b-4f8c-4192-a547-999df55e77e4",
+                        name: "style_i_dont_like_the_print",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "b1277bf3-4bbb-487a-8e58-88efecc61c3f",
+                        name: "style_not_my_style_in_general",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: "8a9cd6f8-db4b-4904-8a48-3d9bbd6f7a69",
+                name: "style_i_dont_like",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+                children: [
+                  {
+                    id: "f604240d-c093-4a9e-ab85-4adc0744066a",
+                    name: "",
+                    placeholder: "",
+                    type: ReturnQuestionType.HOST_STACK,
+                    children: [
+                      {
+                        id: "42dbbb93-7808-4ac3-8431-582f812cb314",
+                        name: "style_i_dont_like_the_color",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "af1ade81-7b22-4f7e-a505-2ae275a6440f",
+                        name: "style_very_basic_simple",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "26d073b4-2588-4391-9b4c-e8e4a8eba2a8",
+                        name: "style_i_dont_like_the_fabric",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "ee50ab07-b7a6-415e-a04a-c9f350396185",
+                        name: "style_i_dont_like_the_print",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                      {
+                        id: "ce3227e4-851e-47b7-98c1-c63a402e8477",
+                        name: "style_not_my_style_in_general",
+                        placeholder: "",
+                        type: ReturnQuestionType.OPTION,
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "a1acdb2d-62c8-467f-b7cc-dc24d967290c",
+        name: "quality",
+        placeholder: "quality_placeholder",
+        type: ReturnQuestionType.HOST_SELECT,
+        children: [
+          {
+            id: "405de847-188f-46c1-b66d-941c22a6b7a9",
+            name: "quality_title",
+            placeholder: "",
+            type: ReturnQuestionType.HOST_STACK,
+            children: [
+              {
+                id: "cce7851c-92c7-461b-8dcb-903c5de59ed1",
+                name: "quality_good",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+              {
+                id: "4bf8f27d-669b-4d36-8d39-b5599c671816",
+                name: "quality_regular",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+              {
+                id: "48bfe766-92c0-4ff5-a793-e107b60786ff",
+                name: "quality_bad",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "f25ccdcf-b648-479e-b4a1-86129e3e8c0b",
+        name: "price",
+        placeholder: "price_placeholder",
+        type: ReturnQuestionType.HOST_SELECT,
+        children: [
+          {
+            id: "b0e0463c-787f-4d6c-adf3-5151ab6fc959",
+            name: "price_title",
+            placeholder: "",
+            type: ReturnQuestionType.HOST_STACK,
+            children: [
+              {
+                id: "9c59e396-4135-4255-9437-22555837d686",
+                name: "price_expensive",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+              {
+                id: "10db17f8-0982-49ee-9aeb-f752d953654c",
+                name: "price_cheap",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+              {
+                id: "acf64bb3-b91b-48e7-bba1-0541620ed1c5",
+                name: "price_fair",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "b7ad1665-5e54-4ee4-b455-e7189f33083c",
+        name: "others",
+        placeholder: "others_placeholder",
+        type: ReturnQuestionType.HOST_SELECT,
+        children: [
+          {
+            id: "32cd0ef9-78d7-4605-a279-556749b36d4a",
+            name: "others_title",
+            placeholder: "",
+            type: ReturnQuestionType.HOST_STACK,
+            children: [
+              {
+                id: "95c4fd13-9ca3-45a6-8795-23415bbd0a5e",
+                name: "others_i_dont_like_the_brand",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+              {
+                id: "f25c63bd-42d3-4242-9b81-927025aa9d67",
+                name: "others_different_from_preview",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+              {
+                id: "0e0b16c1-a721-4a14-aea6-e0cf5c262222",
+                name: "others_delivery_delay",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+              {
+                id: "11699ae8-325d-429c-9c05-ff2d6cc45d54",
+                name: "others_item_is_defective",
+                placeholder: "",
+                type: ReturnQuestionType.OPTION,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: "ce3e8d57-5eea-4dd3-bef4-2e811a143612",
+    name: "comment_title",
+    placeholder: "",
+    type: ReturnQuestionType.HOST_TEXTAREA,
+    children: [
+      {
+        id: "1123a37d-bc00-43a4-9d28-cee1dfaf356c",
+        name: "comment_textarea",
+        placeholder: "comment_textarea_placeholder",
+        type: ReturnQuestionType.TEXTAREA,
+      },
+    ],
+  },
+];
+
+export { returnQuestions };

package/src/infrastructure/projection/uiSetting/react/useViewUiSettingByKey.test.ts

@@ -0,0 +1,33 @@
+import { renderHook, waitFor } from "@testing-library/react-native";
+import { bootstrap, QueryStatus } from "@lookiero/messaging-react";
+import {
+  UiSettingProjection,
+  viewUiSettingByKeyHandler,
+  VIEW_UI_SETTING_BY_KEY,
+} from "../../../../projection/uiSetting/viewUiSettingByKey";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+import { useViewUiSettingByKey as sut } from "./useViewUiSettingByKey";
+
+const uiSettingKey = "ui_setting_key";
+const uiSettingProjection: UiSettingProjection = {
+  id: "3a1a95f5-724c-4924-a9e4-fb474dd74d80",
+  key: uiSettingKey,
+  value: "ui_setting_value",
+};
+const view = jest.fn().mockReturnValue(uiSettingProjection);
+const { Component: Messaging } = bootstrap({ id: MESSAGING_CONTEXT_ID })
+  .query(VIEW_UI_SETTING_BY_KEY, viewUiSettingByKeyHandler, { view })
+  .build();
+
+describe("useViewUiSettingByKey integration hook", () => {
+  it("returns success as the query status and the result itself after rendering the hook", async () => {
+    const { result } = renderHook(() => sut({ key: uiSettingKey }), { wrapper: Messaging });
+
+    await waitFor(() => {
+      const [projection, status] = result.current;
+
+      expect(projection).toStrictEqual(uiSettingProjection);
+      expect(status).toBe(QueryStatus.SUCCESS);
+    });
+  });
+});

package/src/infrastructure/projection/uiSetting/react/useViewUiSettingByKey.ts

@@ -0,0 +1,22 @@
+import { useQuery, UseQueryFunctionResult } from "@lookiero/messaging-react";
+import { isUiSettingUpdated } from "../../../../domain/uiSetting/model/uiSettingUpdated";
+import { UiSettingProjection, viewUiSettingByKey } from "../../../../projection/uiSetting/viewUiSettingByKey";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+
+interface UseViewUiSettingByKeyFunctionArgs {
+  readonly key: string;
+}
+
+interface UseViewUiSettingByKeyFunction {
+  (args: UseViewUiSettingByKeyFunctionArgs): UseQueryFunctionResult<UiSettingProjection>;
+}
+
+const useViewUiSettingByKey: UseViewUiSettingByKeyFunction = ({ key }) =>
+  useQuery({
+    query: viewUiSettingByKey({ key }),
+    contextId: MESSAGING_CONTEXT_ID,
+    invalidation: isUiSettingUpdated,
+    options: { refetchOnMount: "always", staleTime: Infinity, retry: false, refetchOnWindowFocus: false },
+  });
+
+export { useViewUiSettingByKey };

package/src/infrastructure/projection/uiSetting/storageUiSettingByKeyView.test.ts

@@ -0,0 +1,36 @@
+import { UiSettingDto } from "../../persistence/uiSettingData";
+import { storageUiSettingByKeyView as sut } from "./storageUiSettingByKeyView";
+
+const uiSettingKey = "ui_setting_key";
+const uiSetting: UiSettingDto = {
+  id: "ba1fecef-0154-42ea-bbf9-b9c65c621a58",
+  key: uiSettingKey,
+  value: "ui_setting_value",
+};
+
+const readMock = jest.fn();
+const view = sut({ read: readMock });
+
+describe("storageUiSettingByKeyView", () => {
+  it("returns a UiSetting projection", async () => {
+    readMock.mockReturnValue(Promise.resolve(uiSetting));
+
+    const returnedUiSetting = await view({ key: uiSettingKey });
+
+    expect(returnedUiSetting).toStrictEqual(uiSetting);
+  });
+
+  it("returns null when ui setting key does not exist", async () => {
+    readMock.mockReturnValue(Promise.resolve(null));
+
+    const returnedUiSetting = await view({ key: uiSettingKey });
+
+    expect(returnedUiSetting).toBeNull();
+  });
+
+  it("throws for an unsuccessfull response", async () => {
+    readMock.mockRejectedValue("error");
+
+    await expect(view({ key: uiSettingKey })).rejects.toThrow();
+  });
+});

package/src/infrastructure/projection/uiSetting/storageUiSettingByKeyView.ts

@@ -0,0 +1,37 @@
+import { UiSettingByKeyView, UiSettingProjection } from "../../../projection/uiSetting/viewUiSettingByKey";
+import { ReadFunction } from "../../persistence/storage";
+import { UiSettingDto } from "../../persistence/uiSettingData";
+
+interface ToUiSettingProjectionFunction {
+  (uiSettingDto: UiSettingDto): UiSettingProjection;
+}
+
+const toUiSettingProjection: ToUiSettingProjectionFunction = (uiSettingDto) => ({
+  id: uiSettingDto.id,
+  key: uiSettingDto.key,
+  value: uiSettingDto.value,
+});
+
+interface StorageUiSettingByKeyView extends UiSettingByKeyView {}
+
+interface StorageUiSettingByKeyViewFunctionArgs {
+  readonly read: ReadFunction<UiSettingDto>;
+}
+
+interface StorageUiSettingByKeyViewFunction {
+  (args: StorageUiSettingByKeyViewFunctionArgs): StorageUiSettingByKeyView;
+}
+
+const storageUiSettingByKeyView: StorageUiSettingByKeyViewFunction =
+  ({ read }) =>
+  async ({ key }) => {
+    try {
+      const uiSettingDto = await read(key);
+
+      return uiSettingDto ? toUiSettingProjection(uiSettingDto) : null;
+    } catch (ignored) {
+      throw new Error("Could not fetch the uiSetting");
+    }
+  };
+
+export { storageUiSettingByKeyView };