Merge pull request #495 from gibkigonzo/release/v1.0.3

Release/v1.0.3

CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.4] - UNRELEASED
+
+### Added
+
+### Changed / Improved
+
+## [1.0.3] - 20.09.2020
+
+### Added
+### Changed / Improved
+
+- Adjusted the error page (#398)
+- Use short description in PDP top section (#393)
+- Fixed `isAddToCartDisabled` computed property (#377)
+- Update filters bar on category page (#381)
+- Use i18n wrapper for the login title (#438)
+- Corrected displayed the selected size option on product page (#436)
+- Styling around color selector on filters in category page (#443)
+- Styling around color filters (#442)
+- Carousel time in product carousel (#444)
+- Position of logout (#448)
+- Fixed Dropdown in adding shipping address (#441)
+- Added attribute tab on product page (#386)
+- Used sku instead of product_id while preparing order line items product (#415)
+- Replaced deprecated action product/list call with findProducts (#417)
+
 ## [1.0.2] - 03.07.2020
 
 ### Added

README.md

@@ -4,7 +4,7 @@
 
 New default template theme for [Vue Storefront](https://github.com/DivanteLtd/vue-storefront), based on [Storefront UI](https://storefrontui.io/). 90% of the Capybara code is closed in the [Storefront UI library](https://github.com/DivanteLtd/storefront-ui). Thanks to it, Capybara can maintain its flexibility, but minimize the risk of errors.
 
- **🔨  Current status: Developer's preview**
+ **🔨  Current status: Production Ready**
 
 We have prepared [short introduction](https://github.com/DivanteLtd/vsf-capybara/blob/develop/CODING_STANDARDS.md) to our coding standards and conventions we are using in Capybara theme.
 
@@ -72,7 +72,10 @@ To be able to use new Capybara theme in your Vue Storefront installation, you ne
    ```
    git submodule update --init --remote
    ```
-
+1. Generate `local.json` file from script `generate-local-config.js`:
+   ```
+   node src/themes/vsf-capybara/scripts/generate-local-config.js
+   ```
 1. Update Vue Storefront configuration by copying `local.json` file from `vsf-capybara` to root `config` directory.
 1. Update TypeScript compiler option in `tsconfig.json` in root directory: change value for `compilerOptions`**.**`paths`**.**`theme/*` from default theme `["src/themes/default/*"]` to brand new Capybara theme: `["src/themes/capybara/*"]`.
 1. Download all dependencies and start development server:

components/atoms/a-sort-icon.vue

@@ -0,0 +1,16 @@
+<template>
+  <SfIcon size="15px" style="margin-left: 10px;">
+    <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M8.32809 15.2897L12 11.7644V12.2892L8.13547 16L4.27094 12.2892V11.7644L7.94285 15.2897V6.83165H8.32809L8.32809 15.2897ZM3.67191 0.710288L0 4.23556V3.71082L3.86453 0L7.72906 3.71082V4.23556L4.05715 0.710288V9.16835H3.67191L3.67191 0.710288Z" fill="black" />
+    </svg>
+  </SfIcon>
+</template>
+
+<script>
+import { SfIcon } from '@storefront-ui/vue';
+
+export default {
+  name: 'ASortIcon',
+  components: { SfIcon }
+};
+</script>

components/molecules/m-error.vue

@@ -51,7 +51,7 @@ export default {
   padding: 0 1.25rem;
   &__image,
   &__message {
-    margin: calc(var(--spacer-2xl) * 3) 0;
+    margin: calc(var(--spacer-xl) * 2) 0;
     text-align: center;
     --heading-border: none;
   }

components/molecules/m-login.vue

@@ -39,7 +39,7 @@
     </SfButton>
     <div class="aside">
       <SfHeading
-        title="Don't have an account yet?"
+        :title="$t('Don\'t have an account yet?')"
         :level="3"
         class="aside__heading"
       />

components/molecules/m-product-add-to-cart.vue

@@ -69,7 +69,7 @@ export default {
       return !!this.qtyValidationError || this.stock.isLoading || !this.isAvailable
     },
     isAvailable () {
-      return this.isOnline && !!this.stock.max && this.isSimpleOrConfigurable
+      return !this.isOnline || !!this.stock.max || !this.stock.manageQuantity || !this.isSimpleOrConfigurable
     },
     isSimpleOrConfigurable () {
       return ['simple', 'configurable'].includes(

components/molecules/m-product-additional-info.vue

@@ -7,13 +7,6 @@
   >
     <SfTab :title="$t('Description')">
       <div itemprop="description" v-html="product.description" />
-      <AProductAttribute
-        v-for="(attribute, i) in attributes"
-        :key="i"
-        :product="product"
-        :attribute="attribute"
-        class="product__property"
-      />
     </SfTab>
     <SfTab :title="$t('Read reviews')" ref="reviewTab">
       <div class="review-header">
@@ -32,6 +25,15 @@
       <SfDivider v-show="reviewsCount" />
       <MReviewList v-show="reviewsCount" :reviews="reviews" />
     </SfTab>
+    <SfTab v-if="attributes.length" :title="$t('Additional Information')">
+      <AProductAttribute
+        v-for="(attribute, i) in attributes"
+        :key="i"
+        :product="product"
+        :attribute="attribute"
+        class="product__property"
+      />
+    </SfTab>
   </SfTabs>
 </template>
 

components/molecules/m-product-carousel.vue

@@ -2,8 +2,8 @@
   <SfCarousel
     class="m-product-carousel"
     :settings="{
-      animationDuration: 3000,
-      rewindDuration: 3000
+      animationDuration: 2000,
+      rewindDuration: 2000
     }"
   >
     <SfCarouselItem v-for="(product, i) in carouselProducts" :key="i">

components/molecules/m-product-options-configurable.vue

@@ -40,8 +40,9 @@
   </div>
 </template>
 <script>
-import get from 'lodash-es/get'
 import config from 'config'
+import { mapGetters } from 'vuex';
+import get from 'lodash-es/get'
 import { SfAlert, SfSelect, SfProductOption, SfColor } from '@storefront-ui/vue';
 import { getAvailableFiltersByProduct } from '@vue-storefront/core/modules/catalog/helpers/filters'
 export default {
@@ -66,13 +67,18 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      getCurrentProductOptions: 'product/getCurrentProductOptions'
+    }),
     getActiveOption () {
       return (attribute) => get(this.configuration, `${attribute.attribute_code}.id`, attribute.id)
     },
     getAttributeLabel () {
       return (attribute) => {
         const configName = attribute.attribute_code ? attribute.attribute_code : attribute.label.toLowerCase()
-        return this.configuration[configName] ? this.configuration[configName].label : configName
+        const optionId = this.configuration[configName] ? this.configuration[configName].id : ''
+        const option = this.getCurrentProductOptions[configName].find(o => o.id === optionId)
+        return option.hasOwnProperty('label') ? option.label : ''
       }
     },
     productAttributes () {

components/molecules/m-product-short-info.vue

@@ -26,7 +26,10 @@
         {{ $t("Read all {count} review", { count: reviewsCount }) }}
       </AProductRating>
     </div>
-    <div class="product__description desktop-only" v-html="product.description" />
+    <div
+      class="product__description desktop-only"
+      v-html="product.short_description || product.description"
+    />
   </div>
 </template>
 

components/molecules/m-related-products.vue

@@ -66,7 +66,7 @@ export default {
       }
       let relatedProductsQuery = prepareRelatedQuery(key, sku);
 
-      const response = await this.$store.dispatch('product/list', {
+      const response = await this.$store.dispatch('product/findProducts', {
         query: relatedProductsQuery,
         size: 8,
         prefetchGroupProducts: false,

components/organisms/o-my-account-order-details.vue

@@ -193,9 +193,9 @@ export default {
 
       let searchQuery = new SearchQuery()
       searchQuery = searchQuery.applyFilter({ key: 'configurable_children.sku', value: { 'in': arrayOfSKUs } })
-      this.$store.dispatch('product/list', { query: searchQuery, start: 0, size: this.order.items.length, updateState: false }, { root: true }).then((resp) => {
+      this.$store.dispatch('product/findProducts', { query: searchQuery, start: 0, size: this.order.items.length, updateState: false }, { root: true }).then((resp) => {
         resp.items.forEach(responseItem => {
-          let relatedProduct = this.order.items.find(item => { return item.product_id === responseItem.id })
+          let relatedProduct = this.order.items.find(item => { return item.sku === responseItem.sku })
           this.products.push(Object.assign({}, relatedProduct, responseItem))
         })
       })

components/organisms/o-my-account-shipping-details.vue

@@ -384,6 +384,7 @@ export default {
   &__select {
     padding-bottom: calc(var(--font-xs) * 1.2);
   }
+  --select-dropdown-position: relative;
 }
 .message {
   margin: 0 0 var(--spacer-base) 0;

components/organisms/o-product-details.vue

@@ -176,9 +176,11 @@ export default {
     }
   }
   &__add-to-cart {
-    margin: var(--spacer-base) var(--spacer-sm) 0;
+    @include for-mobile {
+      margin: var(--spacer-sm) var(--spacer-sm) 0;
+    }
     @include for-desktop {
-      margin-top: var(--spacer-2xl);
+      margin-top: var(--spacer-sm);
     }
   }
   &__guide,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/theme-capybara",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "New theme for Vue Storefront based on Storefront UI",
   "main": "index.js",
   "scripts": {

pages/Category.vue

@@ -16,7 +16,7 @@
           class="sf-button--text navbar__filters-button"
           @click="isFilterSidebarOpen = true"
         >
-          <SfIcon size="32px" color="#BEBFC4" icon="filter" />
+          <SfIcon size="18px" class="navbar__filters-icon" color="#BEBFC4" icon="filter" />
           {{ $t("Filters") }}
           <template v-if="activeFiltersCount">
             ({{ activeFiltersCount }})
@@ -29,9 +29,10 @@
           </button>
         </template>
         <div class="navbar__sort">
-          <span class="navbar__label">{{ $t("Sort By") }}:</span>
+          <span class="navbar__label desktop-only">{{ $t("Sort By") }}:</span>
           <SfSelect
             class="navbar__select sort-by"
+            ref="SortBy"
             :selected="sortOrder"
             @change="changeSortOder"
           >
@@ -45,6 +46,13 @@
             </SfSelectOption>
           </SfSelect>
         </div>
+        <SfButton
+          class="sf-button--text navbar__filters-button sort-by__button mobile-only"
+          @click="$refs.SortBy.toggle()"
+        >
+          {{ $t('Sort by') }}
+          <ASortIcon />
+        </SfButton>
         <div class="navbar__counter">
           <span class="navbar__label desktop-only">
             {{ $t("Products found") }}:
@@ -196,6 +204,7 @@ import {
   localizedRoute,
   currentStoreView
 } from '@vue-storefront/core/lib/multistore';
+import ASortIcon from 'theme/components/atoms/a-sort-icon';
 import {
   SfIcon,
   SfList,
@@ -250,6 +259,7 @@ export default {
   name: 'CategoryPage',
   components: {
     LazyHydrate,
+    ASortIcon,
     SfIcon,
     SfList,
     SfColor,
@@ -653,12 +663,25 @@ export default {
         fill: var(--c-primary);
       }
     }
+    @include for-mobile {
+      --button-text-transform: uppercase;
+      font-size: var(--font-xs);
+      &.sort-by__button {
+        order: 1;
+      }
+    }
+  }
+  &__filters-icon {
+    margin: 0 var(--spacer-sm) 0 0;
   }
   &__label {
     font-family: var(--font-family-secondary);
     font-weight: var(--font-normal);
     color: var(--c-text-muted);
     margin: 0 var(--spacer-2xs) 0 0;
+    @include for-mobile {
+      font-size: var(--font-xs);
+    }
   }
   &__select {
     --select-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs);
@@ -669,6 +692,21 @@ export default {
     display: flex;
     align-items: center;
     margin: 0 auto 0 var(--spacer-2xl);
+
+    // This is needed to hide SfSelect main element on mobile view.
+    // This code can be removed when SfSelect supports better customization.
+    @include for-mobile {
+      position: absolute;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      --select-dropdown-z-index: 2;
+      ::v-deep .sf-select__cancel {
+        margin: 16px;
+        box-shadow: 4px 12px 24px rgba(119, 121, 122, 0.25);
+        --button-width: calc(100% - 32px);
+      }
+    }
   }
   &__counter {
     font-family: var(--font-family-secondary);
@@ -786,6 +824,7 @@ export default {
   }
   &__color {
     margin: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs) 0;
+    border: 1px solid var(--c-light);
   }
   &__item {
     --filter-label-color: var(--c-secondary-variant);

pages/Home.vue

@@ -174,8 +174,6 @@ export default {
   }
 }
 .section {
-  padding-left: var(--spacer-xl);
-  padding-right: var(--spacer-xl);
   @include for-desktop {
     padding-left: 0;
     padding-right: 0;

pages/MyAccount.vue

@@ -27,6 +27,7 @@
           <OMyAccountPlaceholder :title="$t('My newsletter')" />
         </SfContentPage>
       </SfContentCategory>
+      <SfContentPage :title="$t('Log out')" />
       <SfContentCategory :title="$t('Order details')">
         <SfContentPage :title="$t('Order history')">
           <OMyAccountOrdersHistory />
@@ -35,7 +36,6 @@
           <OMyAccountPlaceholder :title="$t('My reviews')" />
         </SfContentPage>
       </SfContentCategory>
-      <SfContentPage :title="$t('Log out')" />
     </SfContentPages>
   </div>
 </template>

pages/Product.vue

@@ -88,7 +88,8 @@ export default {
     return {
       stock: {
         isLoading: false,
-        max: 0
+        max: 0,
+        manageQuantity: true
       }
     };
   },
@@ -203,7 +204,8 @@ export default {
           product: this.getCurrentProduct,
           qty: this.getCurrentProduct.qty
         });
-        this.stock.max = res.qty;
+        this.manageQuantity = res.isManageStock;
+        this.stock.max = res.isManageStock ? res.qty : null;
       } finally {
         this.stock.isLoading = false;
       }
@@ -253,6 +255,12 @@ export default {
   padding: var(--spacer-base) var(--spacer-base) var(--spacer-base) var(--spacer-sm);
 }
 
+::v-deep {
+  .product__colors button {
+      border: 1px solid var(--c-light);
+  }
+}
+
 .banner {
   margin: var(--spacer-xl) 0;
   @include for-desktop {