@lookiero/checkout 0.8.16 → 0.8.18

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

@@ -1,5 +1,5 @@
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { Platform } from "react-native";
 import { useLogger } from "../../../../shared/logging/useLogger";
 import { usePageView } from "../../../../shared/tracking/infrastructure/usePageView";
@@ -24,9 +24,11 @@ const Feedback = ({ customerId, country }) => {
         checkoutId: checkout?.id,
         logger,
     });
+    const checkoutFeedbackGivenRef = useRef(false);
     const handleOnSubmit = useCallback(async (feedbacks) => {
         try {
             await giveCheckoutFeedback({ feedbacks });
+            checkoutFeedbackGivenRef.current = true;
         }
         catch (e) { }
     }, [giveCheckoutFeedback]);
@@ -35,9 +37,14 @@ const Feedback = ({ customerId, country }) => {
         country,
         checkoutId: checkout?.id,
     });
-    // Give empty feedback when this view is unmounted
+    /**
+     * Give empty feedback when this view is unmounted
+     * (if feedback has not already been given)
+     */
     useEffect(() => () => {
-        giveCheckoutFeedback({ feedbacks: {} });
+        if (!checkoutFeedbackGivenRef.current) {
+            giveCheckoutFeedback({ feedbacks: {} });
+        }
     }, [giveCheckoutFeedback]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(checkoutQuestionsStatus);

package/dist/infrastructure/ui/views/item/Item.js

@@ -1,7 +1,7 @@
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Platform, View } from "react-native";
-import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
+import { useParams } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import "../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useLogger } from "../../../../shared/logging/useLogger";
@@ -19,8 +19,6 @@ import { TrackingPage } from "../../../tracking/tracking";
 import { Body } from "../../components/layouts/body/Body";
 import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
-import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { theme } from "../../theme/theme";
 import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
 import { style } from "./Item.style";
@@ -30,7 +28,6 @@ import { ProductVariantDescription } from "./components/productVariantDescriptio
 import { ProductVariantSlider } from "./components/productVariantSlider/ProductVariantSlider";
 import { ReturnQuestionsFeedback } from "./components/returnQuestionsFeedback/ReturnQuestionsFeedback";
 import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
-import { SizeChangeModal } from "./components/sizeChangeModal/SizeChangeModal";
 import { SizeWithoutStockModal } from "./components/sizeWithoutStockModal/SizeWithoutStockModal";
 const { spaceXL } = theme();
 const Item = ({ customerId, country }) => {
@@ -44,35 +41,11 @@ const Item = ({ customerId, country }) => {
         checkoutId: checkout?.id,
         checkoutItemId: checkoutItem.id,
     });
-    const basePath = useBasePath();
-    const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
-    const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
-    const navigate = useNavigate();
-    const navigateToNextView = useCallback(() => {
-        if (itemRouteMatch) {
-            const nextItemWithoutCustomerDecision = checkout?.items
-                .filter((item) => item.id !== id)
-                .find((item) => item.status === CheckoutItemStatus.INITIAL);
-            if (nextItemWithoutCustomerDecision) {
-                navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItemWithoutCustomerDecision.id }));
-            }
-        }
-        else if (itemDetailRouteMatch) {
-            navigate(`${basePath}/${Routes.SUMMARY}`);
-        }
-    }, [itemRouteMatch, itemDetailRouteMatch, checkout?.items, id, navigate, basePath]);
-    const [customerDecissionMade, setCustomerDecissionMade] = useState();
-    useEffect(() => {
-        setCustomerDecissionMade(checkoutItem.status !== CheckoutItemStatus.INITIAL);
-    }, [checkoutItem.status, id]);
-    const [resetCheckoutItem] = useResetCheckoutItem({
+    const customerDecissionMade = checkoutItem.status !== CheckoutItemStatus.INITIAL;
+    const [resetCheckoutItem, resetCheckoutItemStatus] = useResetCheckoutItem({
         checkoutItemId: checkoutItem.id,
         logger,
     });
-    const handleOnBannerPress = useCallback(() => {
-        resetCheckoutItem();
-        setCustomerDecissionMade(false);
-    }, [resetCheckoutItem]);
     const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id, logger });
     const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
         checkoutItemId: checkoutItem.id,
@@ -85,14 +58,6 @@ const Item = ({ customerId, country }) => {
     const [sizeWithoutStockModalVisible, setSizeWithoutStockModalVisible] = useState(false);
     const handleOnShowSizeWithoutStockModal = useCallback(() => setSizeWithoutStockModalVisible(true), []);
     const handleOnHideSizeWithoutStockModal = useCallback(() => setSizeWithoutStockModalVisible(false), []);
-    const [sizeChangeModalVisible, setSizeChangeModalVisible] = useState(false);
-    const handleOnShowSizeChangeModal = useCallback(() => setSizeChangeModalVisible(true), []);
-    const handleOnHideSizeChangeModal = useCallback(() => {
-        setSizeChangeModalVisible(false);
-        if (replaceCheckoutItemStatus === CommandStatus.SUCCESS) {
-            navigateToNextView();
-        }
-    }, [navigateToNextView, replaceCheckoutItemStatus]);
     const [bookedProductsVariants, bookedProductsVariantsStatus] = useViewBookedProductsVariantsForCheckoutItem({
         checkoutItemId: checkoutItem.id,
     });
@@ -113,19 +78,11 @@ const Item = ({ customerId, country }) => {
     const handleOnShowReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
     const handleOnHideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
     const handleOnEditFeedback = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
-    const handleOnSubmit = useCallback(async (feedbacks) => {
+    const handleOnSubmit = useCallback((feedbacks) => {
         handleOnHideReturnQuestions();
-        await returnCheckoutItem({ feedbacks });
-        navigateToNextView();
-    }, [handleOnHideReturnQuestions, navigateToNextView, returnCheckoutItem]);
-    const handleOnKeep = useCallback(async () => {
-        await keepCheckoutItem();
-        navigateToNextView();
-    }, [keepCheckoutItem, navigateToNextView]);
-    const handleOnReplace = useCallback(async (replacedForId) => {
-        await replaceCheckoutItem({ replacedForId });
-        handleOnShowSizeChangeModal();
-    }, [handleOnShowSizeChangeModal, replaceCheckoutItem]);
+        returnCheckoutItem({ feedbacks });
+    }, [handleOnHideReturnQuestions, returnCheckoutItem]);
+    const handleOnReplace = useCallback((replacedForId) => replaceCheckoutItem({ replacedForId }), [replaceCheckoutItem]);
     const handleOnReturn = useCallback(() => handleOnShowReturnQuestions(), [handleOnShowReturnQuestions]);
     const productVariantSelected = useMemo(() => checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
         ? { id: checkoutItem.replacedFor.id, size: checkoutItem.replacedFor.size }
@@ -142,10 +99,9 @@ const Item = ({ customerId, country }) => {
     const { media, brand, name, color } = checkoutItem.productVariant;
     return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: checkoutItem.feedbacks || {} },
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
-        React.createElement(SizeChangeModal, { visible: sizeChangeModalVisible, onDismiss: handleOnHideSizeChangeModal }),
-        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, footer: !customerDecissionMade && (React.createElement(ItemActions, { country: country, keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })) },
+        React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, footer: !customerDecissionMade && (React.createElement(ItemActions, { country: country, keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: keepCheckoutItem, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })) },
             React.createElement(Body, null,
-                customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
+                customerDecissionMade && (React.createElement(CustomerDecissionBanner, { changingDecission: resetCheckoutItemStatus === CommandStatus.LOADING, checkoutItemStatus: checkoutItem.status, onPress: resetCheckoutItem })),
                 React.createElement(View, { style: [style.content, { paddingBottom: Platform.OS === "web" ? spaceXL : stickyHeight }] },
                     React.createElement(View, { style: style.sliderContainer },
                         React.createElement(ProductVariantSlider, { producVariantMedia: media })),

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.d.ts

@@ -4,6 +4,7 @@ type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemSta
 interface CustomerDecissionBannerProps {
     readonly checkoutItemStatus: CustomerDecissionBannerStatus;
     readonly onPress: () => void;
+    readonly changingDecission: boolean;
 }
 declare const CustomerDecissionBanner: FC<CustomerDecissionBannerProps>;
 export type { CustomerDecissionBannerStatus };

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -1,21 +1,27 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import React from "react";
-import { Pressable } from "react-native";
+import { Pressable, View } from "react-native";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { Spinner } from "../../../../../../shared/ui/components/atoms/spinner/Spinner";
 import { Banner } from "../../../../components/layouts/banner/Banner";
 import { I18nMessages } from "../../../../i18n/i18n";
+import { theme } from "../../../../theme/theme";
 import { style } from "./CustomerDecissionBanner.style";
+const { colorContent } = theme();
 const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.KEPT]: I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION,
     [CheckoutItemStatus.REPLACED]: I18nMessages.ITEM_BANNER_CUSTOMER_REPLACED_DECISSION,
     [CheckoutItemStatus.RETURNED]: I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION,
 };
-const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
+const CustomerDecissionBanner = ({ checkoutItemStatus, onPress, changingDecission, }) => {
     const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] }) || "";
     const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
     return (React.createElement(Banner, { text: decissionText },
-        React.createElement(Pressable, { style: style.button, onPress: onPress },
-            React.createElement(Text, { level: 2, style: style.buttonText, detail: true }, bannerButtonText))));
+        React.createElement(View, { style: style.actions },
+            React.createElement(View, { style: style.placeholder }),
+            React.createElement(Pressable, { onPress: changingDecission ? undefined : onPress },
+                React.createElement(Text, { level: 2, style: style.buttonText, detail: true }, bannerButtonText)),
+            React.createElement(View, { style: style.placeholder }, changingDecission && React.createElement(Spinner, { color: colorContent, size: 20 })))));
 };
 export { CustomerDecissionBanner };

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.d.ts

@@ -1,9 +1,16 @@
 declare const style: {
-    button: {
+    actions: {
+        flexDirection: "row";
+        justifyContent: "space-between";
         marginTop: number;
+        minHeight: number;
+        width: string;
     };
     buttonText: {
         textDecorationLine: "underline";
     };
+    placeholder: {
+        width: number;
+    };
 };
 export { style };

package/dist/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.js

@@ -2,11 +2,18 @@ import { StyleSheet } from "react-native";
 import { theme } from "../../../../theme/theme";
 const { spaceM } = theme();
 const style = StyleSheet.create({
-    button: {
+    actions: {
+        flexDirection: "row",
+        justifyContent: "space-between",
         marginTop: spaceM,
+        minHeight: 20,
+        width: "100%",
     },
     buttonText: {
         textDecorationLine: "underline",
     },
+    placeholder: {
+        width: 20,
+    },
 });
 export { style };

package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -17,7 +17,8 @@ const ItemActions = ({ productVariants, productVariantSelected, keepButtonLoadin
         label: size({ size: productVariant.size, country }),
         value: productVariant.id,
     })), [country, productVariants]);
-    const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === productVariantSelected.id, [sizeSelectorOptions, productVariantSelected.id]);
+    const disabledSizeSelector = useMemo(() => sizeSelectorOptions.length === 0 ||
+        (sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === productVariantSelected.id), [sizeSelectorOptions, productVariantSelected.id]);
     return (React.createElement(Sticky, { onLayout: onLayout },
         React.createElement(Body, { style: { column: style.container } },
             React.createElement(Button, { busy: keepButtonLoading, onPress: onKeep }, keepButtonText),

package/dist/shared/notifications/domain/notification/command/createModalNotification.d.ts

@@ -0,0 +1,18 @@
+import { Command } from "@lookiero/messaging";
+import { NotificationType } from "../model/notification";
+declare const CREATE_MODAL_NOTIFICATION = "create_modal_notification";
+interface CreateModalNotificationPayload {
+    readonly aggregateId: string;
+    readonly bodyI18nKey: string;
+    readonly titleI18nKey: string;
+    readonly acceptI18nKey: string;
+}
+interface CreateModalNotification extends Command<typeof CREATE_MODAL_NOTIFICATION>, CreateModalNotificationPayload {
+    readonly type: NotificationType.MODAL;
+}
+interface CreateModalNotificationFunction {
+    (payload: CreateModalNotificationPayload): CreateModalNotification;
+}
+declare const createModalNotification: CreateModalNotificationFunction;
+export type { CreateModalNotification };
+export { CREATE_MODAL_NOTIFICATION, createModalNotification };

package/dist/shared/notifications/domain/notification/command/createModalNotification.js

@@ -0,0 +1,9 @@
+import { command } from "@lookiero/messaging";
+import { NotificationType } from "../model/notification";
+const CREATE_MODAL_NOTIFICATION = "create_modal_notification";
+const createModalNotification = ({ aggregateId, ...payload }) => ({
+    ...command({ aggregateId, name: CREATE_MODAL_NOTIFICATION }),
+    ...payload,
+    type: NotificationType.MODAL,
+});
+export { CREATE_MODAL_NOTIFICATION, createModalNotification };

package/dist/shared/notifications/domain/notification/command/createToastNotification.d.ts

@@ -0,0 +1,18 @@
+import { Command } from "@lookiero/messaging";
+import { NotificationLevel, NotificationType } from "../model/notification";
+declare const CREATE_TOAST_NOTIFICATION = "create_toast_notification";
+interface CreateToastNotificationPayload {
+    readonly aggregateId: string;
+    readonly level: NotificationLevel;
+    readonly bodyI18nKey: string;
+    readonly titleI18nKey: string | undefined;
+}
+interface CreateToastNotification extends Command<typeof CREATE_TOAST_NOTIFICATION>, CreateToastNotificationPayload {
+    readonly type: NotificationType.TOAST;
+}
+interface CreateToastNotificationFunction {
+    (payload: CreateToastNotificationPayload): CreateToastNotification;
+}
+declare const createToastNotification: CreateToastNotificationFunction;
+export type { CreateToastNotification };
+export { CREATE_TOAST_NOTIFICATION, createToastNotification };

package/dist/shared/notifications/domain/notification/command/createToastNotification.js

@@ -0,0 +1,9 @@
+import { command } from "@lookiero/messaging";
+import { NotificationType } from "../model/notification";
+const CREATE_TOAST_NOTIFICATION = "create_toast_notification";
+const createToastNotification = ({ aggregateId, ...payload }) => ({
+    ...command({ aggregateId, name: CREATE_TOAST_NOTIFICATION }),
+    ...payload,
+    type: NotificationType.TOAST,
+});
+export { CREATE_TOAST_NOTIFICATION, createToastNotification };

package/dist/shared/notifications/domain/notification/model/notification.d.ts

@@ -1,18 +1,25 @@
 import { AggregateRoot, CommandHandlerFunction } from "@lookiero/messaging";
-import { CreateNotification } from "../command/createNotification";
+import { CreateModalNotification } from "../command/createModalNotification";
+import { CreateToastNotification } from "../command/createToastNotification";
 import { RemoveNotification } from "../command/removeNotification";
+declare enum NotificationType {
+    TOAST = "TOAST",
+    MODAL = "MODAL"
+}
 declare enum NotificationLevel {
     INFO = "INFO",
     ERROR = "ERROR",
     SUCCESS = "SUCCESS"
 }
-export { NotificationLevel };
 interface Notification extends AggregateRoot {
+    readonly type: NotificationType;
     readonly level: NotificationLevel;
     readonly bodyI18nKey: string;
     readonly titleI18nKey: string | undefined;
+    readonly acceptI18nKey: string | undefined;
 }
-declare const createNotificationHandler: CommandHandlerFunction<CreateNotification, Notification>;
+declare const createToastNotificationHandler: CommandHandlerFunction<CreateToastNotification, Notification>;
+declare const createModalNotificationHandler: CommandHandlerFunction<CreateModalNotification, Notification>;
 declare const removeNotificationHandler: CommandHandlerFunction<RemoveNotification, Notification>;
 export type { Notification };
-export { createNotificationHandler, removeNotificationHandler };
+export { NotificationLevel, NotificationType, createToastNotificationHandler, createModalNotificationHandler, removeNotificationHandler, };

package/dist/shared/notifications/domain/notification/model/notification.js

@@ -1,22 +1,38 @@
 import { notificationCreated } from "./notificationCreated";
 import { notificationRemoved } from "./notificationRemoved";
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["TOAST"] = "TOAST";
+    NotificationType["MODAL"] = "MODAL";
+})(NotificationType || (NotificationType = {}));
 var NotificationLevel;
 (function (NotificationLevel) {
     NotificationLevel["INFO"] = "INFO";
     NotificationLevel["ERROR"] = "ERROR";
     NotificationLevel["SUCCESS"] = "SUCCESS";
 })(NotificationLevel || (NotificationLevel = {}));
-export { NotificationLevel };
-const createNotificationHandler = () => async ({ aggregateRoot, command }) => {
-    const { aggregateId, level, titleI18nKey, bodyI18nKey } = command;
+const createToastNotificationHandler = () => async ({ aggregateRoot, command }) => {
+    const { aggregateId, type, level, titleI18nKey, bodyI18nKey } = command;
     return {
         ...aggregateRoot,
+        type,
         level,
         titleI18nKey,
         bodyI18nKey,
         domainEvents: [notificationCreated({ aggregateId })],
     };
 };
+const createModalNotificationHandler = () => async ({ aggregateRoot, command }) => {
+    const { aggregateId, type, titleI18nKey, bodyI18nKey, acceptI18nKey } = command;
+    return {
+        ...aggregateRoot,
+        type,
+        titleI18nKey,
+        bodyI18nKey,
+        acceptI18nKey,
+        domainEvents: [notificationCreated({ aggregateId })],
+    };
+};
 const removeNotificationHandler = () => async ({ aggregateRoot, command }) => {
     const { aggregateId } = command;
     return {
@@ -24,4 +40,4 @@ const removeNotificationHandler = () => async ({ aggregateRoot, command }) => {
         domainEvents: [notificationRemoved({ aggregateId })],
     };
 };
-export { createNotificationHandler, removeNotificationHandler };
+export { NotificationLevel, NotificationType, createToastNotificationHandler, createModalNotificationHandler, removeNotificationHandler, };

package/dist/shared/notifications/index.d.ts

@@ -1,8 +1,9 @@
-import { useCreateNotification } from "./infrastructure/domain/notification/react/useCreateNotification";
+import { useCreateModalNotification } from "./infrastructure/domain/notification/react/useCreateModalNotification";
+import { useCreateToastNotification } from "./infrastructure/domain/notification/react/useCreateToastNotification";
 import { useRemoveNotification } from "./infrastructure/domain/notification/react/useRemoveNotification";
 import { NotificationDto } from "./infrastructure/persistence/notificationDto";
 import { Storage } from "./infrastructure/persistence/storage";
 import { notificationsRoot, NotificationsRoot } from "./infrastructure/ui/notificationsRoot";
 import { useListNotifications } from "./projection/notification/react/useListNotifications";
 export type { Storage, NotificationDto, NotificationsRoot };
-export { useListNotifications, useCreateNotification, useRemoveNotification, notificationsRoot };
+export { useListNotifications, useCreateToastNotification, useCreateModalNotification, useRemoveNotification, notificationsRoot, };

package/dist/shared/notifications/index.js

@@ -1,5 +1,6 @@
-import { useCreateNotification } from "./infrastructure/domain/notification/react/useCreateNotification";
+import { useCreateModalNotification } from "./infrastructure/domain/notification/react/useCreateModalNotification";
+import { useCreateToastNotification } from "./infrastructure/domain/notification/react/useCreateToastNotification";
 import { useRemoveNotification } from "./infrastructure/domain/notification/react/useRemoveNotification";
 import { notificationsRoot } from "./infrastructure/ui/notificationsRoot";
 import { useListNotifications } from "./projection/notification/react/useListNotifications";
-export { useListNotifications, useCreateNotification, useRemoveNotification, notificationsRoot };
+export { useListNotifications, useCreateToastNotification, useCreateModalNotification, useRemoveNotification, notificationsRoot, };

package/dist/shared/notifications/infrastructure/delivery/bootstrap.js

@@ -1,18 +1,21 @@
 import { bootstrap as messagingReactBootstrap } from "@lookiero/messaging-react";
-import { CREATE_NOTIFICATION } from "../../domain/notification/command/createNotification";
+import { CREATE_MODAL_NOTIFICATION } from "../../domain/notification/command/createModalNotification";
+import { CREATE_TOAST_NOTIFICATION } from "../../domain/notification/command/createToastNotification";
 import { REMOVE_NOTIFICATION } from "../../domain/notification/command/removeNotification";
-import { createNotificationHandler, removeNotificationHandler } from "../../domain/notification/model/notification";
+import { createModalNotificationHandler, createToastNotificationHandler, removeNotificationHandler, } from "../../domain/notification/model/notification";
 import { listNotificationsHandler, LIST_NOTIFICATIONS } from "../../projection/notification/listNotifications";
 import { getNotification, saveNotification } from "../domain/notification/model/storageNotifications";
 import { storageListNotificationsView } from "../projection/notification/storageListNotificationsView";
 const NOTIFICATIONS_MESSAGING_CONTEXT_ID = "notifications";
 const bootstrap = ({ storage }) => messagingReactBootstrap({ id: NOTIFICATIONS_MESSAGING_CONTEXT_ID })
     .query(LIST_NOTIFICATIONS, listNotificationsHandler, { view: storageListNotificationsView({ storage }) })
-    .command(CREATE_NOTIFICATION, createNotificationHandler)(getNotification, saveNotification, { storage })
+    .command(CREATE_TOAST_NOTIFICATION, createToastNotificationHandler)(getNotification, saveNotification, { storage })
+    .command(CREATE_MODAL_NOTIFICATION, createModalNotificationHandler)(getNotification, saveNotification, { storage })
     .command(REMOVE_NOTIFICATION, removeNotificationHandler)(getNotification, saveNotification, { storage })
     .build();
 const bootstrapWithBuilder = ({ storage, messaging }) => messaging
     .query(LIST_NOTIFICATIONS, listNotificationsHandler, { view: storageListNotificationsView({ storage }) })
-    .command(CREATE_NOTIFICATION, createNotificationHandler)(getNotification, saveNotification, { storage })
+    .command(CREATE_TOAST_NOTIFICATION, createToastNotificationHandler)(getNotification, saveNotification, { storage })
+    .command(CREATE_MODAL_NOTIFICATION, createModalNotificationHandler)(getNotification, saveNotification, { storage })
     .command(REMOVE_NOTIFICATION, removeNotificationHandler)(getNotification, saveNotification, { storage });
 export { NOTIFICATIONS_MESSAGING_CONTEXT_ID, bootstrap, bootstrapWithBuilder };

package/dist/shared/notifications/infrastructure/domain/notification/model/storageNotifications.js

@@ -1,10 +1,12 @@
 import { storageNotificationsCreate } from "./storageNotificationsCreate";
 import { storageNotificationsRemove } from "./storageNotificationsRemove";
-const toDomain = ({ aggregateId, level, titleI18nKey, bodyI18nKey }) => ({
+const toDomain = ({ aggregateId, type, level, titleI18nKey, bodyI18nKey, acceptI18nKey, }) => ({
     aggregateId,
+    type,
     level,
     titleI18nKey,
     bodyI18nKey,
+    acceptI18nKey,
     domainEvents: [],
 });
 const getNotification = ({ storage }) => async (aggregateId) => {

package/dist/shared/notifications/infrastructure/domain/notification/model/storageNotificationsCreate.d.ts

@@ -1,7 +1,7 @@
 import { Notification } from "../../../../domain/notification/model/notification";
 import { NotificationDto } from "../../../persistence/notificationDto";
 import { StorageNotificationsSaveFunction } from "./storageNotifications";
-declare const fromDomain: ({ aggregateId, level, titleI18nKey, bodyI18nKey }: Notification) => NotificationDto;
+declare const fromDomain: ({ aggregateId, type, level, titleI18nKey, bodyI18nKey, acceptI18nKey, }: Notification) => NotificationDto;
 interface StorageNotificationsCreateFunction extends StorageNotificationsSaveFunction {
 }
 declare const storageNotificationsCreate: StorageNotificationsCreateFunction;

package/dist/shared/notifications/infrastructure/domain/notification/model/storageNotificationsCreate.js

@@ -1,9 +1,11 @@
 import { NOTIFICATION_CREATED } from "../../../../domain/notification/model/notificationCreated";
-const fromDomain = ({ aggregateId, level, titleI18nKey, bodyI18nKey }) => ({
+const fromDomain = ({ aggregateId, type, level, titleI18nKey, bodyI18nKey, acceptI18nKey, }) => ({
     aggregateId,
+    type,
     level,
     titleI18nKey,
     bodyI18nKey,
+    acceptI18nKey,
 });
 const isNotificationCreated = (event) => event.name === NOTIFICATION_CREATED;
 const storageNotificationsCreate = ({ storage }) => async (aggregateRoot) => {

package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateModalNotification.d.ts

@@ -0,0 +1,20 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+import { Logger } from "../../../../../logging/Logger";
+interface CreateModalNotificationFunctionArgs {
+    readonly aggregateId?: string;
+    readonly bodyI18nKey: string;
+    readonly titleI18nKey: string;
+    readonly acceptI18nKey: string;
+}
+interface CreateModalNotificationFunction {
+    (args: CreateModalNotificationFunctionArgs): Promise<void>;
+}
+interface UseCreateModalNotificationFunctionArgs {
+    readonly contextId: string;
+    readonly logger: Logger;
+}
+interface UseCreateModalNotificationFunction {
+    (args: UseCreateModalNotificationFunctionArgs): [create: CreateModalNotificationFunction, status: CommandStatus];
+}
+declare const useCreateModalNotification: UseCreateModalNotificationFunction;
+export { useCreateModalNotification };

package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateModalNotification.js

@@ -0,0 +1,22 @@
+import { useCommand } from "@lookiero/messaging-react";
+import { useCallback } from "react";
+import { v4 as uuid } from "uuid";
+import { createModalNotification } from "../../../../domain/notification/command/createModalNotification";
+const useCreateModalNotification = ({ contextId, logger }) => {
+    const [commandBus, status] = useCommand({ contextId });
+    const create = useCallback(async ({ aggregateId, titleI18nKey, bodyI18nKey, acceptI18nKey }) => {
+        try {
+            await commandBus(createModalNotification({
+                aggregateId: aggregateId || uuid(),
+                titleI18nKey,
+                bodyI18nKey,
+                acceptI18nKey,
+            }));
+        }
+        catch (error) {
+            logger.captureException(error);
+        }
+    }, [commandBus, logger]);
+    return [create, status];
+};
+export { useCreateModalNotification };

package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateToastNotification.d.ts

@@ -0,0 +1,21 @@
+import { CommandStatus } from "@lookiero/messaging-react";
+import { Logger } from "../../../../../logging/Logger";
+import { NotificationLevel } from "../../../../domain/notification/model/notification";
+interface CreateToastNotificationFunctionArgs {
+    readonly aggregateId?: string;
+    readonly level: NotificationLevel;
+    readonly bodyI18nKey: string;
+    readonly titleI18nKey?: string;
+}
+interface CreateToastNotificationFunction {
+    (args: CreateToastNotificationFunctionArgs): Promise<void>;
+}
+interface UseCreateToastNotificationFunctionArgs {
+    readonly contextId: string;
+    readonly logger: Logger;
+}
+interface UseCreateToastNotificationFunction {
+    (args: UseCreateToastNotificationFunctionArgs): [create: CreateToastNotificationFunction, status: CommandStatus];
+}
+declare const useCreateToastNotification: UseCreateToastNotificationFunction;
+export { useCreateToastNotification };

package/dist/shared/notifications/infrastructure/domain/notification/react/{useCreateNotification.js → useCreateToastNotification.js}

@@ -1,12 +1,12 @@
 import { useCommand } from "@lookiero/messaging-react";
 import { useCallback } from "react";
 import { v4 as uuid } from "uuid";
-import { createNotification } from "../../../../domain/notification/command/createNotification";
-const useCreateNotification = ({ contextId, logger }) => {
+import { createToastNotification } from "../../../../domain/notification/command/createToastNotification";
+const useCreateToastNotification = ({ contextId, logger }) => {
     const [commandBus, status] = useCommand({ contextId });
     const create = useCallback(async ({ aggregateId, level, titleI18nKey, bodyI18nKey }) => {
         try {
-            await commandBus(createNotification({
+            await commandBus(createToastNotification({
                 aggregateId: aggregateId || uuid(),
                 level,
                 titleI18nKey,
@@ -19,4 +19,4 @@ const useCreateNotification = ({ contextId, logger }) => {
     }, [commandBus, logger]);
     return [create, status];
 };
-export { useCreateNotification };
+export { useCreateToastNotification };

package/dist/shared/notifications/infrastructure/persistence/notificationDto.d.ts

@@ -1,8 +1,10 @@
-import { NotificationLevel } from "../../domain/notification/model/notification";
+import { NotificationLevel, NotificationType } from "../../domain/notification/model/notification";
 interface NotificationDto {
     readonly aggregateId: string;
+    readonly type: NotificationType;
     readonly level: NotificationLevel;
     readonly bodyI18nKey: string;
     readonly titleI18nKey: string | undefined;
+    readonly acceptI18nKey: string | undefined;
 }
 export type { NotificationDto };

package/dist/shared/notifications/infrastructure/projection/notification/notification.d.ts

@@ -1,7 +1,7 @@
-import { NotificationProjection } from "../../../projection/notification/notification";
+import { ModalNotificationProjection, ToastNotificationProjection } from "../../../projection/notification/notification";
 import { NotificationDto } from "../../persistence/notificationDto";
 interface ToNotificationProjectionFunction {
-    (notificationDto: NotificationDto): NotificationProjection;
+    (notificationDto: NotificationDto): ToastNotificationProjection | ModalNotificationProjection;
 }
 declare const toNotificationProjection: ToNotificationProjectionFunction;
 export { toNotificationProjection };

package/dist/shared/notifications/infrastructure/projection/notification/notification.js

@@ -1,7 +1,17 @@
-const toNotificationProjection = (notificationDto) => ({
-    id: notificationDto.aggregateId,
-    level: notificationDto.level,
-    titleI18nKey: notificationDto.titleI18nKey,
-    bodyI18nKey: notificationDto.bodyI18nKey,
-});
+import { NotificationType } from "../../../domain/notification/model/notification";
+const toNotificationProjection = (notificationDto) => notificationDto.type === NotificationType.TOAST
+    ? {
+        id: notificationDto.aggregateId,
+        type: notificationDto.type,
+        level: notificationDto.level,
+        titleI18nKey: notificationDto.titleI18nKey,
+        bodyI18nKey: notificationDto.bodyI18nKey,
+    }
+    : {
+        id: notificationDto.aggregateId,
+        type: notificationDto.type,
+        titleI18nKey: notificationDto.titleI18nKey,
+        bodyI18nKey: notificationDto.bodyI18nKey,
+        acceptI18nKey: notificationDto.acceptI18nKey,
+    };
 export { toNotificationProjection };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { ModalNotificationProjection } from "../../../../projection/notification/notification";
+interface ModalNotificationItemProps {
+    readonly visible: boolean;
+    readonly notification: ModalNotificationProjection;
+    readonly onRemove: (notificationId: string) => void;
+    readonly testID?: string;
+}
+declare const ModalNotificationItem: FC<ModalNotificationItemProps>;
+export { ModalNotificationItem };