fix(default-theme): my account address management buttons #455

packages/default-theme/assets/scss/variables.scss

@@ -1,7 +1,15 @@
-@import '~@storefront-ui/shared/styles/variables';
+@import "~@storefront-ui/shared/styles/variables";
 
 // Global variables for theme
 
 // #__nuxt {
 // --c-primary: #5ece7b;
-// }
+// }
+
+$tablet: 768px;
+
+@mixin for-tablet {
+ @media screen and (min-width: $tablet) {
+ @content;
+ }
+}

packages/default-theme/components/SwAddress.vue

@@ -1,13 +1,13 @@
 <template>
- <div class="sw-address" v-if="address">
+ <div v-if="address" class="sw-address">
  <div class="sw-address__content">
  <h4 class="sw-address__title">{{ addressTitle }}</h4>
  <slot name="before-content" />
  <p class="content">
  {{ street }} {{ apartment }}, {{ zipcode }}<br />
  {{ city }}
  </p>
- <p class="content" v-if="phoneNumber">
+ <p v-if="phoneNumber" class="content">
  {{ phoneNumber }}
  </p>
  </div>

packages/default-theme/components/SwAddressList.vue

@@ -2,38 +2,24 @@
  <div class="shipping-list">
  <Address
  v-for="address in addresses"
- :address="address"
  :key="address.id"
- :isDefaultShipping="address.id === selectedShipping"
- :isDefaultBilling="address.id === selectedBilling"
+ :address="address"
+ :is-default-shipping="address.id === selectedShipping"
+ :is-default-billing="address.id === selectedBilling"
+ class="shipping-list__address"
  @selectDefaultAddress="selectDefaultAddress"
  @deleteAddress="deleteAddress"
  @editAddress="editAddress"
- class="shipping-list__address"
  />
  </div>
 </template>
 <script>
-import {
- SfProperty,
- SfTabs,
- SfList,
- SfIcon,
- SfBadge,
- SfCheckbox,
-} from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import Address from "@shopware-pwa/default-theme/components/account/MyAddresses/Address.vue"
 
 export default {
  name: "MyAddresses",
  components: {
- SfProperty,
- SfTabs,
- SfList,
- SfIcon,
- SfBadge,
- SfCheckbox,
  Address,
  },
  props: {},
@@ -63,10 +49,10 @@ export default {
  refreshUser,
  }
  },
+ computed: {},
  async mounted() {
  await this.loadAddresses()
  },
- computed: {},
  methods: {
  async selectDefaultAddress(addressId, type) {
  await this.markAddressAsDefault({ addressId, type })

packages/default-theme/components/SwBottomNavigation.vue

@@ -118,7 +118,7 @@ import {
 import SwCurrencySwitcher from "@shopware-pwa/default-theme/components/SwCurrencySwitcher"
 import { onMounted } from "@vue/composition-api"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
-import { PAGE_ACCOUNT, PAGE_LOGIN } from "../helpers/pages"
+import { PAGE_ACCOUNT } from "../helpers/pages"
 
 export default {
  name: "SwBottomNavigation",

packages/default-theme/components/forms/SwAddress.vue

@@ -16,28 +16,28 @@
  label="First Name"
  error-message="First name is required"
  :valid="!$v.form.firstName.$error"
- @blur="$v.form.firstName.$touch()"
  required
  class="form__element form__element--half"
+ @blur="$v.form.firstName.$touch()"
  />
  <SwInput
  v-model="form.lastName"
  name="lastName"
  label="Last Name"
  error-message="Last name is required"
  :valid="!$v.form.lastName.$error"
- @blur="$v.form.lastName.$touch()"
  required
  class="form__element form__element--half form__element--half-even"
+ @blur="$v.form.lastName.$touch()"
  />
  <SfSelect
  v-model="form.salutation"
  label="Salutation"
  error-message="Salutation must be selected"
  required
  :valid="!$v.form.salutation.$error"
- @blur="$v.form.salutaiton.$touch()"
  class="sf-select--underlined form__element form__element--half form__element--half form__select"
+ @blur="$v.form.salutaiton.$touch()"
  >
  <SfSelectOption
  v-for="salutationOption in getMappedSalutations"
@@ -53,58 +53,58 @@
  label="Street Name"
  error-message="Street name is required"
  :valid="!$v.form.street.$error"
- @blur="$v.form.street.$touch()"
  required
  class="form__element form__element--half form__element--half-even"
+ @blur="$v.form.street.$touch()"
  />
  <SwInput
  v-model="form.apartment"
  name="apartment"
  label="House/Apartment number"
  error-message="Apartment is required"
  :valid="!$v.form.apartment.$error"
- @blur="$v.form.apartment.$touch()"
  required
  class="form__element"
+ @blur="$v.form.apartment.$touch()"
  />
  <SwInput
  v-model="form.city"
  name="city"
  label="City"
  error-message="City is required"
  :valid="!$v.form.city.$error"
- @blur="$v.form.city.$touch()"
  required
  class="form__element form__element--half"
+ @blur="$v.form.city.$touch()"
  />
  <SwInput
  v-model="form.state"
  name="state"
  label="State/Province"
  error-message="State is required"
  :valid="!$v.form.state.$error"
- @blur="$v.form.state.$touch()"
  required
  class="form__element form__element--half form__element--half-even"
+ @blur="$v.form.state.$touch()"
  />
  <SwInput
  v-model="form.zipcode"
  name="zipcode"
  label="Zip-code"
  error-message="Zip code is required"
  :valid="!$v.form.zipcode.$error"
- @blur="$v.form.zipcode.$touch()"
  required
  class="form__element form__element--half"
+ @blur="$v.form.zipcode.$touch()"
  />
  <SfSelect
  v-model="form.country"
  label="Country"
  error-message="Country must be selected"
  :valid="!$v.form.country.$error"
- @blur="$v.form.country.$touch()"
  required
  class="sf-select--underlined form__element form__element--half form__element--half-even form__select"
+ @blur="$v.form.country.$touch()"
  >
  <SfSelectOption
  v-for="countryOption in getMappedCountries"
@@ -120,9 +120,9 @@
  label="Phone number"
  error-message="Wrong phone number"
  :valid="!$v.form.phoneNumber.$error"
- @blur="$v.form.phoneNumber.$touch()"
  required
  class="form__element"
+ @blur="$v.form.phoneNumber.$touch()"
  />
  <SwButton class="form__button" @click="updateAddress">
  Update the address
@@ -140,8 +140,8 @@
 <script>
 import { validationMixin } from "vuelidate"
 import { required } from "vuelidate/lib/validators"
-import { computed, reactive, ref, onBeforeMount } from "@vue/composition-api"
-import { SfAlert, SfTabs, SfSelect, SfIcon } from "@storefront-ui/vue"
+import { computed, reactive } from "@vue/composition-api"
+import { SfAlert, SfSelect } from "@storefront-ui/vue"
 import {
  useCountries,
  useUser,
@@ -153,7 +153,7 @@ import SwInput from "@shopware-pwa/default-theme/components/atoms/SwInput"
 
 export default {
  name: "SwAddress",
- components: { SfAlert, SfTabs, SwInput, SwButton, SfSelect, SfIcon },
+ components: { SfAlert, SwInput, SwButton, SfSelect },
  mixins: [validationMixin],
  props: {
  address: {
@@ -171,12 +171,11 @@ export default {
  }),
  },
  },
- setup(props) {
- const { getSalutations, error: salutationsError } = useSalutations(root)
+ setup(props, { root }) {
+ const { getSalutations } = useSalutations(root)
  const { addAddress, error: userError } = useUser(root)
  const { getCountries, error: countriesError } = useCountries(root)
- const editAddress = ref(false)
- const editedAddress = ref(-1)
+
  const form = reactive(JSON.parse(JSON.stringify(props.address)))
 
  const getMappedCountries = computed(() => mapCountries(getCountries.value))
@@ -284,22 +283,22 @@ export default {
 @import "@/assets/scss/variables";
 
 .form {
- @include for-desktop {
+ @include for-tablet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  }
  &__element {
  margin-bottom: var(--spacer-xl);
- @include for-desktop {
+ @include for-tablet {
  flex: 0 0 100%;
  }
  &--half {
- @include for-desktop {
+ @include for-tablet {
  flex: 1 1 50%;
  }
  &-even {
- @include for-desktop {
+ @include for-tablet {
  padding-left: var(--spacer-xl);
  }
  }
@@ -312,11 +311,17 @@ export default {
  }
  &__button {
  width: 100%;
- @include for-desktop {
- width: auto;
- }
+
  &--back {
- margin-left: var(--spacer-base);
+ margin: var(--spacer-base) 0 0 0;
+ }
+
+ @include for-tablet {
+ width: auto;
+
+ &--back {
+ margin: 0 0 0 var(--spacer-base);
+ }
  }
  }
 }

packages/default-theme/components/views/ProductView.vue

@@ -1,14 +1,14 @@
 <template>
  <div v-if="product" id="product">
- <SwPluginSlot name="product-page-details-before" :slotContext="product" />
+ <SwPluginSlot name="product-page-details-before" :slot-context="product" />
  <SwGoBackArrow class="product-page-back" />
  <div class="product">
  <SwProductGallery :product="product" class="product__gallery" />
  <div class="product__description">
  <SwProductDetails :product="product" :page="page" />
  </div>
  </div>
- <SwPluginSlot name="product-page-details-after" :slotContext="product" />
+ <SwPluginSlot name="product-page-details-after" :slot-context="product" />
  <div class="products__recomendations">
  <div class="products-recomendations__section">
  <SwProductCarousel />

packages/default-theme/pages/_lang/account.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="my-account" :key="$route.fullPath">
+ <div :key="$route.fullPath" class="my-account">
  <SfContentPages
  :title="$t('My account')"
  :active="activePage"
@@ -11,9 +11,7 @@
  <nuxt-child />
  </SfContentPage>
  <SfContentPage :title="$t('My addresses')">
- <SfTabs :open-tab="1">
- <nuxt-child />
- </SfTabs>
+ <nuxt-child />
  </SfContentPage>
  </SfContentCategory>
  <SfContentCategory :title="$t('Order details')">
@@ -25,9 +23,10 @@
  </SfContentPages>
  </div>
 </template>
+
 <script>
-import { computed, onBeforeMount } from "@vue/composition-api"
-import { SfContentPages, SfTabs } from "@storefront-ui/vue"
+import { computed } from "@vue/composition-api"
+import { SfContentPages } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import { PAGE_LOGIN } from "@shopware-pwa/default-theme/helpers/pages"
 
@@ -37,7 +36,6 @@ export default {
  name: "AccountPage",
  components: {
  SfContentPages,
- SfTabs,
  },
  middleware: authMiddleware,
  setup(props, { root }) {
@@ -59,16 +57,16 @@ export default {
  return (this.user && this.user && this.user.activeShippingAddress) || {}
  },
  },
- mounted() {
- this.updateActivePage(this.activePage)
- },
  watch: {
  $route(to, from) {
  if (to.name === "account-profile") {
  this.activePage = "My profile"
  }
  },
  },
+ mounted() {
+ this.updateActivePage(this.activePage)
+ },
  methods: {
  async updateActivePage(title) {
  switch (title) {
@@ -91,6 +89,14 @@ export default {
  },
 }
 </script>
+
+<style lang="scss">
+.my-account .my-account__content,
+.my-account .sf-content-pages__content {
+ height: auto;
+}
+</style>
+
 <style lang="scss" scoped>
 @import "@/assets/scss/variables";
 

packages/default-theme/pages/_lang/account/addresses/add/_id.vue

@@ -53,4 +53,15 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.addresses-add {
+ box-sizing: border-box;
+ width: 100%;
+
+ @include for-mobile {
+ padding: var(--spacer-sm);
+ }
+}
+</style>