From a5423565470fa110facddc8c0039f468eb972ce0 Mon Sep 17 00:00:00 2001 From: Marcin Kwiatkowski Date: Tue, 8 Mar 2022 10:43:30 +0100 Subject: [PATCH] chore: release 1.0.0-rc.6 --- README.md | 7 - components/AddToWishlist.vue | 15 +- components/AppFooter.vue | 36 +- components/AppHeader.vue | 244 +- components/BottomNavigation.vue | 141 +- components/CartSidebar.vue | 241 +- components/Checkout/VsfShippingProvider.vue | 6 +- components/CurrencySelector.vue | 151 +- .../CurrencySelector/CurrenciesModal.vue | 126 + components/General/IconSprite.vue | 362 + components/General/SvgImage.vue | 57 + components/HTMLContent.vue | 15 +- .../Navigation/HeaderNavigationItem.vue | 37 + components/Header/SearchBar/SearchBar.vue | 188 + components/Header/SearchBar/SearchResults.vue | 391 + components/HeaderLogo.vue | 73 + components/InstagramFeed.vue | 23 +- components/LoginModal.vue | 11 +- components/MobileMenuSidebar.vue | 78 + components/MobileStoreBanner.vue | 2 + components/MyAccount/AddressForm.vue | 19 +- components/MyAccount/PasswordResetForm.vue | 6 +- components/MyAccount/ProfileUpdateForm.vue | 38 +- components/Notification.vue | 15 +- components/ProductAddReviewForm.vue | 8 +- components/ProductsCarousel.vue | 38 +- components/RelatedProducts.vue | 2 +- components/StoreSwitcher.vue | 166 +- components/StoreSwitcher/StoresModal.vue | 149 + .../TopBar/checkStoresAndCurrency.gql.ts | 12 + components/TopBar/index.vue | 51 + components/TopBar/useTopBar.ts | 31 + components/UpsellProducts.vue | 2 +- components/WishlistSidebar.vue | 48 +- components/__tests__/LoginModal.spec.js | 9 +- components/utils/LoadWhenVisible.vue | 53 + composables/useApi/index.ts | 48 + composables/useMagentoConfiguration.ts | 17 - config.js | 20 +- config/example.json | 4 +- lang/de.js | 21 +- lang/en.js | 14 + layouts/default.vue | 56 +- middleware.config.js | 5 +- nuxt.config.js | 400 +- package.json | 27 +- pages/Category.vue | 230 +- pages/Checkout/Billing.vue | 27 +- pages/Checkout/Payment.vue | 11 +- pages/Checkout/Shipping.vue | 24 +- pages/Checkout/ThankYou.vue | 47 +- pages/Checkout/UserAccount.vue | 8 +- pages/Home.vue | 52 +- pages/MyAccount.vue | 5 +- pages/MyAccount/AddressesDetails.vue | 27 +- pages/MyAccount/MyReviews.vue | 5 +- pages/MyAccount/MyWishlist.vue | 42 +- pages/Page.vue | 9 +- pages/Product.vue | 27 +- pages/ResetPassword.vue | 6 +- pages/Shipping.vue | 16 +- plugins/dompurify.ts | 12 + static/favicon.ico | Bin 99678 -> 69694 bytes static/icons/facebook.svg | 5 +- static/icons/google.svg | 11 +- static/icons/pinterest.svg | 14 +- static/icons/twitter.svg | 11 +- static/icons/youtube.svg | 17 +- test-utils/mocks/useCart.js | 10 +- tsconfig.json | 2 +- .../click-outside/click-outside-directive.js | 19 + yarn.lock | 35580 +++++++--------- 72 files changed, 18468 insertions(+), 21212 deletions(-) create mode 100644 components/CurrencySelector/CurrenciesModal.vue create mode 100644 components/General/IconSprite.vue create mode 100644 components/General/SvgImage.vue create mode 100644 components/Header/Navigation/HeaderNavigationItem.vue create mode 100644 components/Header/SearchBar/SearchBar.vue create mode 100644 components/Header/SearchBar/SearchResults.vue create mode 100644 components/HeaderLogo.vue create mode 100644 components/MobileMenuSidebar.vue create mode 100644 components/StoreSwitcher/StoresModal.vue create mode 100644 components/TopBar/checkStoresAndCurrency.gql.ts create mode 100644 components/TopBar/index.vue create mode 100644 components/TopBar/useTopBar.ts create mode 100644 components/utils/LoadWhenVisible.vue create mode 100644 composables/useApi/index.ts create mode 100644 plugins/dompurify.ts create mode 100644 utilities/directives/click-outside/click-outside-directive.js diff --git a/README.md b/README.md index 4eef5ad..0d7928a 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,6 @@ # Magento 2.x theme ### Vue Storefront 2 integration with Magento - -This theme developed by superheroes from [Caravel](https://github.com/caravelx) ❤️ - -
- -
- ### Requirements: - NodeJS v16 or later diff --git a/components/AddToWishlist.vue b/components/AddToWishlist.vue index 64bfad0..f7137a1 100644 --- a/components/AddToWishlist.vue +++ b/components/AddToWishlist.vue @@ -5,12 +5,11 @@ class="add-to-wishlist" @click="$emit('addToWishlist')" > - {{ $t(actionText) }} @@ -20,13 +19,14 @@ @@ -100,6 +120,8 @@ export default { } &__social-image { margin: 0 var(--spacer-2xs) 0 0; + background-color: #fff; + border-radius: 100%; } } .sf-footer { diff --git a/components/AppHeader.vue b/components/AppHeader.vue index ed46990..caf4820 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -6,21 +6,12 @@ > - @@ -156,95 +114,72 @@ + diff --git a/components/General/IconSprite.vue b/components/General/IconSprite.vue new file mode 100644 index 0000000..f0b9f06 --- /dev/null +++ b/components/General/IconSprite.vue @@ -0,0 +1,362 @@ + + + diff --git a/components/General/SvgImage.vue b/components/General/SvgImage.vue new file mode 100644 index 0000000..5abf9b2 --- /dev/null +++ b/components/General/SvgImage.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/components/HTMLContent.vue b/components/HTMLContent.vue index 193f12e..2b53794 100644 --- a/components/HTMLContent.vue +++ b/components/HTMLContent.vue @@ -1,12 +1,11 @@ diff --git a/components/Header/Navigation/HeaderNavigationItem.vue b/components/Header/Navigation/HeaderNavigationItem.vue new file mode 100644 index 0000000..7965331 --- /dev/null +++ b/components/Header/Navigation/HeaderNavigationItem.vue @@ -0,0 +1,37 @@ + + diff --git a/components/Header/SearchBar/SearchBar.vue b/components/Header/SearchBar/SearchBar.vue new file mode 100644 index 0000000..5cc7ea9 --- /dev/null +++ b/components/Header/SearchBar/SearchBar.vue @@ -0,0 +1,188 @@ + + + + + diff --git a/components/Header/SearchBar/SearchResults.vue b/components/Header/SearchBar/SearchResults.vue new file mode 100644 index 0000000..43af69c --- /dev/null +++ b/components/Header/SearchBar/SearchResults.vue @@ -0,0 +1,391 @@ + + + diff --git a/components/HeaderLogo.vue b/components/HeaderLogo.vue new file mode 100644 index 0000000..23b609f --- /dev/null +++ b/components/HeaderLogo.vue @@ -0,0 +1,73 @@ + + + + diff --git a/components/InstagramFeed.vue b/components/InstagramFeed.vue index c41f3f7..9ff01ac 100644 --- a/components/InstagramFeed.vue +++ b/components/InstagramFeed.vue @@ -11,6 +11,7 @@ v-if="isMobile" src="/homepage/imageAm.webp" alt="katherina_trn" + loading="lazy" :width="160" :height="160" /> @@ -18,6 +19,7 @@ v-else src="/homepage/imageAd.webp" alt="katherina_trn" + loading="lazy" :width="470" :height="470" /> @@ -27,6 +29,7 @@ v-if="isMobile" src="/homepage/imageBm.webp" alt="katherina_trn" + loading="lazy" :width="160" :height="160" /> @@ -34,6 +37,7 @@ v-else src="/homepage/imageCd.webp" alt="katherina_trn" + loading="lazy" :width="470" :height="160" /> @@ -45,6 +49,7 @@ v-if="isMobile" src="/homepage/imageCm.webp" alt="katherina_trn" + loading="lazy" :width="160" :height="160" /> @@ -52,6 +57,7 @@ v-else src="/homepage/imageBd.webp" alt="katherina_trn" + loading="lazy" :width="470" :height="160" /> @@ -61,6 +67,7 @@ v-if="isMobile" src="/homepage/imageDm.webp" alt="katherina_trn" + loading="lazy" :width="160" :height="160" /> @@ -68,6 +75,7 @@ v-else src="/homepage/imageDd.webp" alt="katherina_trn" + loading="lazy" :width="470" :height="470" /> @@ -84,18 +92,21 @@ import { mapMobileObserver, unMapMobileObserver, } from '@storefront-ui/vue/src/utilities/mobile-observer.js'; -import { defineComponent } from '@nuxtjs/composition-api'; +import { computed, defineComponent, onBeforeUnmount } from '@nuxtjs/composition-api'; export default defineComponent({ name: 'InstagramFeed', components: { SfSection, }, - computed: { - ...mapMobileObserver(), - }, - beforeDestroy() { - unMapMobileObserver(); + setup() { + const isMobile = computed(() => mapMobileObserver().isMobile.get()); + + onBeforeUnmount(() => { + unMapMobileObserver(); + }); + + return { isMobile }; }, }); diff --git a/components/LoginModal.vue b/components/LoginModal.vue index a21baaf..1e14f1f 100644 --- a/components/LoginModal.vue +++ b/components/LoginModal.vue @@ -298,7 +298,9 @@ import { } from '@storefront-ui/vue'; import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'; import { required, email } from 'vee-validate/dist/rules'; -import { useUser, useForgotPassword, useWishlist } from '@vue-storefront/magento'; +import { + useUser, useForgotPassword, useWishlist, useCart, +} from '@vue-storefront/magento'; import { useUiState } from '~/composables'; import { customerPasswordRegExp, invalidPasswordMsg } from '~/helpers/customer/regex'; @@ -348,7 +350,9 @@ export default defineComponent({ loading, error: userError, } = useUser(); - const { load: loadWishlist } = useWishlist('GlobalWishlist'); + + const { load: loadCart } = useCart(); + const { loadItemsCount } = useWishlist('GlobalWishlist'); const { request, error: forgotPasswordError, loading: forgotPasswordLoading } = useForgotPassword(); const barTitle = computed(() => { @@ -386,6 +390,7 @@ export default defineComponent({ resetErrorValues(); isForgotten.value = value; isLogin.value = !value; + isThankYouAfterForgotten.value = value; }; const closeModal = () => { @@ -439,7 +444,7 @@ export default defineComponent({ const handleLogin = async () => { await handleForm(login)(); - await loadWishlist('GlobalWishlist'); + await Promise.all([loadItemsCount('GlobalWishlist'), loadCart()]); }; const handleForgotten = async () => { diff --git a/components/MobileMenuSidebar.vue b/components/MobileMenuSidebar.vue new file mode 100644 index 0000000..e914e13 --- /dev/null +++ b/components/MobileMenuSidebar.vue @@ -0,0 +1,78 @@ + + + + diff --git a/components/MobileStoreBanner.vue b/components/MobileStoreBanner.vue index 3855849..c6c3eeb 100644 --- a/components/MobileStoreBanner.vue +++ b/components/MobileStoreBanner.vue @@ -14,6 +14,7 @@ > @@ -25,6 +26,7 @@ > diff --git a/components/MyAccount/AddressForm.vue b/components/MyAccount/AddressForm.vue index eb245fa..5c093bd 100644 --- a/components/MyAccount/AddressForm.vue +++ b/components/MyAccount/AddressForm.vue @@ -18,7 +18,7 @@ :label="$t('First Name')" required :valid="!errors[0]" - :error-message="errors[0]" + :error-message="$t(errors[0])" /> @@ -49,7 +49,7 @@ :label="$t('Street Name')" required :valid="!errors[0]" - :error-message="errors[0]" + :error-message="$t(errors[0])" /> @@ -99,7 +98,7 @@ name="state" class="form__element form__element--half form__element--half-even form__select sf-select--underlined" :valid="!errors[0]" - :error-message="errors[0]" + :error-message="$t(errors[0])" >
@@ -33,7 +33,7 @@ :label="$t('New Password')" required :valid="!errors[0]" - :error-message="errors[0]" + :error-message="$t(errors[0])" />
diff --git a/components/MyAccount/ProfileUpdateForm.vue b/components/MyAccount/ProfileUpdateForm.vue index fc02adb..02a7640 100644 --- a/components/MyAccount/ProfileUpdateForm.vue +++ b/components/MyAccount/ProfileUpdateForm.vue @@ -16,7 +16,7 @@ :label="$t('First Name')" required :valid="!errors[0]" - :error-message="errors[0]" + :error-message="$t(errors[0])" /> @@ -46,7 +46,7 @@ :label="$t('Your e-mail')" required :valid="!errors[0]" - :error-message="errors[0]" + :error-message="$t(errors[0])" /> - +
+ {{ $t('Please type your current password to change your email address.') }} + + + {{ $t('Update personal data') }} + +
+ {{ $t('Update personal data') }} @@ -83,7 +105,8 @@ diff --git a/components/StoreSwitcher/StoresModal.vue b/components/StoreSwitcher/StoresModal.vue new file mode 100644 index 0000000..e6d5512 --- /dev/null +++ b/components/StoreSwitcher/StoresModal.vue @@ -0,0 +1,149 @@ + + + diff --git a/components/TopBar/checkStoresAndCurrency.gql.ts b/components/TopBar/checkStoresAndCurrency.gql.ts new file mode 100644 index 0000000..281023c --- /dev/null +++ b/components/TopBar/checkStoresAndCurrency.gql.ts @@ -0,0 +1,12 @@ +import { gql } from 'graphql-request'; + +export default gql` + query getStoresAndCurrencies { + availableStores { + store_code + } + currency { + available_currency_codes + } + } +`; diff --git a/components/TopBar/index.vue b/components/TopBar/index.vue new file mode 100644 index 0000000..7b742d9 --- /dev/null +++ b/components/TopBar/index.vue @@ -0,0 +1,51 @@ + + + + diff --git a/components/TopBar/useTopBar.ts b/components/TopBar/useTopBar.ts new file mode 100644 index 0000000..6c5f113 --- /dev/null +++ b/components/TopBar/useTopBar.ts @@ -0,0 +1,31 @@ +import { ref, onMounted } from '@nuxtjs/composition-api'; + +import useApi from '~/composables/useApi'; +import checkStoresAndCurrencyQuery from './checkStoresAndCurrency.gql'; + +export const useTopBar = () => { + const { query } = useApi(); + const hasStoresToSelect = ref(null); + const hasCurrencyToSelect = ref(null); + + onMounted(() => { + query(checkStoresAndCurrencyQuery) + .then((data) => { + hasStoresToSelect.value = data?.availableStores?.length; + hasCurrencyToSelect.value = data?.currency?.available_currency_codes?.length > 1; + + return data; + }) + .catch(() => { + hasStoresToSelect.value = false; + hasCurrencyToSelect.value = false; + }); + }); + + return { + hasStoresToSelect, + hasCurrencyToSelect, + }; +}; + +export default useTopBar; diff --git a/components/UpsellProducts.vue b/components/UpsellProducts.vue index c11ed97..9a45aec 100644 --- a/components/UpsellProducts.vue +++ b/components/UpsellProducts.vue @@ -1,6 +1,6 @@ - + +
-
- +