@lookiero/checkout 0.3.19 → 0.3.20

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lookiero/checkout",
-    "version": "0.3.19",
+    "version": "0.3.20",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [

package/dist/src/infrastructure/delivery/baseBootstrap.d.ts

@@ -4,6 +4,8 @@ import { Checkout } from "../../domain/checkout/model/checkout";
 import { CheckoutsGetFunction, CheckoutsSaveFunction } from "../../domain/checkout/model/checkouts";
 import { CheckoutBooking } from "../../domain/checkoutBooking/model/checkoutBooking";
 import { CheckoutBookingsGetFunction, CheckoutBookingsSaveFunction } from "../../domain/checkoutBooking/model/checkoutBookings";
+import { CheckoutFeedback } from "../../domain/checkoutFeedback/model/checkoutFeedback";
+import { CheckoutFeedbacksGetFunction, CheckoutFeedbacksSaveFunction } from "../../domain/checkoutFeedback/model/checkoutFeedbacks";
 import { CheckoutItem } from "../../domain/checkoutItem/model/checkoutItem";
 import { CheckoutItemsGetFunction, CheckoutItemsSaveFunction } from "../../domain/checkoutItem/model/checkoutItems";
 import { UiSetting } from "../../domain/uiSetting/model/uiSetting";
@@ -22,7 +24,7 @@ import { UiSettingByKeyView } from "../../projection/uiSetting/viewUiSettingByKe
 declare const MESSAGING_CONTEXT_ID = "Checkout";
 type NeverWhenEmptyRecord<K extends [Record<string, unknown>]> = K extends [Record<string, never>] ? [never?] : K;
 type RepositoryDependencies<A extends AggregateRoot, GetFunctionArgs extends RepositoryGetFunctionArgs, SaveFunctionArgs extends RepositorySaveFunctionArgs> = Omit<Parameters<RepositoryGetFunction<A, GetFunctionArgs>>[0] & Parameters<RepositorySaveFunction<A, SaveFunctionArgs>>[0], keyof RepositoryGetFunctionArgs>;
-interface BaseBootstrapFunctionArgs<UiSettingGetFunctionArgs extends RepositoryGetFunctionArgs, UiSettingSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutItemGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutItemSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutBookingGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutBookingSaveFunctionArgs extends RepositorySaveFunctionArgs> {
+interface BaseBootstrapFunctionArgs<UiSettingGetFunctionArgs extends RepositoryGetFunctionArgs, UiSettingSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutItemGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutItemSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutBookingGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutBookingSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutFeedbackGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutFeedbackSaveFunctionArgs extends RepositorySaveFunctionArgs> {
     readonly checkoutByIdView: CheckoutByIdView;
     readonly firstAvailableCheckoutByCustomerIdView: FirstAvailableCheckoutByCustomerIdView;
     readonly isCheckoutEnabledByCustomerIdView: IsCheckoutEnabledByCustomerIdView;
@@ -54,9 +56,14 @@ interface BaseBootstrapFunctionArgs<UiSettingGetFunctionArgs extends RepositoryG
     readonly checkoutBookingsDependencies: NeverWhenEmptyRecord<[
         RepositoryDependencies<CheckoutBooking, CheckoutBookingGetFunctionArgs, CheckoutBookingSaveFunctionArgs>
     ]>;
+    readonly getCheckoutFeedback: CheckoutFeedbacksGetFunction<CheckoutFeedbackGetFunctionArgs>;
+    readonly saveCheckoutFeedback: CheckoutFeedbacksSaveFunction<CheckoutFeedbackSaveFunctionArgs>;
+    readonly checkoutFeedbacksDependencies: NeverWhenEmptyRecord<[
+        RepositoryDependencies<CheckoutFeedback, CheckoutFeedbackGetFunctionArgs, CheckoutFeedbackSaveFunctionArgs>
+    ]>;
 }
 interface BaseBootstrapFunction {
-    <UiSettingGetArgs extends RepositoryGetFunctionArgs, UiSettingSaveArgs extends RepositorySaveFunctionArgs, CheckoutGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutItemGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutItemSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutBookingGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutBookingSaveFunctionArgs extends RepositorySaveFunctionArgs>(args: BaseBootstrapFunctionArgs<UiSettingGetArgs, UiSettingSaveArgs, CheckoutGetFunctionArgs, CheckoutSaveFunctionArgs, CheckoutItemGetFunctionArgs, CheckoutItemSaveFunctionArgs, CheckoutBookingGetFunctionArgs, CheckoutBookingSaveFunctionArgs>): BuildBootstrapFunctionReturn;
+    <UiSettingGetArgs extends RepositoryGetFunctionArgs, UiSettingSaveArgs extends RepositorySaveFunctionArgs, CheckoutGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutItemGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutItemSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutBookingGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutBookingSaveFunctionArgs extends RepositorySaveFunctionArgs, CheckoutFeedbackGetFunctionArgs extends RepositoryGetFunctionArgs, CheckoutFeedbackSaveFunctionArgs extends RepositorySaveFunctionArgs>(args: BaseBootstrapFunctionArgs<UiSettingGetArgs, UiSettingSaveArgs, CheckoutGetFunctionArgs, CheckoutSaveFunctionArgs, CheckoutItemGetFunctionArgs, CheckoutItemSaveFunctionArgs, CheckoutBookingGetFunctionArgs, CheckoutBookingSaveFunctionArgs, CheckoutFeedbackGetFunctionArgs, CheckoutFeedbackSaveFunctionArgs>): BuildBootstrapFunctionReturn;
 }
 declare const baseBootstrap: BaseBootstrapFunction;
 export { baseBootstrap, MESSAGING_CONTEXT_ID };

package/dist/src/infrastructure/delivery/baseBootstrap.js

@@ -4,6 +4,8 @@ import { START_CHECKOUT } from "../../domain/checkout/command/startCheckout";
 import { markCheckoutAsPaidHandler, startCheckoutHandler } from "../../domain/checkout/model/checkout";
 import { BOOK_CHECKOUT_BOOKING_FOR_CHECKOUT_ITEM } from "../../domain/checkoutBooking/command/bookCheckoutBookingForCheckoutItem";
 import { bookCheckoutBookingForCheckoutItemHandler, } from "../../domain/checkoutBooking/model/checkoutBooking";
+import { GIVE_CHECKOUT_FEEDBACK } from "../../domain/checkoutFeedback/command/giveCheckoutFeedback";
+import { giveCheckoutFeedbackHandler } from "../../domain/checkoutFeedback/model/checkoutFeedback";
 import { KEEP_CHECKOUT_ITEM } from "../../domain/checkoutItem/command/keepCheckoutItem";
 import { REPLACE_CHECKOUT_ITEM } from "../../domain/checkoutItem/command/replaceCheckoutItem";
 import { RETURN_CHECKOUT_ITEM } from "../../domain/checkoutItem/command/returnCheckoutItem";
@@ -23,7 +25,7 @@ import { viewPricingByCheckoutIdHandler, VIEW_PRICING_BY_CHECKOUT_ID, } from "..
 import { listReturnQuestionsByCheckoutItemIdHandler, LIST_RETURN_QUESTIONS_BY_CHECKOUT_ITEM_ID, } from "../../projection/returnQuestion/listReturnQuestionsByCheckoutItemId";
 import { viewUiSettingByKeyHandler, VIEW_UI_SETTING_BY_KEY, } from "../../projection/uiSetting/viewUiSettingByKey";
 const MESSAGING_CONTEXT_ID = "Checkout";
-const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdView, isCheckoutEnabledByCustomerIdView, fiveItemsDiscountByCustomerIdView, uiSettingByKeyView, checkoutItemByIdView, returnQuestionsByCheckoutItemIdView, bookedSizeChangeProductsVariantsForCheckoutItemView, pricingByCheckoutIdView, paymentFlowPayloadByCheckoutIdView, checkoutQuestionsByCheckoutIdView, getUiSetting, saveUiSetting, uiSettingsDependencies, getCheckout, saveCheckout, checkoutsDependencies, getCheckoutItem, saveCheckoutItem, checkoutItemsDependencies, getCheckoutBooking, saveCheckoutBooking, checkoutBookingsDependencies, }) => messagingBootstrap({ id: MESSAGING_CONTEXT_ID })
+const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdView, isCheckoutEnabledByCustomerIdView, fiveItemsDiscountByCustomerIdView, uiSettingByKeyView, checkoutItemByIdView, returnQuestionsByCheckoutItemIdView, bookedSizeChangeProductsVariantsForCheckoutItemView, pricingByCheckoutIdView, paymentFlowPayloadByCheckoutIdView, checkoutQuestionsByCheckoutIdView, getUiSetting, saveUiSetting, uiSettingsDependencies, getCheckout, saveCheckout, checkoutsDependencies, getCheckoutItem, saveCheckoutItem, checkoutItemsDependencies, getCheckoutBooking, saveCheckoutBooking, checkoutBookingsDependencies, getCheckoutFeedback, saveCheckoutFeedback, checkoutFeedbacksDependencies, }) => messagingBootstrap({ id: MESSAGING_CONTEXT_ID })
     .query(VIEW_FIVE_ITEMS_DISCOUNT_BY_CUSTOMER_ID, viewFiveItemsDiscountByCustomerIdHandler, {
     view: fiveItemsDiscountByCustomerIdView,
 })
@@ -61,6 +63,7 @@ const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdVie
     view: bookedSizeChangeProductsVariantsForCheckoutItemView,
 })
     .command(BOOK_CHECKOUT_BOOKING_FOR_CHECKOUT_ITEM, bookCheckoutBookingForCheckoutItemHandler)(getCheckoutBooking, saveCheckoutBooking, ...checkoutBookingsDependencies)
+    .command(GIVE_CHECKOUT_FEEDBACK, giveCheckoutFeedbackHandler)(getCheckoutFeedback, saveCheckoutFeedback, ...checkoutFeedbacksDependencies)
     .query(VIEW_UI_SETTING_BY_KEY, viewUiSettingByKeyHandler, {
     view: uiSettingByKeyView,
 })

package/dist/src/infrastructure/delivery/bootstrap.js

@@ -1,5 +1,6 @@
 import { getCheckout, saveCheckout } from "../domain/checkout/model/httpCheckouts";
 import { getCheckoutBooking, saveCheckoutBooking } from "../domain/checkoutBooking/model/httpCheckoutBookings";
+import { getCheckoutFeedback, saveCheckoutFeedback } from "../domain/checkoutFeedback/model/httpCheckoutFeedbacks";
 import { getCheckoutItem, saveCheckoutItem } from "../domain/checkoutItem/model/httpCheckoutItems";
 import { getUiSetting, saveUiSetting } from "../domain/uiSetting/model/storageUiSettings";
 import { read, write } from "../persistence/asyncStorageStorage";
@@ -51,6 +52,9 @@ const bootstrap = ({ apiUrl, authToken }) => {
         getCheckoutBooking,
         saveCheckoutBooking,
         checkoutBookingsDependencies: [{ httpPost }],
+        getCheckoutFeedback,
+        saveCheckoutFeedback,
+        checkoutFeedbacksDependencies: [{ httpPost }],
     });
 };
 export { bootstrap };

package/dist/src/infrastructure/delivery/mock/checkoutFeedbackDataSource.d.ts

@@ -0,0 +1,14 @@
+import { CheckoutFeedbackProjection } from "../../../projection/checkoutFeedback/checkoutFeedback";
+interface CheckoutFeedbackDataSourceFunctionArgs {
+    readonly data: CheckoutFeedbackProjection;
+}
+interface CheckoutFeedbackDataSource {
+    readonly getCheckoutFeedback: (id: string) => CheckoutFeedbackProjection | undefined;
+    readonly saveCheckoutFeedback: (checkoutFeedback: CheckoutFeedbackProjection) => void;
+}
+interface CheckoutFeedbackDataSourceFunction {
+    (args: CheckoutFeedbackDataSourceFunctionArgs): CheckoutFeedbackDataSource;
+}
+declare const checkoutFeedbackDataSource: CheckoutFeedbackDataSourceFunction;
+export type { CheckoutFeedbackDataSource };
+export { checkoutFeedbackDataSource };

package/dist/src/infrastructure/delivery/mock/checkoutFeedbackDataSource.js

@@ -0,0 +1,12 @@
+const checkoutFeedbackDataSource = ({ data: initialData }) => {
+    let data = initialData;
+    const getCheckoutFeedback = () => data;
+    const saveCheckoutFeedback = (checkoutFeedback) => {
+        data = checkoutFeedback;
+    };
+    return {
+        getCheckoutFeedback,
+        saveCheckoutFeedback,
+    };
+};
+export { checkoutFeedbackDataSource };

package/dist/src/infrastructure/delivery/mock/dataSourceCheckoutFeedbacks.d.ts

@@ -0,0 +1,14 @@
+import { RepositoryGetFunctionArgs, RepositorySaveFunctionArgs } from "@lookiero/messaging";
+import { CheckoutFeedback } from "../../../domain/checkoutFeedback/model/checkoutFeedback";
+import { CheckoutFeedbacksGetFunction, CheckoutFeedbacksSaveFunction } from "../../../domain/checkoutFeedback/model/checkoutFeedbacks";
+import { CheckoutFeedbackProjection } from "../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackDataSource } from "./checkoutFeedbackDataSource";
+declare const toCheckoutFeedbackProjection: (checkoutFeedback: CheckoutFeedback) => CheckoutFeedbackProjection;
+declare const getCheckoutFeedback: CheckoutFeedbacksGetFunction<RepositoryGetFunctionArgs>;
+interface DataSourceCheckoutItemsSaveFunctionArgs extends RepositorySaveFunctionArgs {
+    readonly dataSource: CheckoutFeedbackDataSource;
+}
+interface DataSourceCheckoutItemsSaveFunction extends CheckoutFeedbacksSaveFunction<DataSourceCheckoutItemsSaveFunctionArgs> {
+}
+declare const saveCheckoutFeedback: DataSourceCheckoutItemsSaveFunction;
+export { getCheckoutFeedback, saveCheckoutFeedback, toCheckoutFeedbackProjection };

package/dist/src/infrastructure/delivery/mock/dataSourceCheckoutFeedbacks.js

@@ -0,0 +1,19 @@
+import invariant from "tiny-invariant";
+import { viewCheckoutFeedbackById, } from "../../../projection/checkoutFeedback/viewCheckoutFeedbackById";
+const toCheckoutFeedbackDomain = (checkoutFeedback) => {
+    invariant(checkoutFeedback, "No checkoutFeedback found!");
+    return {
+        aggregateId: checkoutFeedback.id,
+        feedbacks: checkoutFeedback.feedbacks,
+        domainEvents: [],
+    };
+};
+const toCheckoutFeedbackProjection = (checkoutFeedback) => ({
+    id: checkoutFeedback.aggregateId,
+    feedbacks: checkoutFeedback.feedbacks,
+});
+const getCheckoutFeedback = ({ queryBus }) => async (aggregateId) => toCheckoutFeedbackDomain(await queryBus(viewCheckoutFeedbackById({ checkoutFeedbackId: aggregateId })));
+const saveCheckoutFeedback = ({ dataSource }) => async (aggregateRoot) => {
+    dataSource.saveCheckoutFeedback(toCheckoutFeedbackProjection(aggregateRoot));
+};
+export { getCheckoutFeedback, saveCheckoutFeedback, toCheckoutFeedbackProjection };

package/dist/src/infrastructure/projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId.js

@@ -1,4 +1,6 @@
 import { useQuery } from "@lookiero/messaging-react";
+import { CHECKOUT_PAID } from "../../../../domain/checkout/model/checkoutPaid";
+import { CHECKOUT_FEEDBACK_GIVEN, } from "../../../../domain/checkoutFeedback/model/checkoutFeedbackGiven";
 import { CHECKOUT_ITEM_KEPT } from "../../../../domain/checkoutItem/model/checkoutItemKept";
 import { CHECKOUT_ITEM_REPLACED, } from "../../../../domain/checkoutItem/model/checkoutItemReplaced";
 import { CHECKOUT_ITEM_RETURNED, } from "../../../../domain/checkoutItem/model/checkoutItemReturned";
@@ -7,7 +9,13 @@ import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const isCheckoutItemKept = (event) => event.name === CHECKOUT_ITEM_KEPT;
 const isCheckoutItemReturned = (event) => event.name === CHECKOUT_ITEM_RETURNED;
 const isCheckoutItemReplaced = (event) => event.name === CHECKOUT_ITEM_REPLACED;
-const shouldInvalidate = (event) => isCheckoutItemKept(event) || isCheckoutItemReplaced(event) || isCheckoutItemReturned(event);
+const isCheckoutPaid = (event) => event.name === CHECKOUT_PAID;
+const isCheckoutFeedbackGiven = (event) => event.name === CHECKOUT_FEEDBACK_GIVEN;
+const shouldInvalidate = (event) => isCheckoutItemKept(event) ||
+    isCheckoutItemReplaced(event) ||
+    isCheckoutItemReturned(event) ||
+    isCheckoutPaid(event) ||
+    isCheckoutFeedbackGiven(event);
 const useViewFirstAvailableCheckoutByCustomerId = ({ customerId }) => useQuery({
     query: viewFirstAvailableCheckoutByCustomerId({ customerId }),
     contextId: MESSAGING_CONTEXT_ID,

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback.d.ts

@@ -0,0 +1,29 @@
+import { FC, ReactNode } from "react";
+import { FeedbackProjection } from "../../../../../../projection/checkoutFeedback/feedback";
+interface OnChangeCheckoutQuestionFeedbackFunctionArgs {
+    readonly checkoutQuestionId: string;
+    readonly checkoutQuestionFeedback: string | undefined;
+}
+interface OnChangeCheckoutQuestionFeedbackFunction {
+    (args: OnChangeCheckoutQuestionFeedbackFunctionArgs): void;
+}
+interface CheckoutQuestionFeedbackContextProviderProps {
+    readonly feedback: FeedbackProjection | undefined;
+    readonly children: ReactNode;
+}
+declare const CheckoutQuestionFeedbackProvider: FC<CheckoutQuestionFeedbackContextProviderProps>;
+interface UseCheckoutQuestionFeedbackForIdFunctionArgs {
+    readonly id: string;
+}
+interface UseCheckoutQuestionFeedbackForIdFunction {
+    (args: UseCheckoutQuestionFeedbackForIdFunctionArgs): {
+        readonly feedback: string | undefined;
+        readonly onChange: OnChangeCheckoutQuestionFeedbackFunction;
+    };
+}
+declare const useCheckoutQuestionFeedbackForId: UseCheckoutQuestionFeedbackForIdFunction;
+interface UseCheckoutQuestionFeedbackFunction {
+    (): FeedbackProjection;
+}
+declare const useCheckoutQuestionFeedback: UseCheckoutQuestionFeedbackFunction;
+export { useCheckoutQuestionFeedbackForId, useCheckoutQuestionFeedback, CheckoutQuestionFeedbackProvider };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback.js

@@ -0,0 +1,28 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import invariant from "tiny-invariant";
+const CheckoutQuestionFeedbackContext = createContext(null);
+const CheckoutQuestionFeedbackProvider = ({ feedback = {}, children, }) => {
+    const [contextFeedback, setContextFeedback] = useState(feedback);
+    const onChange = useCallback(({ checkoutQuestionId, checkoutQuestionFeedback }) => setContextFeedback((feedback) => checkoutQuestionFeedback
+        ? { ...feedback, [checkoutQuestionId]: checkoutQuestionFeedback }
+        : Object.entries(feedback).reduce((acc, [id, feedback]) => (id !== checkoutQuestionId ? { ...acc, [id]: feedback } : acc), {})), []);
+    useEffect(() => setContextFeedback(feedback), [feedback]);
+    const value = useMemo(() => ({
+        feedback: contextFeedback,
+        onChange,
+    }), [contextFeedback, onChange]);
+    return React.createElement(CheckoutQuestionFeedbackContext.Provider, { value: value }, children);
+};
+const useCheckoutQuestionFeedbackForId = ({ id }) => {
+    const checkoutQuestionFeedbackContext = useContext(CheckoutQuestionFeedbackContext);
+    invariant(checkoutQuestionFeedbackContext, "Your are trying to use the useCheckoutQuestionFeedbackForId hook without wrapping your app with the <CheckoutQuestionFeedbackProvider>.");
+    const { feedback, onChange } = checkoutQuestionFeedbackContext;
+    return { feedback: feedback[id], onChange };
+};
+const useCheckoutQuestionFeedback = () => {
+    const checkoutQuestionFeedbackContext = useContext(CheckoutQuestionFeedbackContext);
+    invariant(checkoutQuestionFeedbackContext, "Your are trying to use the useCheckoutQuestionFeedback hook without wrapping your app with the <CheckoutQuestionFeedbackProvider>.");
+    const { feedback } = checkoutQuestionFeedbackContext;
+    return feedback;
+};
+export { useCheckoutQuestionFeedbackForId, useCheckoutQuestionFeedback, CheckoutQuestionFeedbackProvider };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js

@@ -3,16 +3,20 @@ import { BUTTON_VARIANT } from "@lookiero/aurora-next/build/components/atoms/But
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React, { useCallback } from "react";
 import { CHECKOUT_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { theme } from "../../../../../theme/theme";
+import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style } from "./ButtonCheckoutQuestionItem.style";
-const ButtonCheckoutQuestionItem = ({ checkoutQuestion }) => {
+const { colorAccent, colorBase } = theme();
+const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
+    const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const optionText = useI18nMessage({ id: checkoutQuestion.name, prefix: CHECKOUT_QUESTIONS_PREFIX });
-    const handleOnPress = useCallback(() => void 0, []);
+    const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
     return (React.createElement(Button
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     , { 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        style: style.button, variant: BUTTON_VARIANT.SECONDARY, onPress: handleOnPress }, optionText));
+        style: [style.button, { backgroundColor: feedback === checkoutQuestion.id ? colorAccent : colorBase }], variant: BUTTON_VARIANT.SECONDARY, onPress: handleOnPress }, optionText));
 };
 export { ButtonCheckoutQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.js

@@ -1,10 +1,13 @@
 import React, { useCallback } from "react";
 import { Pressable } from "react-native";
 import invariant from "tiny-invariant";
+import { theme } from "../../../../../theme/theme";
+import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style } from "./IconCheckoutQuestionItem.style";
 import { Happy } from "./icons/Happy";
 import { Normal } from "./icons/Normal";
 import { Sad } from "./icons/Sad";
+const { colorAccent } = theme();
 const ICON = {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     "checkout.checkout_question.icon.bad": Sad,
@@ -13,11 +16,12 @@ const ICON = {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     "checkout.checkout_question.icon.good": Happy,
 };
-const IconCheckoutQuestionItem = ({ checkoutQuestion }) => {
+const IconCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
     const Icon = ICON[checkoutQuestion.name];
-    const handleOnPress = useCallback(() => void 0, []);
+    const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
+    const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
     invariant(Icon, "CheckoutQuestion icon does not exist");
     return (React.createElement(Pressable, { onPress: handleOnPress },
-        React.createElement(Icon, { style: style.icon, testID: checkoutQuestion.name })));
+        React.createElement(Icon, { fill: feedback === checkoutQuestion.id ? colorAccent : "none", style: style.icon, testID: checkoutQuestion.name })));
 };
 export { IconCheckoutQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js

@@ -1,15 +1,16 @@
 import { useI18nMessage } from "@lookiero/i18n-react";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { RETURN_QUESTIONS_PREFIX } from "../../../../../i18n/i18n";
+import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 const TEXTAREA_MIN_HEIGHT = 96;
-const TextareaCheckoutQuestionItem = ({ checkoutQuestion }) => {
+const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
     const placeholderText = useI18nMessage({
         id: checkoutQuestion.placeholder,
         prefix: RETURN_QUESTIONS_PREFIX,
     });
-    const [value, setValue] = useState("");
-    const handleOnChange = useCallback((value) => setValue(value), []);
-    return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: value, multiline: true, onChange: handleOnChange }));
+    const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
+    const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);
+    return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: feedback, multiline: true, onChange: handleOnChange }));
 };
 export { TextareaCheckoutQuestionItem };

package/dist/src/infrastructure/ui/views/feedback/Feedback.js

@@ -1,35 +1,30 @@
-import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
-import { useI18nMessage } from "@lookiero/i18n-react";
-import { QueryStatus } from "@lookiero/messaging-react";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback } from "react";
 import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
+import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId";
 import { Body } from "../../components/layouts/body/Body";
+import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
-import { I18nMessages } from "../../i18n/i18n";
 import { style } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
 const Feedback = ({ customerId }) => {
-    const buttonText = useI18nMessage({ id: I18nMessages.FEEDBACK_BUTTON });
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
         checkoutId: checkout?.id,
     });
-    const handlePress = useCallback(() => void 0, []);
+    const [giveCheckoutFeedback, giveCheckoutFeedbackStatus] = useGiveCheckoutFeedback({
+        checkoutId: checkout?.id,
+    });
+    const handleOnSubmit = useCallback((feedbacks) => giveCheckoutFeedback({ feedbacks }), [giveCheckoutFeedback]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(checkoutQuestionsStatus);
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaScrollView, null,
-        React.createElement(Body, { style: { column: style.bodyColumn } },
-            React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [] }),
-            React.createElement(Button
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            , { 
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                style: style.button, onPress: handlePress }, buttonText))));
+    return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {} },
+        React.createElement(SafeAreaScrollView, null,
+            React.createElement(Body, { style: { column: style.bodyColumn } },
+                React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };
 export { Feedback };

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.d.ts

@@ -2,8 +2,5 @@ declare const style: {
     bodyColumn: {
         paddingHorizontal: number;
     };
-    button: {
-        marginTop: number;
-    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.js

@@ -5,8 +5,5 @@ const style = StyleSheet.create({
     bodyColumn: {
         paddingHorizontal: spaceXL,
     },
-    button: {
-        marginTop: 65,
-    },
 });
 export { style };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.d.ts

@@ -1,7 +1,10 @@
 import { FC } from "react";
+import { FeedbackProjection } from "../../../../../../projection/checkoutFeedback/feedback";
 import { CheckoutQuestionProjection } from "../../../../../../projection/checkoutQuestion/checkoutQuestion";
 interface CheckoutQuestionsFormProps {
     readonly checkoutQuestions: CheckoutQuestionProjection[];
+    readonly submitButtonDisabled: boolean;
+    readonly onSubmit: (feedback: FeedbackProjection) => void;
 }
 declare const CheckoutQuestionsForm: FC<CheckoutQuestionsFormProps>;
 export { CheckoutQuestionsForm };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js

@@ -1,12 +1,17 @@
-import React from "react";
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React, { useCallback } from "react";
 import { CheckoutQuestionType, } from "../../../../../../projection/checkoutQuestion/checkoutQuestion";
 import { CheckoutQuestions } from "../../../../components/organisms/checkoutQuestions/CheckoutQuestions";
+import { useCheckoutQuestionFeedback } from "../../../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItemProvider, } from "../../../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionItem";
 import { ButtonCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem";
 import { HostDefaultCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem";
 import { HostSelectCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem";
 import { IconCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem";
 import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./CheckoutQuestionsForm.style";
 const checkoutQuestionItems = {
     [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
     [CheckoutQuestionType.HOST_TEXTAREA]: HostDefaultCheckoutQuestionItem,
@@ -15,6 +20,16 @@ const checkoutQuestionItems = {
     [CheckoutQuestionType.ICON]: IconCheckoutQuestionItem,
     [CheckoutQuestionType.BUTTON]: ButtonCheckoutQuestionItem,
 };
-const CheckoutQuestionsForm = ({ checkoutQuestions }) => (React.createElement(CheckoutQuestionItemProvider, { checkoutQuestionItems: checkoutQuestionItems },
-    React.createElement(CheckoutQuestions, { checkoutQuestions: checkoutQuestions })));
+const CheckoutQuestionsForm = ({ checkoutQuestions, submitButtonDisabled, onSubmit, }) => {
+    const buttonText = useI18nMessage({ id: I18nMessages.FEEDBACK_BUTTON });
+    const feedback = useCheckoutQuestionFeedback();
+    const handlePress = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CheckoutQuestionItemProvider, { checkoutQuestionItems: checkoutQuestionItems },
+            React.createElement(CheckoutQuestions, { checkoutQuestions: checkoutQuestions })),
+        React.createElement(Button, { busy: submitButtonDisabled, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            style: style.button, onPress: handlePress }, buttonText)));
+};
 export { CheckoutQuestionsForm };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    button: {
+        marginTop: number;
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    button: {
+        marginTop: 65,
+    },
+});
+export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.3.19",
+  "version": "0.3.20",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [