fix: from cr

packages/core/docs/guide/composables.md

@@ -348,40 +348,3 @@ watch(error, (error, prevError) => {
 In this example, we are using `useUiNotification` - a composable that handles notifications state. You can read more about it in the API reference.
 
 [//]: # 'TODO: This should be added to API reference'
-
-## In-app Notifications
-
-In Vue Storefront we're providing Notifications system based on composable `useUiNotification`.
-
-Shows notifications after some actions being performed in the shop. There are three types of notifications: danger, success and info.
-
-There is a dedicated interface for `useUiNotification`:
-
-```ts
-interface UseUiNotification {
-  message: string;
-  type: 'danger' | 'success' | 'info';
-  action?: { text: string; onClick: () => void };
-  icon?: string;
-  persist?: boolean;
-  id?: symbol;
-  dismiss?: () => void;
-}
-```
-
-### How to send notification?
-
-To send a new notification you need to only import `useUiNotification` from composables and pass `type` and `message` to `send` function. Rest parameters are optional.
-
-```js
-import { useUiNotification } from '~/composables';
-
-setup() {
-  const { send } = useUiNotification();
-
-  send({
-    type: 'success',
-    message: 'Successfully added product to the cart'
-  })
-}
-```

packages/core/docs/guide/theme.md

@@ -94,3 +94,41 @@ Below you can find a list of the most important Nuxt Modules and libraries that
 
 - [`@storefront-ui/vue`](https://storefrontui.io)
 - [`wee-validate`](https://vee-validate.logaretm.com/v3)
+
+## In-app Notifications
+
+In Vue Storefront we're providing Notifications system based on composable `useUiNotification`.
+
+There are three types of notifications: `danger`, `success` and `info`.
+
+### How to send notification?
+
+To send a new notification you need to only import `useUiNotification` from composables and pass `type` and `message` to `send` function. Rest parameters are optional.
+
+Also, we have prepared repetitive notification messages. You can find them inside the assets directory.
+
+```js
+import { useUiNotification } from '~/composables';
+
+setup() {
+  const { send } = useUiNotification();
+
+  send({
+    type: 'success',
+    message: 'Successfully added product to the cart'
+  })
+}
+```
+
+```ts
+type SendUiNotificationParams = {
+  message: string;
+  type: 'danger' | 'success' | 'info';
+  action?: { text: string; onClick: () => void };
+  icon?: string;
+  persist?: boolean;
+  dismiss?: () => void;
+}
+```
+
+Also we have prepared 

packages/core/nuxt-theme-module/theme/assets/notifications/cart.ts

@@ -1,22 +1,28 @@
 import { useUiNotification } from '../../composables';
 
-export const addItem = ({ productName, error, onClick, $i18n }) => {
-  const { send } = useUiNotification();
+export const cart = (i18n, router) => {
+  const addItem = ({ productName, error }) => {
+    const { send } = useUiNotification();
 
-  if (error) {
-    send({
-      type: 'danger',
-      message: error
-    });
-  } else {
-    send({
-      type: 'success',
-      message: productName ? $i18n.t('Successfully added {PRODUCT_NAME} to the cart', { PRODUCT_NAME: productName }) : $i18n.t('Successfully added product to the cart'),
-      persist: true,
-      action: {
-        text: $i18n.t('Go to Checkout'),
-        onClick
-      }
-    });
-  }
+    if (error) {
+      send({
+        type: 'danger',
+        message: error
+      });
+    } else {
+      send({
+        type: 'success',
+        message: productName ? i18n.t('Successfully added {PRODUCT_NAME} to the cart', { PRODUCT_NAME: productName }) : i18n.t('Successfully added product to the cart'),
+        persist: true,
+        action: {
+          text: i18n.t('Go to Checkout'),
+          onClick: () => router.push('/checkout/shipping')
+        }
+      });
+    }
+  };
+
+  return {
+    addItem
+  };
 };

packages/core/nuxt-theme-module/theme/assets/notifications/index.ts

@@ -1,7 +1,13 @@
-import * as cart from './cart';
+import { cart } from './cart';
+import { useContext } from '@nuxtjs/composition-api';
 
-const sendNotification = {
-  cart
+const sendNotification = () => {
+  const { app } = useContext();
+  const { i18n, router } = app;
+
+  return {
+    cart: cart(i18n, router)
+  };
 };
 
 export default sendNotification;

packages/core/nuxt-theme-module/theme/pages/Category.vue

@@ -371,13 +371,13 @@ import Vue from 'vue';
 // TODO(addToCart qty, horizontal): https://github.com/vuestorefront/storefront-ui/issues/1606
 export default {
   transition: 'fade',
-  setup(props, context) {
+  setup(_, context) {
     const th = useUiHelpers();
     const uiState = useUiState();
     const { addItem: addItemToCart, isInCart, error } = useCart();
     const { addItem: addItemToWishlist } = useWishlist();
+    const { cart: sendCartNotification } = sendNotification();
     const { result, search, loading } = useFacet();
-    const { $router, $i18n } = context.root;
 
     const products = computed(() => facetGetters.getProducts(result.value));
     const categoryTree = computed(() => facetGetters.getCategoryTree(result.value));
@@ -444,11 +444,9 @@ export default {
 
     const addToCart = async (product, quantity) => {
       await addItemToCart({ product, quantity });
-      sendNotification.cart.addItem({
+      sendCartNotification.addItem({
         productName: product._name,
-        error: error.value.addItem ? error.value.addItem.message : false,
-        onClick: () => $router.push('/checkout/shipping'),
-        $i18n
+        error: error.value.addItem ? error.value.addItem.message : false
       });
     };
 

packages/core/nuxt-theme-module/theme/pages/Product.vue

@@ -196,13 +196,13 @@ import LazyHydrate from 'vue-lazy-hydration';
 export default {
   name: 'Product',
   transition: 'fade',
-  setup(props, context) {
+  setup(_, context) {
     const qty = ref(1);
     const { id } = context.root.$route.params;
     const { products, search } = useProduct('products');
     const { products: relatedProducts, search: searchRelatedProducts, loading: relatedLoading } = useProduct('relatedProducts');
     const { addItem, loading, error } = useCart();
-    const { $router, $i18n } = context.root;
+    const { cart: sendCartNotification } = sendNotification();
     const { reviews: productReviews, search: searchReviews } = useReview('productReviews');
 
     const product = computed(() => productGetters.getFiltered(products.value, { master: true, attributes: context.root.$route.query })[0]);
@@ -238,11 +238,9 @@ export default {
 
     const addToCart = async (product, quantity) => {
       await addItem({ product, quantity });
-      sendNotification.cart.addItem({
+      sendCartNotification.addItem({
         productName: product._name,
-        error: error.value.addItem ? error.value.addItem.message : false,
-        onClick: () => $router.push('/checkout/shipping'),
-        $i18n
+        error: error.value.addItem ? error.value.addItem.message : false
       });
     };