Merge pull request #211 from vuestorefront-community/develop

feat: 1.2.0
vuestorefront-community · May 12, 2022 · ce0ab23 · ce0ab23
2 parents 9204f75 + 0759d56
commit ce0ab23
Show file tree

Hide file tree

Showing 28 changed files with 3,107 additions and 2,792 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,13 @@
   <img src="https://www.vendure.io/logo.png" height="100px" style="margin-left: 30px;">
 </div>
 
+### Stay connected
+
+[![GitHub Repo stars](https://img.shields.io/github/stars/vuestorefront/vue-storefront?style=social)](https://github.com/vuestorefront/vue-storefront)
+[![Twitter Follow](https://img.shields.io/twitter/follow/vuestorefront?style=social)](https://twitter.com/vuestorefront)
+[![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCkm1F3Cglty3CE1QwKQUhhg?style=social)](https://www.youtube.com/c/VueStorefront)
+[![Discord](https://img.shields.io/discord/770285988244750366?label=join%20discord&logo=Discord&logoColor=white)](https://discord.vuestorefront.io)
+
 ## Vue Storefront 2 integration with Vendure
 
 This project is a Vendure integration for [Vue Storefront 2](https://github.com/vuestorefront/vue-storefront/).
@@ -39,7 +46,7 @@ Want to contribute? Ping us on `vendure` channel on [our Discord](https://discor
 
 - NodeJS v14 or later
 - Vendure server running in localhost for GraphQL API or <https://demo.vendure.io/shop-api>
-- Set up auth options in Vendure server
+- Set up auth options in Vendure server (This functionality is available for those who scaffold a local instance of Vendure)
 
 ```ts
 // vendure-config.ts

diff --git a/docs/changelog/1.2.0.md b/docs/changelog/1.2.0.md
@@ -0,0 +1,13 @@
+# 1.2.0
+
+* [Bug]: sizes of images in related products component [#172](https://github.com/vuestorefront-community/vendure/pull/172)
+* [Bug]: Project is not building [#176](https://github.com/vuestorefront-community/vendure/issues/176)
+* [Docs]: Update README.md [#177](https://github.com/vuestorefront-community/vendure/issues/177)
+* [Bug]: BottomNavigation on mobile is moved to the left, and cannot open the mobile menu [#184](https://github.com/vuestorefront-community/vendure/issues/184)
+* [Feature]: Replace mocked products in carousel on Home page [#165](https://github.com/vuestorefront-community/vendure/issues/165)
+* [Bug]: Country state on billing step not getting persisted upon selection [#194](https://github.com/vuestorefront-community/vendure/pull/194)
+* [Bug]: Pagination not working [#200](https://github.com/vuestorefront-community/vendure/issues/200)
+* [Bug]: Cannot continue to payment if shipping price i 0 [#199](https://github.com/vuestorefront-community/vendure/issues/199)
+* [Feature]: expose getCode on order setters [#203](https://github.com/vuestorefront-community/vendure/issues/203)
+* [Bug]: HTTP 500 calling /api/vendure/resetPassword [#205](https://github.com/vuestorefront-community/vendure/issues/205)
+* [Bug]: Shipping and Payment methods descriptions not rendered correctly or missing [#212](https://github.com/vuestorefront-community/vendure/issues/212)
diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md
@@ -6,7 +6,7 @@ Instructions on how to start Vendure integration in development mode.
 
 - NodeJS v14 or later
 - Vendure server running in localhost for GraphQL API or <https://demo.vendure.io/shop-api>
-- Set up auth options in Vendure server
+- Set up auth options in Vendure server (This functionality is available for those who scaffold a local instance of Vendure)
 
 ```ts
 // vendure-config.ts

diff --git a/docs/integrations/stripe.md b/docs/integrations/stripe.md
@@ -1,9 +1,14 @@
-# Stripe [Coming soon]
+# Stripe
 
-There is an implementation of Stripe module for Nuxt ongoing for VSF&Vendure.
+Integration with payment gateways is much more difficult than with Content Management System because it requires you to integrate it on both frontend and backend of your store. You have to handle payments via form (ideally a drop in component or redirect) and then configure your e-commerce platform to trust external provider that the payment was successful.
 
-A package [nuxt-stripe-module](https://www.npmjs.com/package/nuxt-stripe-module) will be used for that.
+## Vue Storefront
 
-:::warning
-This integration is only between Vue Storefront and Stripe. In order to correctly handle the payment you would also need to develop a Stripe plugin for Vendure [like this one](https://github.com/gaiusmathew/stripe-payment-plugin).
-:::
+As Vue Storefront uses Nuxt.js under the hood and is built using Vue.js, you can use Vue.js plugin or Nuxt.js module to integrate with Stripe:
+
+- <https://vuestripe.com/> especially -> <https://vuestripe.com/nuxt/>
+- <https://www.npmjs.com/package/nuxt-stripe-module>
+
+## Vendure
+
+To integrate Vendure with Stripe to accept and handle payments you can use official plugin that is described [here](https://www.vendure.io/docs/typescript-api/payments-plugin/stripe-plugin/)
diff --git a/packages/api-client/README.md b/packages/api-client/README.md
@@ -39,7 +39,7 @@ Want to contribute? Ping us on `vendure` channel on [our Discord](https://discor
 
 - NodeJS v14 or later
 - Vendure server running in localhost for GraphQL API or <https://demo.vendure.io/shop-api>
-- Set up auth options in Vendure server
+- Set up auth options in Vendure server (This functionality is available for those who scaffold a local instance of Vendure)
 
 ```ts
 // vendure-config.ts

diff --git a/packages/api-client/package.json b/packages/api-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/vendure-api",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "sideEffects": false,
   "server": "server/index.js",
   "main": "lib/index.cjs.js",
@@ -17,7 +17,7 @@
     "generate:graphql-types": "graphql-codegen --config ./configs/codegen.config.yml -r dotenv/config"
   },
   "dependencies": {
-    "@vue-storefront/core": "~2.4.1",
+    "@vue-storefront/core": "~2.4.6",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",

diff --git a/packages/api-client/src/api/resetPassword/index.ts b/packages/api-client/src/api/resetPassword/index.ts
@@ -6,7 +6,8 @@ import { NO_CACHE_FETCH_POLICY } from '../../helpers';
 
 const resetPassword = async (context: Context, params: ResetPasswordParams, customQuery?: CustomQuery): Promise<ResetPasswordResponse> => {
   const ResetPasswordVariables = {
-    ...params
+    token: params.tokenValue,
+    password: params.newPassword
   };
 
   const { resetPassword } = context.extendQuery(

diff --git a/packages/composables/README.md b/packages/composables/README.md
@@ -39,7 +39,7 @@ Want to contribute? Ping us on `vendure` channel on [our Discord](https://discor
 
 - NodeJS v14 or later
 - Vendure server running in localhost for GraphQL API or <https://demo.vendure.io/shop-api>
-- Set up auth options in Vendure server
+- Set up auth options in Vendure server (This functionality is available for those who scaffold a local instance of Vendure)
 
 ```ts
 // vendure-config.ts

diff --git a/packages/composables/__tests__/getters/orderHelpers.spec.ts b/packages/composables/__tests__/getters/orderHelpers.spec.ts
@@ -15,6 +15,10 @@ describe('[vendure-getters] order getters', () => {
     expect(orderGetters.getId(mockedOrder)).toEqual('54');
   });
 
+  it('returns order code', () => {
+    expect(orderGetters.getCode(mockedOrder)).toEqual('9661TLN1RURBX24B');
+  });
+
   it('returns order status', () => {
     expect(orderGetters.getStatus(mockedOrder)).toEqual('PaymentAuthorized');
   });

diff --git a/packages/composables/package.json b/packages/composables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/vendure",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "sideEffects": false,
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -15,8 +15,8 @@
     "update:update": "ncu -u"
   },
   "dependencies": {
-    "@vue-storefront/vendure-api": "1.1.0",
-    "@vue-storefront/core": "~2.4.1"
+    "@vue-storefront/vendure-api": "1.2.0",
+    "@vue-storefront/core": "~2.4.6"
   },
   "peerDependencies": {
     "@vue/composition-api": "1.0.0-beta.21"

diff --git a/packages/composables/src/getters/checkoutGetters.ts b/packages/composables/src/getters/checkoutGetters.ts
@@ -1,4 +1,3 @@
-import { CheckoutGetters } from '@vue-storefront/core';
 import type { ShippingMethod } from '@vue-storefront/vendure-api/src/types';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -26,7 +25,7 @@ function getFormattedPrice(price: number): string {
   return '';
 }
 
-export const checkoutGetters: CheckoutGetters<ShippingMethod> = {
+export const checkoutGetters = {
   getShippingMethodId,
   getShippingMethodName,
   getShippingMethodDescription,

diff --git a/packages/composables/src/getters/orderGetters.ts b/packages/composables/src/getters/orderGetters.ts
@@ -15,6 +15,11 @@ function getId(order: Order): string {
   return order?.id || '';
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function getCode(order: Order): string {
+  return order?.code || '';
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function getStatus(order: Order): string {
   return order?.state || '';
@@ -67,6 +72,7 @@ function getTotalItems(order: OrderList): number {
 export const orderGetters: UserOrderGetters<any, any> = {
   getDate,
   getId,
+  getCode,
   getStatus,
   getPrice,
   getItems,

diff --git a/packages/composables/src/getters/productGetters.ts b/packages/composables/src/getters/productGetters.ts
@@ -38,13 +38,13 @@ const getPrice = (product: AgnosticProductVariant): AgnosticPrice => {
 const getGallery = (product: AgnosticProductVariant): AgnosticMediaGalleryItem[] => {
   if (!product?.images?.length) return [];
 
-  return [
+  return product?.images.map(image => (
     {
-      small: product?.images[0],
-      normal: product?.images[0],
-      big: product?.images[0]
+      small: image,
+      normal: image,
+      big: image
     }
-  ];
+  ));
 };
 
 const getCoverImage = (product: AgnosticProductVariant): string => {
@@ -93,19 +93,30 @@ const getCategoryNames = (product: Product): string[] => {
 };
 
 const getByFilters = (product: Product, filters?: ProductFilter): AgnosticProductVariant[] | AgnosticProductVariant => {
-  const { variants, collections, featuredAsset, ...masterVariant } = product;
+  const { variants, collections, featuredAsset, assets, ...masterVariant } = product;
 
   if (!variants?.length) return [];
 
+  const imagesSet = new Set<string>();
+
+  if (featuredAsset) {
+    imagesSet.add(featuredAsset.preview);
+  }
+  assets.forEach(asset => imagesSet.add(asset.preview));
+
   const productVariants = variants.map(variant => ({
     _id: variant?.id,
     _description: masterVariant?.description,
     _categoriesRef: collections?.map(collection => collection.id),
     name: variant?.name,
     sku: variant?.sku,
     slug: masterVariant?.slug,
-    collections: collections?.map(collection => ({id: collection.id, name: collection.name, breadcrumbs: collection.breadcrumbs})),
-    images: [featuredAsset?.preview],
+    collections: collections?.map(collection => ({
+      id: collection.id,
+      name: collection.name,
+      breadcrumbs: collection.breadcrumbs
+    })),
+    images: [...Array.from(imagesSet)],
     price: {
       original: variant?.price,
       current: variant?.priceWithTax

diff --git a/packages/theme/README.md b/packages/theme/README.md
@@ -39,7 +39,7 @@ Want to contribute? Ping us on `vendure` channel on [our Discord](https://discor
 
 - NodeJS v14 or later
 - Vendure server running in localhost for GraphQL API or <https://demo.vendure.io/shop-api>
-- Set up auth options in Vendure server
+- Set up auth options in Vendure server (This functionality is available for those who scaffold a local instance of Vendure)
 
 ```ts
 // vendure-config.ts

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
@@ -11,14 +11,33 @@
         </nuxt-link>
       </template>
       <template #navigation>
-        <SfHeaderNavigationItem
-          v-for="category in headerNavigation"
-          :key="category.name"
-          class="nav-item"
-          v-e2e="`app-header-${category.name}`"
-          :label="category.name"
-          :link="localePath(`/c/${category.link}`)"
-        />
+        <div class="sf-header__navigation desktop" v-if="!isMobile">
+          <SfHeaderNavigationItem
+            v-for="category in headerNavigation"
+            :key="category.name"
+            class="nav-item"
+            v-e2e="`app-header-${category.name}`"
+            :label="category.name"
+            :link="localePath(`/c/${category.link}`)"
+          />
+        </div>
+        <SfModal v-else :visible="isMobileMenuOpen" :title="$t('Menu')" @close="toggleMobileMenu">
+          <SfList>
+            <SfListItem
+              v-for="category in headerNavigation"
+              :key="category.name"
+              class="nav-item sf-header-navigation-item"
+              v-e2e="`app-header-url_${category.link}`"
+            >
+              <SfMenuItem
+                :label="category.name"
+                class="sf-header-navigation-item__menu-item"
+                :link="localePath(`/c/${category.link}`)"
+                @click.native="toggleMobileMenu"
+              />
+            </SfListItem>
+          </SfList>
+        </SfModal>
       </template>
       <template #aside>
         <LocaleSelector class="smartphone-only" />
@@ -107,7 +126,7 @@
 </template>
 
 <script>
-import { SfHeader, SfImage, SfIcon, SfButton, SfBadge, SfSearchBar, SfOverlay, SfMenuItem, SfLink } from '@storefront-ui/vue';
+import { SfHeader, SfImage, SfIcon, SfButton, SfBadge, SfSearchBar, SfOverlay, SfMenuItem, SfLink, SfModal, SfList } from '@storefront-ui/vue';
 import { useUiState, useUiHelpers } from '~/composables';
 import { useCart, useWishlist, useUser, cartGetters, wishlistGetters, useCategory, categoryGetters, useFacet } from '@vue-storefront/vendure';
 import { computed, ref, onBeforeUnmount, watch } from '@vue/composition-api';
@@ -133,11 +152,13 @@ export default {
     SearchResults,
     SfOverlay,
     SfMenuItem,
-    SfLink
+    SfLink,
+    SfModal,
+    SfList
   },
   directives: { clickOutside },
   setup(props, { root }) {
-    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, isMobileMenuOpen } = useUiState();
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, isMobileMenuOpen, toggleMobileMenu } = useUiState();
     const { setTermForUrl, getFacetsFromURL } = useUiHelpers();
     const { isAuthenticated, load: loadUser } = useUser();
     const { cart, load: loadCart } = useCart();
@@ -241,7 +262,8 @@ export default {
       removeSearchResults,
       headerNavigation,
       isMobileMenuOpen,
-      wishlistTotalItems
+      wishlistTotalItems,
+      toggleMobileMenu
     };
   }
 };

diff --git a/packages/theme/components/BottomNavigation.vue b/packages/theme/components/BottomNavigation.vue
@@ -0,0 +1,72 @@
+<template>
+<!-- TODO: create logic with isActive prop for BottomNavigationItems -->
+  <SfBottomNavigation class="navigation-bottom smartphone-only">
+      <SfBottomNavigationItem
+        :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
+        icon="home"
+        size="20px"
+        label="Home"
+        @click="handleHomeClick"
+      />
+    <SfBottomNavigationItem icon="menu" size="20px" :label="$t('Menu')" @click="toggleMobileMenu"/>
+    <SfBottomNavigationItem icon="heart" size="20px" :label="$t('Wishlist')" @click="toggleWishlistSidebar"/>
+    <SfBottomNavigationItem icon="profile" size="20px" :label="$t('Account')" @click="handleAccountClick"/>
+    <!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
+    <SfBottomNavigationItem
+      :label="$t('Basket')"
+      icon="add_to_cart"
+      @click="toggleCartSidebar"
+    >
+      <template #icon>
+        <SfCircleIcon aria-label="Add to cart">
+          <SfIcon
+            icon="add_to_cart"
+            color="white"
+            size="25px"
+            :style="{margin: '0 0 0 -2px'}"
+          />
+        </SfCircleIcon>
+      </template>
+    </SfBottomNavigationItem>
+  </SfBottomNavigation>
+</template>
+
+<script>
+import { SfBottomNavigation, SfIcon, SfCircleIcon } from '@storefront-ui/vue';
+import { useUiState } from '~/composables';
+import { useUser } from '@vue-storefront/vendure';
+export default {
+  components: {
+    SfBottomNavigation,
+    SfIcon,
+    SfCircleIcon
+  },
+  setup(props, { root }) {
+    const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal, toggleMobileMenu, isMobileMenuOpen } = useUiState();
+    const { isAuthenticated } = useUser();
+    const handleAccountClick = async () => {
+      if (isAuthenticated.value) {
+        return root.$router.push('/my-account');
+      }
+      toggleLoginModal();
+    };
+    const handleHomeClick = () => {
+      isMobileMenuOpen.value ? toggleMobileMenu() : false;
+      root.$router.push('/');
+    };
+    return {
+      isMobileMenuOpen,
+      toggleWishlistSidebar,
+      toggleCartSidebar,
+      toggleMobileMenu,
+      handleAccountClick,
+      handleHomeClick
+    };
+  }
+};
+</script>
+<style lang="scss" scoped>
+.navigation-bottom {
+  --bottom-navigation-z-index: 3;
+}
+</style>
diff --git a/packages/theme/components/Checkout/VsfPaymentProvider.vue b/packages/theme/components/Checkout/VsfPaymentProvider.vue
@@ -26,8 +26,7 @@
             </template>
             <template #description="{ description }">
               <div class="sf-radio__description payment__description">
-                <div class="payment__info">
-                  {{ description }}
+                <div class="payment__info" v-html='description'>
                 </div>
               </div>
             </template>