Skip to content

Commit

Permalink
fix: from cr
Browse files Browse the repository at this point in the history
  • Loading branch information
lukaszjedrasik committed Mar 10, 2021
1 parent 4eb714d commit 6b68909
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 70 deletions.
37 changes: 0 additions & 37 deletions packages/core/docs/guide/composables.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
}
```
38 changes: 38 additions & 0 deletions packages/core/docs/guide/theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
42 changes: 24 additions & 18 deletions packages/core/nuxt-theme-module/theme/assets/notifications/cart.ts
Original file line number Diff line number Diff line change
@@ -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
};
};
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 4 additions & 6 deletions packages/core/nuxt-theme-module/theme/pages/Category.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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
});
};
Expand Down
10 changes: 4 additions & 6 deletions packages/core/nuxt-theme-module/theme/pages/Product.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down Expand Up @@ -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
});
};
Expand Down

0 comments on commit 6b68909

Please sign in to comment.