From 965e54f7f7de6444812db7c69af5a6e59b1fed63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz?= <ljedrasik@vuestorefront.io>
Date: Tue, 30 Mar 2021 11:28:33 +0200
Subject: [PATCH] fix: missing info about common notification messages/styles
 prod mode

---
 packages/core/docs/guide/theme.md             | 40 ++++++++++++++-----
 .../theme/components/Notification.vue         |  7 +++-
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/core/docs/guide/theme.md b/packages/core/docs/guide/theme.md
index 9a2ab0476a..b925a86150 100644
--- a/packages/core/docs/guide/theme.md
+++ b/packages/core/docs/guide/theme.md
@@ -41,9 +41,12 @@ If you're familiar with Nuxt.js, you will quickly notice that the directory stru
 
 ```js
 .
+├─ assets/
+│  └─ notifications // common notifications
 ├─ components/
 ├─ composables/ // place for custom composition API functions
 │  └─ useUiHelpers/ // theme-specific composition API functions
+│  └─ useUiNotification/
 ├─ helpers/ // utility functions
 │  ├─ category/ // getting category search params to/from url
 │  └─ filters/ // getting filters to/from url
@@ -97,7 +100,7 @@ Below you can find a list of the most important Nuxt Modules and libraries that
 
 ## In-app Notifications
 
-In Vue Storefront we're providing Notifications system based on composable `useUiNotification`.
+In Vue Storefront we're providing Notifications system based on composable `useUiNotification`. Also, we have prepared [common notification messages](/guide/theme.html#example-of-use-common-notification-messages). You can find them inside the assets directory (`/assets/notifications`).
 
 There are three types of notifications: `danger`, `success` and `info`.
 
@@ -105,18 +108,18 @@ There are three types of notifications: `danger`, `success` and `info`.
 
 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();
+export default {
+  setup() {
+    const { send } = useUiNotification();
 
-  send({
-    type: 'success',
-    message: 'Successfully added product to the cart'
-  })
+    send({
+      type: 'success',
+      message: 'Successfully added product to the cart'
+    })
+  } 
 }
 ```
 
@@ -131,4 +134,21 @@ type SendUiNotificationParams = {
 }
 ```
 
-Also we have prepared 
+### Example of use common notification messages
+
+```js
+import { useCart } from '<%= options.generate.replace.composables %>';
+import sendNotification from '~/assets/notifications';
+
+export default {
+  setup() {
+    const { addItem: addItemToCart, isInCart, error } = useCart();
+    const { cart: sendCartNotification } = sendNotification();
+
+    sendCartNotification.addItem({
+      productName: PRODUCT_NAME,
+      error: error.value.addItem ? error.value.addItem.message : false
+    });
+  } 
+}
+```
diff --git a/packages/core/nuxt-theme-module/theme/components/Notification.vue b/packages/core/nuxt-theme-module/theme/components/Notification.vue
index 41a0eb9ce3..9b8e631827 100644
--- a/packages/core/nuxt-theme-module/theme/components/Notification.vue
+++ b/packages/core/nuxt-theme-module/theme/components/Notification.vue
@@ -7,7 +7,7 @@
       :action="notification.action && notification.action.text"
       :type="notification.type"
       @click:close="notification.dismiss"
-      @click:action="notification.action && notification.action.onClick()"
+      @click:action="notification.action && notification.action.onClick(); notification.dismiss()"
       visible
     >
       <template #icon v-if="notification.icon">
@@ -64,7 +64,7 @@ export default {
     margin: 0 var(--spacer-base) var(--spacer-2xs) 0;
   }
   @include for-mobile {
-    background: var(--c-link);
+    --notification-background: var(--c-link) !important;
     --notification-border-radius: 0;
     --notification-max-width: 100%;
     --notification-font-family: var(--font-family--primary);
@@ -75,6 +75,9 @@ export default {
     margin: 0 0 var(--spacer-xs) 0;
     --notification-close-top: var(--spacer-sm);
   }
+  &__action {
+    display: var(--notification-action-display,block) !important;
+  }
 }
 .slide-fade-enter-active,
 .slide-fade-leave-active {