@viur/shop-components 0.1.2 → 0.1.3

package/.eslintrc.cjs

@@ -0,0 +1,23 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution")
+
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  root: true,
+  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
+  plugins: ["vue", "prettier"],
+  parserOptions: {
+    ecmaVersion: "latest",
+    parser: "@typescript-eslint/parser"
+  },
+  rules: {
+    "vue/html-self-closing": 0,
+    "no-unused-vars": 1,
+    "vue/order-in-components": 0,
+    "vue/no-deprecated-slot-attribute":0,
+  }
+}

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": false,
+  "singleAttributePerLine": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/Shop.vue

@@ -171,24 +171,29 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
     padding: var(--sl-spacing-medium);
     overflow: hidden;
     border-radius: var(--sl-border-radius-medium);
-    grid-column: auto / span var(--shop-sidebar-columns);
     /* height has to be set or sidebar grows until infinity... */
     height: min-content;
+    grid-column: auto / span 12;
+    order: -1;
+    & > * + * {
+      margin-top: var(--sl-spacing-small);
+    }
     @media (min-width: 1024px) {
       position: sticky;
       max-height: calc(100vh - var(--viur-shop-sidebar-height-offset) - 2 * var(--padding));
       top: var(--padding);
       bottom: var(--padding);
+      grid-column: auto / span var(--shop-sidebar-columns);
+      order: unset;
     }
   }
 
   .viur-shop-stepper-wrap {
     display: flex;
     flex-direction: column;
-    grid-column: auto / span var(--shop-main-columns);
-
-    @media (max-width: 1024px) {
-      grid-column: auto / span 12;
+    grid-column: auto / span 12;
+    @media (min-width: 1024px) {
+      grid-column: auto / span var(--shop-main-columns);
     }
 
     @media (max-width: 600px) {

package/src/ShopOrderStepper.vue

@@ -12,25 +12,27 @@
 
             <sl-tab-panel :name="name">
                 <template v-if="tab?.['loaded']">
-                  
-                  
+
+
                     <component :is="tab['component']">
                       <template #['template_'+name]>
-                        <slot :name="'template_'+name"></slot> 
+                        <slot :name="'template_'+name"></slot>
                       </template>
-                      
+
                       <template v-slot="slotProps">
-                        <sl-bar>
+                        <sl-bar class="viur-shop-stepper-bar">
                           <div slot="right">
                             <span v-if="slotProps.hint" class="hint">{{ slotProps.hint }}</span>
                             <sl-button
-                               :class="{'action-button-hint':slotProps.hint}"
-                                variant="primary"
-                                :disabled="active(slotProps)"
-                                @click="nextStep(slotProps)"
-                                :loading="tab['validating']"
+                              :class="{'action-button-hint':slotProps.hint}"
+                              variant="success"
+                              size="large"
+                              :disabled="active(slotProps)"
+                              @click="nextStep(slotProps)"
+                              :loading="tab['validating']"
                             >
                               {{slotProps.nextName}}
+                              <sl-icon slot="suffix" name="chevron-right"></sl-icon>
                             </sl-button>
                           </div>
                         </sl-bar>
@@ -77,7 +79,7 @@ function nextStep(obj){
       useTimeoutFn(() => {
         shopStore.navigateToNext()
       }, 300)
-     
+
     }else{
       shopStore.state.tabs[shopStore.state.currentTab]['valid']=false
       shopStore.state.tabs[shopStore.state.currentTab]['validating']=false
@@ -97,6 +99,10 @@ function active(obj){
 
 <style scoped>
 
+.viur-shop-stepper-bar {
+  margin-top: var(--shop-leaf-gap, var(--ignt-spacing-small))
+}
+
 .hint{
   border:1px solid var(--sl-color-neutral-200);
   border-top-left-radius: var(--sl-input-border-radius-medium);
@@ -104,11 +110,13 @@ function active(obj){
   background-color: var(--sl-color-neutral-100);
   color:var(--sl-color-neutral-800);
   padding: 0 var(--sl-spacing-small);
-  height: var(--ignt-basic-line-height);
-  
+  height: auto;
+  min-height: var(--sl-input-height-large);
+  font-size: var(--sl-button-font-size-large);
+  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width)* 2);
 }
 .action-button-hint::part(base){
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-</style>
+</style>

package/src/ShopSummary.vue

@@ -1,10 +1,11 @@
 <template>
-  <LoadingHandler :isLoading="!state.items.length">
-    <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+  <LoadingHandler :isLoading="state.loading">
+    <h2 class="viur-shop-cart-sidebar-headline headline" v-html="$t('shop.summary_headline')"></h2>
     <div class="viur-shop-cart-sidebar-summary">
       <div class="viur-shop-cart-sidebar-summary-item" v-for="item in state.items">
         <template v-if="(!shopStore.state.showNodes && item.skel_type === 'leaf') || shopStore.state.showNodes">
-          <div class="viur-shop-cart-sidebar-summary-item-amount" v-if="item.skel_type === 'leaf'">{{ item.quantity }}x
+          <div class="viur-shop-cart-sidebar-summary-item-amount" v-if="item.skel_type === 'leaf'">
+            {{ item.quantity }}&nbsp;&times;
           </div>
           <div class="viur-shop-cart-sidebar-summary-item-name" v-html="item.skel_type === 'node' ? item.name : item.shop_name"></div>
           <div class="viur-shop-cart-sidebar-summary-item-price">
@@ -15,18 +16,18 @@
         </template>
       </div>
     </div>
-    <div class="viur-shop-cart-sidebar-info-line">
-      <span>Zwischensumme</span>
+    <div class="viur-shop-cart-sidebar-info">
+      <span v-html="$t('shop.summary_subtotal')"></span>
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.cartTotal">
       </sl-format-number>
     </div>
-    <div class="viur-shop-cart-sidebar-info-line">
-      <span>Versandkosten</span>
+    <div class="viur-shop-cart-sidebar-info">
+      <span v-html="$t('shop.summary_shipping_total')"></span>
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.shippingTotal">
       </sl-format-number>
     </div>
     <div class="viur-shop-cart-shipping-item" v-if="shopStore.state.order?.cart?.dest?.shipping">
-      <span>Lieferzeit </span>
+      <span v-html="$t('shop.summary_delivery_time')"></span>
       <span>
         {{
           shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range ?
@@ -35,28 +36,28 @@
         }} {{ shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range === 1 ? "Tag" : "Tage" }}
       </span>
     </div>
-    <div class="viur-shop-cart-sidebar-info-line" v-if="shopStore.state.cartRoot.discount">
-      <span>Rabatt</span>
+    <div class="viur-shop-cart-sidebar-info" v-if="shopStore.state.cartRoot.discount">
+      <span v-html="$t('shop.summary_discount')"></span>
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.discount">
       </sl-format-number>
     </div>
     <discount-input v-if="shopStore.state.currentTab!=='complete'"></discount-input>
-    <div class="viur-shop-cart-sidebar-info-line">
+    <div class="viur-shop-cart-sidebar-info">
     </div>
-    
-    <div class="viur-shop-cart-sidebar-info-line total">
-      <span>Gesamt:</span>
+
+    <div class="viur-shop-cart-sidebar-info viur-shop-cart-sidebar-info--total">
+      <span v-html="$t('shop.summary_total')"></span>
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.total">
       </sl-format-number>
     </div>
-    <div class="viur-shop-cart-sidebar-info-line ">
-      <span>inkl. MwSt:</span>
-      <sl-format-number lang="de" type="currency" currency="EUR" :value="state.vat">
+    <div class="viur-shop-cart-sidebar-info " v-for="vatObj in state.vat">
+      <span v-html="$t('shop.summary_vat', {'percentage':calc_percent(vatObj.percentage) })"></span>
+      <sl-format-number lang="de" type="currency" currency="EUR" :value="vatObj.value">
       </sl-format-number>
     </div>
     <slot name="action-buttons" >
       <div class="viur-shop-cart-sidebar-btn-wrap" v-if="false && !shopStore.state.order?.['is_paid']">
-        <sl-button variant="primary" size="medium">Bestellen</sl-button>
+        <sl-button variant="success" size="large">{{ $t("shop.summary_checkout") }}</sl-button>
       </div>
     </slot>
   </LoadingHandler>
@@ -74,7 +75,7 @@ const { fetchCart, addItem, state: cartState } = useCart();
 
 const state = reactive({
   items: computed(() => { return shopStore.state.cartList }),
-  cartTotal: computed(() => { 
+  cartTotal: computed(() => {
     let sum = state.items.reduce((acc,item)=>{
       if (item.skel_type==="leaf"){
         acc+=item.price.current *item.quantity
@@ -101,7 +102,7 @@ const state = reactive({
     return shopStore.state.cartRoot.total
   }),
   vat:computed(()=>{
-    return shopStore.state.cartRoot.vat?.[0].value // why is this a list
+    return shopStore.state.cartRoot.vat
   }),
   sum:computed(()=>{
     let sum = state.items.reduce((acc,item)=>{
@@ -112,36 +113,47 @@ const state = reactive({
       return acc;
     },0)
     return sum
-  })
+  }),
+  loading:false
 })
 
 onBeforeMount(() => {
+  state.loading=true
   if (!shopStore.state.cartList.length) {
-    fetchCart()
+    fetchCart().then(()=>state.loading=false).catch(()=>state.loading=false)
+  }else{
+    state.loading=false
   }
 })
+
+function calc_percent(val){
+  return new Intl.NumberFormat("de-DE", {
+    style: "percent",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(val);
+}
+
+
 </script>
 
 <style scoped>
-.viur-shop-cart-sidebar-info-line {
+
+.viur-shop-cart-sidebar-info {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  margin: var(--sl-spacing-2x-small) 0;
-
-  &.total {
-    font-weight: 600;
-    border-top: 1px solid var(--sl-color-neutral-300);
-    border-bottom: 1px solid var(--sl-color-neutral-300);
-    padding: var(--sl-spacing-x-small) 0;
-    margin: var(--sl-spacing-small) 0;
-  }
-
   span {
     margin-right: auto;
   }
 }
 
+.viur-shop-cart-sidebar-info--total {
+  font-weight: 600;
+  border-top: 1px solid var(--sl-color-neutral-300);
+  padding-top: var(--sl-spacing-x-small);
+}
+
 .viur-shop-cart-sidebar-btn-wrap {
   display: flex;
   flex-direction: column;
@@ -152,18 +164,17 @@ onBeforeMount(() => {
   }
 }
 
-.viur-shop-cart-sidebar-headline {
-  margin: 0 0 var(--sl-spacing-large) 0;
-}
-
 .viur-shop-cart-sidebar-summary {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  margin-bottom: var(--sl-spacing-small);
   padding-right: 4px;
   margin-right: -4px;
 
+  & > *:not(:empty) + *:not(:empty) {
+    margin-top: var(--sl-spacing-small);
+  }
+
   &::-webkit-scrollbar {
     width: 3px;
   }
@@ -187,7 +198,6 @@ onBeforeMount(() => {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--sl-spacing-medium);
-  margin-bottom: var(--sl-spacing-small);
 }
 
 .viur-shop-cart-sidebar-summary-item-name {

package/src/Steps/ShopCart.vue

@@ -1,6 +1,6 @@
 <template>
     <loading-handler :isLoading="cartState.isLoading" :isUpdating="cartState.isUpdating">
-        <div class="item-wrapper" v-if="state.items.length>0">
+        <div class="viur-shop-item-wrapper" v-if="state.items.length>0">
             <cart-item v-for="item in state.items" :item="item"
             :edit="!shopStore.state.order?.['is_checkout_in_progress']"
             >
@@ -13,12 +13,12 @@
             </template>
         </shop-alert>
     </loading-handler>
-    
+
     <slot name="template_cart">
     </slot>
 
     <slot
-        nextName="weiter"
+        :nextName="$t('shop.proceed-checkout')"
         :activefunction="()=>state.items.length>0"
         :nextfunction="()=>true"
     >
@@ -48,10 +48,11 @@ onBeforeMount(()=>{
 
 </script>
 <style scoped>
-.item-wrapper{
-    display:flex;
-    flex-direction: column;
-    gap: 20px;
+
+.viur-shop-item-wrapper {
+  display:flex;
+  flex-direction: column;
+  gap: var(--shop-leaf-gap, var(--ignt-spacing-small));
 }
 
 </style>

package/src/Steps/ShopOrderConfirm.vue

@@ -3,7 +3,7 @@
     <h2 class="viur-shop-cart-headline headline">{{ $t('shop.check_order')}}</h2>
     <div class="viur-shop-cart-address-wrap">
       <div class="viur-shop-cart-address">
-        <div class="viur-shop-cart-address-headline">
+        <div class="viur-shop-user-data-headline">
           {{ $t('viur.shop.skeleton.cartnode.shipping_address') }}
         </div>
         <template v-if="state.shippingAddress">
@@ -17,7 +17,7 @@
         </template>
       </div>
       <div class="viur-shop-cart-address">
-        <div class="viur-shop-cart-address-headline">
+        <div class="viur-shop-user-data-headline">
           {{ $t('viur.shop.skeleton.order.billing_address') }}
         </div>
         <template v-if="state.billingAddress">
@@ -271,7 +271,7 @@ sl-menu-item {
   margin-bottom: var(--sl-spacing-x-large);
 }
 
-.viur-shop-cart-address-headline {
+.viur-shop-user-data-headline {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;

package/src/Steps/ShopUserDataGuest.vue

@@ -1,24 +1,24 @@
 <template>
-    <div class="viur-shop-cart-address-headline">
-        {{ $t("skeleton.address.address_type.shipping") }}
+    <div class="viur-shop-user-data-headline">
+        {{ $t("skeleton.address.address_type.billing") }}
     </div>
-
-    <address-form :formtype="addressState.billingIsShipping?'both':'shipping'">
+    <address-form :formtype="addressState.billingIsShipping?'both':'billing'">
     </address-form>
-    <div>
-      <sl-switch :checked="addressState.billingIsShipping" @sl-change="switchAddresses">{{  $t('shop.use_shipping_as_billing_address') }}</sl-switch>
-    </div>
 
+    <sl-switch class="viur-shop-user-data-switch" :checked="addressState.billingIsShipping" @sl-change="switchAddresses">
+      {{  $t('shop.use_shipping_as_billing_address') }}
+    </sl-switch>
+    
     <div v-show="!addressState.billingIsShipping">
-      <div class="viur-shop-cart-address-headline">
-        {{ $t("skeleton.address.address_type.billing") }}
+      <div class="viur-shop-user-data-headline">
+        {{ $t("skeleton.address.address_type.shipping") }}
       </div>
-      <address-form formtype="billing" ></address-form>
+      <address-form formtype="shipping" >
+      </address-form>
     </div>
-
     <slot name="template_userdata">
     </slot>
-    
+
     <slot
         nextName="weiter"
         :activefunction="()=>true"
@@ -46,9 +46,13 @@ function switchAddresses(event){
 }
 
 onBeforeMount(()=>{
-  if (shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['address_type']?.includes('billing') || !shopStore.state.cartRoot?.['shipping_address']?.['dest']){
+  if (!shopStore.state.order?.['billing_address']?.['dest']){
+    addressState.billingIsShipping = true //init
+  }
+  else if (shopStore.state.order?.['billing_address']?.['dest']?.['address_type']?.includes('shipping')){
     addressState.billingIsShipping = true
-  }else{
+  }
+  else{
     addressState.billingIsShipping = false
   }
 })
@@ -70,7 +74,7 @@ async function nextStep(){
 </script>
 
 <style scoped>
-.viur-shop-cart-address-headline {
+.viur-shop-user-data-headline {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -79,4 +83,4 @@ async function nextStep(){
   font-weight: 600;
   margin-bottom: var(--sl-spacing-medium);
 }
-</style>
+</style>

package/src/components/AddressForm.vue

@@ -29,22 +29,22 @@ const {state:addressState} = useAddress();
 const props = defineProps({
   formtype:{
     type:String,
-    default:"shipping" // formtype: shipping, billing, both
+    default:"billing" // formtype: shipping, billing, both
   }
 })
 
 const state = reactive({
   formtype:computed(()=>{
-    if (['shipping','both'].includes(props.formtype)){
-      return "shipping"
+    if (['billing','both'].includes(props.formtype)){
+      return "billing"
     }
-    return 'billing'
+    return 'shipping'
   }),
 
   action: computed(()=>{
     if (state.formtype ==='shipping' && shopStore.state.cartRoot?.['shipping_address']){
       return 'edit'
-    } else if (props.formtype === 'billing' && shopStore.state.order?.['billing_address']){
+    } else if (state.formtype === 'billing' && shopStore.state.order?.['billing_address']){
       return 'edit'
     } else {
       return 'add'
@@ -54,7 +54,7 @@ const state = reactive({
   skelkey:computed(()=>{
     if (state.formtype === 'shipping' && shopStore.state.cartRoot?.['shipping_address']){
       return shopStore.state.cartRoot['shipping_address']?.['dest']?.['key']
-    } else if (props.formtype === 'billing' && shopStore.state.order?.['billing_address']){
+    } else if (state.formtype === 'billing' && shopStore.state.order?.['billing_address']){
       return shopStore.state.order?.['billing_address']?.['dest']?.['key']
     }
     return null
@@ -78,14 +78,13 @@ function formChange(data){
 
 watch(()=>addressState.billingIsShipping, (newVal,oldVal)=>{
   if(oldVal && !newVal){
-    if(shopStore.state.order?.['billing_address']){
-      shopStore.state.order['billing_address'] = null
+    if(shopStore.state.cartRoot?.['shipping_address']){
+      shopStore.state.cartRoot['shipping_address'] = null
     }
-
-    addressState[`billingForm`].state.skel = {'address_type':state.address_type, 'customer_type':'private'}
-
+    addressState[`shippingForm`].state.skel = {'address_type':state.address_type, 'customer_type':'private'}
   }
 
+  addressState[`${state.formtype}Form`].state.skel['address_type'] = state.address_type
 })
 
 </script>

package/src/components/AddressFormLayout.vue

@@ -46,6 +46,16 @@
         label="placeholder">
   </slot>
 
+  <slot boneName="email"
+        :widget="getBoneWidget(formState.structure['email']['type'])"
+        label="placeholder">
+  </slot>
+
+  <slot boneName="phone"
+        :widget="getBoneWidget(formState.structure['phone']['type'])"
+        label="placeholder">
+  </slot>
+
   </div>
 </template>
 <script setup>

package/src/components/CartItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="item-wrapper">
+  <div class="viur-shop-item-wrapper">
     <sl-card horizontal class="viur-shop-cart-leaf">
     <img
       class="viur-shop-cart-leaf-image"
@@ -12,44 +12,48 @@
         )
       "
     />
+    <h5 v-if="item.shop_art_no_or_gtin" class="viur-shop-cart-leaf-artno" slot="header">
+      {{ getValue(item.shop_art_no_or_gtin) }}
+    </h5>
     <h4
       class="viur-shop-cart-leaf-headline headline"
       v-html="getValue(item.shop_name)"
     ></h4>
-    <h5 class="viur-shop-cart-leaf-artno">
-      {{ getValue(item.shop_art_no_or_gtin) }}
-    </h5>
     <div
       class="viur-shop-cart-leaf-description"
       v-html="getValue(item.shop_description)"
     ></div>
-    <sl-input
-        :disabled="!edit"
-        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
-        type="number"
-        placeholder="Number"
-        min="0"
-        noSpinButtons
-        :value="item.quantity"
-        @sl-change="changeAmount($event.target.value)"
-      >
-      <dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline>
-        <sl-icon name="trash"></sl-icon>
-        <template #dialog="{close}">
-          {{ $t('messages.remove_article_from_cart') }}
-          <sl-bar>
-            <sl-button slot="left" @click="close">{{$t('actions.cancel')}}</sl-button>
-            <sl-button slot="right" variant="danger" @click="removeArticle(); close()">{{ $t('actions.delete') }}</sl-button>
-          </sl-bar>
-        </template>
-      </dialog-Button>
-      <sl-button slot="prefix" v-else @click="changeAmount(item.quantity-=1)">
-        <sl-icon name="dash-lg"></sl-icon>
-      </sl-button>
-      <sl-button slot="suffix" @click="changeAmount(item.quantity+=1)">
-        <sl-icon name="plus-lg"></sl-icon>
-      </sl-button>
-    </sl-input>
+
+    <div class="viur-shop-cart-leaf-quantity">
+      <div class="viur-shop-cart-leaf-label">{{$t('shop.quantity')}}</div>
+      <sl-input
+          :disabled="!edit"
+          class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
+          type="number"
+          placeholder="Number"
+          min="0"
+          noSpinButtons
+          :value="item.quantity"
+          @sl-change="changeAmount($event.target.value)"
+        >
+        <dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline>
+          <sl-icon name="trash"></sl-icon>
+          <template #dialog="{close}">
+            {{ $t('messages.remove_article_from_cart') }}
+            <sl-bar>
+              <sl-button slot="left" @click="close">{{$t('actions.cancel')}}</sl-button>
+              <sl-button slot="right" variant="danger" @click="removeArticle(); close()">{{ $t('actions.delete') }}</sl-button>
+            </sl-bar>
+          </template>
+        </dialog-Button>
+        <sl-button slot="prefix" v-else @click="changeAmount(item.quantity-=1)">
+          <sl-icon name="dash-lg"></sl-icon>
+        </sl-button>
+        <sl-button slot="suffix" @click="changeAmount(item.quantity+=1)">
+          <sl-icon name="plus-lg"></sl-icon>
+        </sl-button>
+      </sl-input>
+    </div>
 
     <div class="viur-shop-cart-leaf-unitprice">
       <div class="viur-shop-cart-leaf-label">{{$t('shop.unit_price')}}</div>
@@ -63,11 +67,13 @@
       </sl-format-number>
     </div>
 
-
-    <div class="availability"
-      :class="`availability--${item.shop_availability}`"
-    >
+    <div class="viur-shop-cart-leaf-availability">
+      <div class="viur-shop-cart-leaf-label">{{ $t('shop.availability') }}</div>
+      <div class="availability"
+           :class="`availability--${item.shop_availability}`"
+      >
         {{$t(item.shop_availability)}}
+      </div>
     </div>
 
     <div class="viur-shop-cart-leaf-price">
@@ -125,44 +131,44 @@ function removeArticle(){
 @layer foundation.shop {
 
   .availability {
-  display: flex;
-  flex-basis: 70%;
-  font-size: .9em;
-  align-items: center;
-  justify-content: flex-end;
-  white-space: nowrap;
-  &:before {
-    content: '';
-    display: block;
-    background-color: #666;
-    width: .7em;
-    height: .7em;
-    border-radius: 50%;
-    margin-right: 5px;
-    margin-bottom: 2px;
+    display: flex;
+    flex-basis: 70%;
+    font-size: .9em;
+    align-items: center;
+    justify-content: flex-start;
+    white-space: nowrap;
+    &:before {
+      content: '';
+      display: block;
+      background-color: #666;
+      width: .7em;
+      height: .7em;
+      border-radius: 50%;
+      margin-right: 5px;
+      margin-bottom: 2px;
+    }
   }
-}
-.availability--onrequest,
-.availability--instock {
-  color: var(--ignt-color-success);
-  &:before {
-    background-color: var(--ignt-color-success);
+  .availability--onrequest,
+  .availability--instock {
+    color: var(--ignt-color-success);
+    &:before {
+      background-color: var(--ignt-color-success);
+    }
   }
-}
-.availability--discontinued,
-.availability--outofstock {
-  color: var(--ignt-color-danger);
-  &:before {
-    background-color: var(--ignt-color-danger);
+  .availability--discontinued,
+  .availability--outofstock {
+    color: var(--ignt-color-danger);
+    &:before {
+      background-color: var(--ignt-color-danger);
+    }
   }
-}
-.availability--limited,
-.availability--preorder {
-  color: var(--ignt-color-warning);
-  &:before {
-    background-color: var(--ignt-color-warning);
+  .availability--limited,
+  .availability--preorder {
+    color: var(--ignt-color-warning);
+    &:before {
+      background-color: var(--ignt-color-warning);
+    }
   }
-}
 
   .viur-shop-cart-leaf {
     --shop-leaf-label-color: var(--ignt-color-primary);
@@ -174,6 +180,7 @@ function removeArticle(){
     &::part(base) {
       display: flex;
       position: relative;
+      padding-bottom: var(--shop-leaf-gap, var(--ignt-spacing-small));
     }
 
     &::part(header) {
@@ -189,8 +196,9 @@ function removeArticle(){
     &::part(body) {
       display: grid;
       grid-template-columns: repeat(5, minmax(0, 1fr));
-      gap: var(--sl-spacing-medium);
-      padding: var(--sl-spacing-large);
+      grid-template-rows: fit-content(20%) 1fr fit-content(20%);
+      gap: var(--shop-leaf-gap, var(--ignt-spacing-small));
+      padding: 0 var(--sl-spacing-large);
       height: 100%;
     }
 
@@ -201,8 +209,8 @@ function removeArticle(){
     @media (max-width: 600px) {
       &::part(body) {
         grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: var(--sl-spacing-medium);
-        padding: var(--sl-spacing-large);
+        gap: var(--shop-leaf-gap, var(--ignt-spacing-small));
+        padding: 0 var(--sl-spacing-large);
         height: 100%;
       }
 
@@ -219,7 +227,6 @@ function removeArticle(){
 
   .viur-shop-cart-leaf-headline {
     grid-column: 1 / span 4;
-    order: -2;
     margin: 0;
     font-size: var(--shop-leaf-headline-font-size);
 
@@ -229,6 +236,7 @@ function removeArticle(){
   }
 
   .viur-shop-cart-leaf-artno {
+    font-size: .8em;
     grid-column: 1 / span 5;
     margin: 0;
 
@@ -284,6 +292,7 @@ function removeArticle(){
   }
 
   .viur-shop-cart-leaf-unitprice {
+    grid-column: 3 / span 1;
     align-self: center;
 
     @media (max-width: 600px) {
@@ -291,6 +300,12 @@ function removeArticle(){
     }
   }
 
+  .viur-shop-cart-leaf-availability {
+    grid-column: 4 / span 1;
+    align-self: center;
+    text-align: right;
+  }
+
   .viur-shop-cart-leaf-label,
   .viur-shop-cart-leaf-value--quantity::part(form-control-label) {
     color: var(--shop-leaf-label-color);
@@ -317,7 +332,7 @@ function removeArticle(){
     }
   }
 
-  .item-wrapper{
+  .viur-shop-item-wrapper{
     position: relative;
   }
 

package/src/components/CartItemSmall.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="item-wrapper">
+  <div class="viur-shop-item-wrapper">
     <sl-card horizontal class="viur-shop-cart-leaf-small">
     <img
       class="viur-shop-cart-leaf-image"
@@ -46,7 +46,7 @@
     </sl-input>
 
     <div class="viur-shop-cart-leaf-article-number">
-      <div class="viur-shop-cart-leaf-label">{{ $t('shop.articlenumber') }}</div>
+      <div class="viur-shop-cart-leaf-label">{{ $t('shop.article_number') }}</div>
       {{ getValue(item.shop_art_no_or_gtin) }}
     </div>
 
@@ -222,7 +222,7 @@ function removeArticle(){
     }
   }
 
-  .item-wrapper{
+  .viur-shop-item-wrapper{
     position: relative;
   }
 

package/src/components/DiscountInput.vue

@@ -12,7 +12,7 @@
   </shop-alert>
 
   <template v-if="shopStore.state.cartRoot.discount">
-    <div class="discount-view">
+    <div class="viur-shop-discount-view">
     <span>Code: {{ shopStore.state.cartRoot.discount.dest.name }}</span>
     <sl-button size="small"  outline variant="danger" @click="removeDiscountAction" :loading="state.loading">
       <sl-icon name="x-lg" slot="prefix"></sl-icon>
@@ -20,15 +20,16 @@
     </sl-button>
     </div>
   </template>
-  <template v-else>
+  <sl-button-group v-else>
     <sl-input
-      placeholder="Rabattcode eingeben"
+      class="viur-shop-discount-input"
+      :placeholder="$t('shop.add_discount_placeholder')"
       v-model="state.code"
       @keypress.enter="addDiscountAction()"
     >
     </sl-input>
-    <button @click="addDiscountAction()" :loading="state.loading">{{ $t('shop.add_discount') }}</button>
-  </template>
+    <sl-button @click="addDiscountAction()" :loading="state.loading">{{ $t('shop.add_discount') }}</sl-button>
+  </sl-button-group>
 </template>
 
 <script setup>
@@ -81,11 +82,15 @@ function removeDiscountAction(){
 
 </script>
 <style scoped>
-.discount-view{
+.viur-shop-discount-view{
   font-size:0.8em;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-</style>
+.viur-shop-discount-input {
+  flex-basis: 100%;
+}
+
+</style>

package/src/components/PaymentProviderUnzer.vue

@@ -198,4 +198,11 @@ onBeforeMount(()=>{
 .loading{
   font-size:3rem;
 }
-</style>
+</style>
+
+<style>
+/* global style to overwrite UnzerCSS */
+.unzerUI.primary.button, .unzerUI.primary.buttons .button {
+  background-color: var(--ignt-color-primary) !important;
+}
+</style>

package/src/components/StepperTab.vue

@@ -19,7 +19,7 @@
         <template v-if="tab && shopStore.state.tabs[tab]">
           {{ shopStore.state.tabIndexMap[tab] + 1 }}.
           <span class="viur-shop-order-status-span">
-            {{ shopStore.state.tabs[tab]?.displayName }}
+            {{ $t(shopStore.state.tabs[tab]?.displayName) }}
           </span>
         </template>
         <template v-else>

package/src/composables/address.js

@@ -43,46 +43,46 @@ export const useAddress = defineStore("useAddressStore", () => {
 
     })
 
-    function saveForm(type,shippingIsBilling=false){
+    function saveForm(type,billingIsShipping=false){
       state[`${type}IsUpdating`] = true
       return state[`${type}Form`].sendData().then(async (resp)=>{
         let data = await resp.json()
+        
         if (['addSuccess','editSuccess'].includes(data['action'])){
           state[`${type}Data`] = data['values']
-          await updateAddresses(type, shippingIsBilling)
+          await updateAddresses(type, billingIsShipping)
         }
         state[`${type}IsUpdating`] = undefined
         return data
       })
     }
 
-    function saveAddresses(shippingIsBilling=false){
-        if (shippingIsBilling) {
-            return saveForm('shipping',shippingIsBilling)
+    function saveAddresses(billingIsShipping=false){
+        if (billingIsShipping) {
+            return saveForm('billing',billingIsShipping)
         }else{
             return new Promise((resolve, reject) => {
                 saveForm('shipping').then(()=>{
                     saveForm('billing').then(()=>{
-                        resolve({'actions':'editSuccess'})
+                        resolve({'action':'editSuccess'})
                     }).catch((e)=>reject(e))
                 }).catch((e)=>reject(e))
             })
         }
     }
 
-    async function updateAddresses(type, shippingIsBilling=false) {
+    async function updateAddresses(type, billingIsShipping=false) {
         let key = state[`${type}Data`]['key']
-
         if (type === 'shipping'){
             const {updateCart} = useCart()
             updateCart({shipping_address_key:key})
-            if(shippingIsBilling){
-                const {addOrUpdateOrder} = useOrder()
-                await addOrUpdateOrder({billing_address_key:key})
-            }
         }else if (type === 'billing'){
             const {addOrUpdateOrder} = useOrder()
             await addOrUpdateOrder({billing_address_key:key})
+            if(billingIsShipping){
+                const {updateCart} = useCart()
+                updateCart({shipping_address_key:key})
+            }
         }
     }
 

package/src/composables/order.js

@@ -13,7 +13,7 @@ export function useOrder() {
     function updateOrderState(key,data){
         shopStore.state.order = data
         shopStore.state.orderKey = key
-        
+
         const params = useUrlSearchParams('hash')
         params['order'] = shopStore.state.orderKey
 
@@ -38,7 +38,6 @@ export function useOrder() {
     function addOrUpdateOrder({
         payment_provider,
         billing_address_key,
-        email,
         customer_key,
         state_ordered,
         state_paid,
@@ -49,7 +48,6 @@ export function useOrder() {
         let data = {
             payment_provider:payment_provider?payment_provider:shopStore.state.order?.['payment_provider'],
             billing_address_key:billing_address_key?billing_address_key:shopStore.state.order?.['billing_address_key']?.['dest']?.['key'],
-            email:email?email:shopStore.state.order?.['email'],
             customer_key:customer_key?customer_key:shopStore.state.order?.['customer_key']?.['dest']?.['key'],
             state_ordered:state_ordered?state_ordered:shopStore.state.order?.['state_ordered'],
             state_paid:state_paid?state_paid:shopStore.state.order?.['state_paid'],
@@ -58,7 +56,7 @@ export function useOrder() {
         if (shopStore.state.orderKey){
             url = shopStore.state.shopApiUrl+"/order_update"
             data["order_key"] = shopStore.state.orderKey
-            
+
         }else{
             data["cart_key"] = shopStore.state.cartRoot['key']
         }
@@ -77,4 +75,4 @@ export function useOrder() {
         fetchOrder,
         addOrUpdateOrder
     }
-}
+}

package/src/main.js

@@ -5,6 +5,7 @@ import { getTranslations } from "./utils";
 import { de_translations, en_translations } from "@viur/vue-utils";
 import en from "./translations/en"
 import de from "./translations/de"
+import fr from "./translations/fr"
 
 export { default as ViurShop } from "./Shop.vue";
 
@@ -22,6 +23,8 @@ const ViurShopComponents = {
     for(const loc of locale){
       if (loc === 'de'){
         messages[loc] = { ...de_translations, ...de, ...data[loc]}
+      }else if (loc === 'fr'){
+        messages[loc] = { ...fr, ...data[loc]}
       }else if (loc === 'en'){
         messages[loc] = {...en_translations, ...en, ...data[loc]}
       }else{
@@ -41,4 +44,4 @@ const ViurShopComponents = {
 };
 
 // Export the plugin as default
-export default ViurShopComponents;
+export default ViurShopComponents;

package/src/shop.js

@@ -24,7 +24,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         tabs:{
             cart: {
                 component: shallowRef(ShopCart),
-                displayName: "Warenkorb",
+                displayName: "shop.order_step_cart", //Warenkorb
                 icon: { name: "cart3" },
                 active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered']),  //active if no orderkey or checkout not startet
                 validating:false,
@@ -32,7 +32,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             userdata: {
                 component: shallowRef(ShopUserDataGuest),
-                displayName: "Daten Eingeben",
+                displayName: "shop.order_step_data", //Daten Eingeben
                 icon: { name: "card-list" },
                 active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered'] && state.cartList.length>0), //active if checkout not startet and cart is not empty
                 validating:false,
@@ -40,7 +40,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             shippingmethod: {
                 component: shallowRef(ShopShippingMethod),
-                displayName: "Versandart",
+                displayName: "shop.order_step_shipping", // Versandart
                 icon: { name: "truck" },
                 active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered'] && state.cartRoot?.['shipping_address']), // we need a shipping country
                 validating:false,
@@ -48,7 +48,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             paymentprovider: {
                 component: shallowRef(ShopPaymentProvider),
-                displayName: "Zahlungsart auswählen",
+                displayName: "shop.order_step_payment", //Zahlungsart auswählen
                 icon: { name: "credit-card" },
                 active:computed(()=>!state.order?.['is_checkout_in_progress'] && state.order && state.cartRoot?.['shipping']), // we need a active order
                 validating:false,
@@ -56,7 +56,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             confirm: {
                 component: shallowRef(ShopOrderConfirm),
-                displayName: "Bestellung prüfen",
+                displayName: "shop.order_step_verify", //Bestellung prüfen
                 icon: { name: "clipboard-check" },
                 active:computed(()=>!state.order?.['is_paid'] && state.canCheckout?.['status']), // active if canCheckout and not already paid
                 validating:false,
@@ -64,7 +64,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             complete: {
                 component: shallowRef(ShopOrderComplete),
-                displayName: "Bestellung Abgeschlossen",
+                displayName: "shop.order_step_complete", //Bestellung Abgeschlossen
                 icon: { name: "bag-check" },
                 active:computed(()=>state.order?.['is_ordered']), // active if ordered
                 validating:false,

package/src/translations/de.js

@@ -5,32 +5,60 @@ export default {
         delete: "Löschen"
     },
     shop:{
-        "check_order":"Bestellung prüfen",
+        "check_order":"Prüfen und absenden",
         "order_pay":"Zahlungspflichtig bestellen",
-        "order_number":"Ihre Bestellnummer",
+        "order_number":"Ihre Vorgangsnummer",
         "order_thanks":"Vielen Dank für Ihre Bestellung",
-        "order_message":"Wir haben Ihre Bestellung erhalten und werden diese schenllstmöglich bearbeiten.<br /> Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.",
+        "order_message":"Wir haben Ihre Bestellung erhalten und werden diese schnellstmöglich bearbeiten.<br /> Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.",
         "order_paid":"Ihre Zahlung ist bei uns eingegangen.",
         "order_ready_to_ship":"Ihre Bestellung ist fertig für den Versand.",
-        "cart_empty":"Der Warenkorb ist leer.",
+        "cart_empty":"Es befinden sich noch keine Artikel im Warenkorb.",
         "order_summary":"Bestellzusammenfassung",
         "deliverytime":"Lieferzeit",
         "day": "Tag | Tage",
+        "availability": "Verfügbarkeit",
+        "quantity": "Anzahl",
         "unit_price":"Stückpreis",
         "total_price":"Gesamtpreis",
-        "articlenumber":"Artikelnummer",
+        "article_number":"Artikelnummer",
         "pay":"Bezahlen",
-        "add_discount":"Rabattcode hinzufügen",
-        "use_shipping_as_billing_address": "Verwende Lieferadresse als Rechnungsadresse",
+        "add_discount":"Hinzufügen",
+        "add_discount_placeholder":"Dein Rabattcode",
+        "use_shipping_as_billing_address": "Rechnungsadresse zur Lieferungadresse",
         "no_valid_shipping_found":"Keine passenden Versandarten gefunden.",
         "error_message":"Eine Fehler ist aufgetreten.",
-        "free_shipping":"Kostenlos"
+        "free_shipping":"Versandkostenfrei",
+        "proceed-checkout":"Zur Kasse gehen",
+        "summary_headline":"Zusammenfassung",
+        "summary_subtotal":"Zwischensumme",
+        "summary_shipping_total":"Versand- und Bearbeitungspauschale",
+        "summary_delivery_time":"Lieferzeit",
+        "summary_discount":"Sie sparen bei Ihrem Einkauf im Aktionszeitraum",
+        "summary_checkout":"Zur Kasse gehen",
+        "summary_total":"Gesamtbetrag",
+        "summary_vat":"inkl. {percentage} MwSt.",
+      	"discount_not_found": "Dieser Rabattcode existiert nicht.",
+        "discount_not_active": "Dieser Rabattcode ist nicht aktiv.",
+        "discount_not_available": "Dieser Rabattcode ist für dieses Land nicht verfügbar.",
+        "discount_already_used": "Dieser Rabattcode wurde bereits benutzt.",
+        "discount_invalid_period": "Der Rabattzeitraum hat noch nicht begonnen oder ist bereits vorbei.",
+        "discount_minimum_not_reached": "Der Mindestbestellwert von {{minimum_order_value}} € wurde nicht erreicht.",
+        "discount_no_sale_article": "Der Rabattcode ist nicht auf bereits rabattierte Artikel anwendbar.",
+        "discount_scope_not_satisfied": "Der Rabattcode ist für diesen Warenkorb / diese Artikel nicht anwendbar.",
+        "order_step_cart":"Warenkorb",
+        "order_step_data":"Daten",
+        "order_step_shipping":"Versandart",
+        "order_step_payment":"Zahlungsart",
+        "order_step_verify":"Bestellung prüfen",
+        "order_step_complete":"Bestellung Abgeschlossen"
+
+
     },
     messages:{
         loading:"Daten werden abgefragt...",
         updating:"Daten werden aktualisiert...",
-        wait_for_payment:"warte auf Zahlung...",
+        wait_for_payment:"Warte auf Zahlung...",
         remove_article_from_cart:"Wollen sie den Artikel wirklich entfernen?",
-        order_check_later:"Sie können Ihre Bestellung am Ende noch einmal überprüfen."
+        order_check_later:"Sie können Ihre Bestellung am Ende noch einmal überprüfen.",
     }
-}
+}

package/src/translations/fr.js

@@ -0,0 +1,56 @@
+export default {
+    actions:{
+        add: "Hinzufügen",
+        cancel: "Abbrechen",
+        delete: "Löschen"
+    },
+    shop:{
+        "check_order":"Vérifier et envoyer",
+        "order_pay":"Valider",
+        "order_number":"N° de commande",
+        "order_thanks":"Merci pour votre commande et l’intérêt porté à notre société.",
+        "order_message":"Wir haben Ihre Bestellung erhalten und werden diese schnellstmöglich bearbeiten.<br /> Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.",
+        "order_paid":"Ihre Zahlung ist bei uns eingegangen.",
+        "order_ready_to_ship":"Ihre Bestellung ist fertig für den Versand.",
+        "cart_empty":"Votre panier est vide.",
+        "order_summary":"Envoyer la commande",
+        "deliverytime":"Délai de livraison",
+        "day": "jour | jours",
+        "availability": "Disponibilité",
+        "quantity": "Quantité",
+        "unit_price":"Prix par pièce",
+        "total_price":"Montant total",
+        "article_number":"Numéro d'article",
+        "pay":"Payer",
+        "add_discount":"Valider",
+        "add_discount_placeholder":"Votre code promo",
+        "use_shipping_as_billing_address": "Lieferung zur Rechnungsadresse",
+        "no_valid_shipping_found":"Keine passenden Versandarten gefunden.",
+        "error_message":"Eine Fehler ist aufgetreten.",
+        "free_shipping":"Livraison gratuite",
+        "proceed-checkout":"Acheter cet article",
+        "summary_headline":"Résumé",
+        "summary_subtotal":"Sous-total",
+        "summary_shipping_total":"Emballage et envoi",
+        "summary_delivery_time":"",
+        "summary_discount":"",
+        "summary_checkout":"",
+        "summary_total":"Montant total",
+        "summary_vat":"TVA incluse",
+        "discount_not_found": "Ce code promo n’existe pas.",
+        "discount_not_active": "Ce code promo n’est pas actif.",
+        "discount_not_available": "Ce code promo n’est pas valable pour ce pays.",
+        "discount_already_used": "Ce code promo a déjà été utilisé.",
+        "discount_invalid_period": "La période de ce code promo n’a encore débuté ou est déjà expirée.",
+        "discount_minimum_not_reached": "Le montant minimum de commande de {{minimum_order_value}} € n’a pas été atteint.",
+        "discount_no_sale_article": "Bon d’achat non cumulable avec d’autres promotions en cours.",
+        "discount_scope_not_satisfied": "Le code promo n’est pas applicable pour ce panier / cet ou ces article(s).",
+    },
+    messages:{
+        loading:"Daten werden abgefragt...",
+        updating:"Daten werden aktualisiert...",
+        wait_for_payment:"Warte auf Zahlung...",
+        remove_article_from_cart:"Désirez-vous vraiment supprimer cet article du panier?",
+        order_check_later:"Vous pourrez revérifier vos données avant de valider votre commande."
+    }
+}