@designcrowd/library.brand-page 5.17.3 → 5.17.4

package/src/brand-page/components/shop/PaymentModal.vue

@@ -35,6 +35,7 @@
             :stripe-publishable-key="context.stripePublishableKey!"
             :product-name="productName"
             :is-shop="true"
+            :is-shipping-enabled="props.isShippingEnabled"
             @go-to-payment-option-selection="onGoToCartSelection"
             @success="onRequestPaymentStripeSuccess"
           />
@@ -114,7 +115,7 @@
 <script setup lang="ts">
 import { Modal, Button, Loader } from '@designcrowd/fe-shared-lib';
 import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
-import { computed, reactive, onMounted } from 'vue';
+import { computed, reactive, ref, onMounted } from 'vue';
 import IconStripe from '../icon/IconStripe.vue';
 import RequestPaymentStripe from '../payment/RequestPaymentStripe.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
@@ -127,6 +128,7 @@ import type {
   BrandPagePaymentConfig,
   TextStyleDeclaration,
   StripePaymentIntent,
+  StripeShippingDetails,
 } from '@brand-page/models';
 import { paymentProviders } from '@brand-page/constants';
 import raygunUtil from '@brand-page/utils/raygun.util';
@@ -150,10 +152,12 @@ interface Props {
   shopPaymentConfig: BrandPagePaymentConfig;
   descriptionStyle: TextStyleDeclaration | undefined;
   successMessage: string;
+  isShippingEnabled: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isVisible: true,
+  isShippingEnabled: false,
 });
 
 const uniformDescriptionStyle = computed<TextStyleDeclaration>(() => ({
@@ -169,6 +173,8 @@ const data = reactive({
   state: 'creating-cart' as State,
 });
 
+const customerEmail = ref('');
+
 const emit = defineEmits(['on-close', 'on-back']);
 
 const onClose = () => {

package/src/brand-page/components/shop/PaymentShippingAddress.vue

@@ -0,0 +1,297 @@
+<template>
+  <div data-component="payment-shipping-address" class="tw-text-black">
+    <!-- Shipping Address Section -->
+    <p class="tw-font-bold tw-mb-2">
+      {{ paymentShippingAddressTr('shippingAddress') }}
+    </p>
+
+    <!-- Full Name -->
+    <TextInput
+      v-model="shippingData.name"
+      class="tw-mb-1"
+      :placeholder="paymentShippingAddressTr('fullNamePlaceholder')"
+      :error="Boolean(errors.name)"
+      @blur="validateField('name')"
+      @input="onFieldInput('name')"
+    />
+    <p v-if="errors.name" class="form-error tw-mb-2">
+      {{ errors.name }}
+    </p>
+
+    <!-- Address Line 1 -->
+    <TextInput
+      v-model="shippingData.line1"
+      class="tw-mb-1 tw-mt-3"
+      :placeholder="paymentShippingAddressTr('addressLine1Placeholder')"
+      :error="Boolean(errors.line1)"
+      @blur="validateField('line1')"
+      @input="onFieldInput('line1')"
+    />
+    <p v-if="errors.line1" class="form-error tw-mb-2">
+      {{ errors.line1 }}
+    </p>
+
+    <!-- Address Line 2 (optional) -->
+    <TextInput
+      v-model="shippingData.line2"
+      class="tw-mb-1 tw-mt-3"
+      :placeholder="paymentShippingAddressTr('addressLine2Placeholder')"
+      :error="Boolean(errors.line2)"
+      @blur="validateField('line2')"
+      @input="onFieldInput('line2')"
+    />
+    <p v-if="errors.line2" class="form-error tw-mb-2">
+      {{ errors.line2 }}
+    </p>
+
+    <!-- Country and City Row -->
+    <div class="tw-flex tw-flex-row tw-gap-2 tw-mt-3">
+      <div class="tw-flex-1">
+        <Dropdown
+          v-model:show="showCountryMenu"
+          :title="selectedCountryLabel"
+          :element-classes="countryDropdownClasses"
+          menu-element-classes="tw-overflow-y-auto tw-max-h-72 tw-w-full"
+          @update:show="onCountryMenuToggle"
+          @blur="validateField('country')"
+        >
+          <DropdownItem
+            v-for="country in countries"
+            :key="country.code"
+            class="tw-text-black tw-break-all"
+            @click="onSelectCountry(country.code)"
+          >
+            {{ country.name }}
+          </DropdownItem>
+        </Dropdown>
+        <p v-if="errors.country" class="form-error tw-mt-1">
+          {{ errors.country }}
+        </p>
+      </div>
+      <div class="tw-flex-1">
+        <TextInput
+          v-model="shippingData.city"
+          :placeholder="paymentShippingAddressTr('cityPlaceholder')"
+          :error="Boolean(errors.city)"
+          @blur="validateField('city')"
+          @input="onFieldInput('city')"
+        />
+        <p v-if="errors.city" class="form-error tw-mt-1">
+          {{ errors.city }}
+        </p>
+      </div>
+    </div>
+
+    <!-- State and Postal Code Row -->
+    <div class="tw-flex tw-flex-row tw-gap-2 tw-mt-3">
+      <div class="tw-flex-1">
+        <TextInput
+          v-model="shippingData.state"
+          :placeholder="paymentShippingAddressTr('statePlaceholder')"
+          :error="Boolean(errors.state)"
+          @blur="validateField('state')"
+          @input="onFieldInput('state')"
+        />
+        <p v-if="errors.state" class="form-error tw-mt-1">
+          {{ errors.state }}
+        </p>
+      </div>
+      <div class="tw-flex-1">
+        <TextInput
+          v-model="shippingData.postalCode"
+          :placeholder="paymentShippingAddressTr('postalCodePlaceholder')"
+          :error="Boolean(errors.postalCode)"
+          @blur="validateField('postalCode')"
+          @input="onFieldInput('postalCode')"
+        />
+        <p v-if="errors.postalCode" class="form-error tw-mt-1">
+          {{ errors.postalCode }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, watch, ref } from 'vue';
+import { TextInput, Dropdown, DropdownItem } from '@designcrowd/fe-shared-lib';
+import {
+  paymentShippingAddressTr,
+  countriesTr,
+} from '../../../composables/useTranslate';
+import {
+  STRIPE_ADDRESS_LIMITS,
+  type StripeAddressField,
+  type StripeShippingDetails,
+} from '../../models';
+
+interface Props {
+  modelValue: StripeShippingDetails;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: StripeShippingDetails): void;
+  (e: 'validation-change', isValid: boolean): void;
+}>();
+
+type ValidatableField = StripeAddressField;
+
+type Country = { code: string; name: string };
+
+type FormErrors = Record<ValidatableField, string>;
+
+const shippingData = reactive({
+  name: props.modelValue.name || '',
+  line1: props.modelValue.line1 || '',
+  line2: props.modelValue.line2 || '',
+  city: props.modelValue.city || '',
+  state: props.modelValue.state || '',
+  postalCode: props.modelValue.postalCode || '',
+  country: props.modelValue.country || '',
+});
+
+const errors = reactive<FormErrors>({
+  name: '',
+  line1: '',
+  line2: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  country: '',
+});
+
+const countries = computed<Country[]>(() => countriesTr());
+const showCountryMenu = ref(false);
+
+const selectedCountryLabel = computed((): string => {
+  if (!shippingData.country) {
+    return paymentShippingAddressTr('countryPlaceholder');
+  }
+
+  const match = countries.value.find(
+    (country) => country.code === shippingData.country,
+  );
+
+  return match?.name ?? paymentShippingAddressTr('countryPlaceholder');
+});
+
+const countryDropdownClasses = computed((): string => {
+  return [
+    'tw-h-[2.6rem]',
+    'tw-w-full',
+    'tw-text-base',
+    'tw-bg-white',
+    'tw-rounded',
+    'tw-border',
+    'tw-border-solid',
+    errors.country ? 'tw-border-error-500' : 'tw-border-grayscale-300',
+    shippingData.country ? 'tw-text-grayscale-800' : 'tw-text-grayscale-500',
+  ].join(' ');
+});
+
+function validateAddressField(field: StripeAddressField): boolean {
+  const value = shippingData[field].trim();
+  const { min, max } = STRIPE_ADDRESS_LIMITS[field];
+
+  if (min > 0 && !value) {
+    errors[field] = paymentShippingAddressTr('fieldRequired');
+
+    return false;
+  }
+
+  if (value.length > max) {
+    errors[field] = paymentShippingAddressTr('fieldMaxLength', { max });
+
+    return false;
+  }
+
+  errors[field] = '';
+
+  return true;
+}
+
+function validateField(field: ValidatableField): boolean {
+  return validateAddressField(field);
+}
+
+function onFieldInput(field: ValidatableField): void {
+  if (errors[field]) {
+    validateField(field);
+  }
+  emitUpdate();
+}
+
+function onCountryMenuToggle(isOpen: boolean): void {
+  showCountryMenu.value = isOpen;
+  if (!isOpen) {
+    validateField('country');
+  }
+}
+
+function onSelectCountry(countryCode: string): void {
+  shippingData.country = countryCode;
+  showCountryMenu.value = false;
+  onFieldInput('country');
+}
+
+function validateAll(): boolean {
+  const addressFields: StripeAddressField[] = [
+    'name',
+    'line1',
+    'line2',
+    'city',
+    'state',
+    'postalCode',
+    'country',
+  ];
+
+  const results = addressFields.map((field) => validateAddressField(field));
+
+  return results.every(Boolean);
+}
+
+function emitUpdate(): void {
+  const shippingDetails: StripeShippingDetails = {
+    name: shippingData.name,
+    line1: shippingData.line1,
+    line2: shippingData.line2 || undefined,
+    city: shippingData.city || undefined,
+    state: shippingData.state || undefined,
+    postalCode: shippingData.postalCode || undefined,
+    country: shippingData.country,
+  };
+
+  emit('update:modelValue', shippingDetails);
+}
+
+// Watch for changes and emit updates
+watch(
+  shippingData,
+  () => {
+    emitUpdate();
+    const isValid = Object.values(errors).every((error) => !error);
+    emit('validation-change', isValid);
+  },
+  { deep: true },
+);
+
+// Expose validation method for parent component
+defineExpose({
+  validateAll,
+});
+</script>
+
+<style scoped>
+.form-error {
+  @apply tw-text-xs;
+  color: #f21b3f;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+}
+</style>

package/src/brand-page/components/shop/Shop.vue

@@ -111,6 +111,7 @@
       :shop-payment-config="shopPaymentConfig"
       :context="context"
       :success-message="viewModel.successMessage"
+      :is-shipping-enabled="viewModel.isShippingEnabled"
       @on-close="onCloseCart"
       @on-back="onShowCartModal"
     />

package/src/brand-page/components/shop/i18n/countries.de-DE.json

@@ -0,0 +1,240 @@
+{
+  "countries": [
+    {"code":"AF","name":"Afghanistan"},
+    {"code":"AX","name":"Åland-Inseln"},
+    {"code":"AL","name":"Albanien"},
+    {"code":"DZ","name":"Algerien"},
+    {"code":"AD","name":"Andorra"},
+    {"code":"AO","name":"Angola"},
+    {"code":"KI","name":"Anguilla"},
+    {"code":"AQ","name":"Antarktis"},
+    {"code":"AG","name":"Antigua und Barbuda"},
+    {"code":"AR","name":"Argentinien"},
+    {"code":"AM","name":"Armenien"},
+    {"code":"AW","name":"Aruba"},
+    {"code":"AC","name":"Ascension"},
+    {"code":"AU","name":"Australien"},
+    {"code":"AT","name":"Österreich"},
+    {"code":"AZ","name":"Aserbaidschan"},
+    {"code":"BS","name":"Bahamas"},
+    {"code":"BH","name":"Bahrain"},
+    {"code":"BD","name":"Bangladesh"},
+    {"code":"BB","name":"Barbados"},
+    {"code":"BY","name":"Belarus"},
+    {"code":"BE","name":"Belgien"},
+    {"code":"BZ","name":"Belize"},
+    {"code":"BJ","name":"Benin"},
+    {"code":"BM","name":"Bermuda"},
+    {"code":"BT","name":"Bhutan"},
+    {"code":"BO","name":"Bolivien"},
+    {"code":"BQ","name":"Bonaire, Sint Eustatius und Saba"},
+    {"code":"BA","name":"Bosnien und Herzegowina"},
+    {"code":"BW","name":"Botswana"},
+    {"code":"BV","name":"Bouvetinsel"},
+    {"code":"BR","name":"Brasilien"},
+    {"code":"IO","name":"Britisches Territorium im Indischen Ozean"},
+    {"code":"VG","name":"Britische Jungferninseln"},
+    {"code":"BN","name":"Brunei"},
+    {"code":"BG","name":"Bulgarien"},
+    {"code":"BF","name":"Burkina Faso"},
+    {"code":"BI","name":"Burundi"},
+    {"code":"KH","name":"Kambodscha"},
+    {"code":"CM","name":"Kamerun"},
+    {"code":"CA","name":"Kanada"},
+    {"code":"CV","name":"Kap Verde"},
+    {"code":"KY","name":"Kaimaninseln"},
+    {"code":"CF","name":"Zentralafrikanische Republik"},
+    {"code":"TD","name":"Tschad"},
+    {"code":"CL","name":"Chile"},
+    {"code":"CN","name":"China"},
+    {"code":"CO","name":"Kolumbien"},
+    {"code":"KM","name":"Komoren"},
+    {"code":"CK","name":"Cookinseln"},
+    {"code":"CR","name":"Costa Rica"},
+    {"code":"CI","name":"Elfenbeinküste"},
+    {"code":"HR","name":"Kroatien"},
+    {"code":"CW","name":"Curaçao"},
+    {"code":"CY","name":"Zypern"},
+    {"code":"CZ","name":"Tschechien"},
+    {"code":"CD","name":"Demokratische Republik Kongo"},
+    {"code":"DK","name":"Dänemark"},
+    {"code":"DJ","name":"Dschibuti"},
+    {"code":"DM","name":"Dominica"},
+    {"code":"TUN","name":"Dominikanische Republik"},
+    {"code":"EC","name":"Ecuador"},
+    {"code":"EG","name":"Ägypten"},
+    {"code":"SV","name":"El Salvador"},
+    {"code":"GQ","name":"Äquatorialguinea"},
+    {"code":"ER","name":"Eritrea"},
+    {"code":"EE","name":"Estland"},
+    {"code":"SZ","name":"Eswatini"},
+    {"code":"ET","name":"Äthiopien"},
+    {"code":"FK","name":"Falklandinseln"},
+    {"code":"FO","name":"Färöer-Inseln"},
+    {"code":"FJ","name":"Fiji"},
+    {"code":"FI","name":"Finnland"},
+    {"code":"FR","name":"Frankreich"},
+    {"code":"GF","name":"Französisch-Guayana"},
+    {"code":"PF","name":"Französisch-Polynesien"},
+    {"code":"TF","name":"Französische Süd- und Antarktisgebiete"},
+    {"code":"GA","name":"Gabon"},
+    {"code":"GM","name":"Gambia"},
+    {"code":"GE","name":"Georgien"},
+    {"code":"DE","name":"Deutschland"},
+    {"code":"GH","name":"Ghana"},
+    {"code":"GI","name":"Gibraltar"},
+    {"code":"GR","name":"Griechenland"},
+    {"code":"GL","name":"Grönland"},
+    {"code":"GD","name":"Grenada"},
+    {"code":"GP","name":"Guadeloupe"},
+    {"code":"GU","name":"Guam"},
+    {"code":"GT","name":"Guatemala"},
+    {"code":"GG","name":"Guernsey"},
+    {"code":"GN","name":"Guinea"},
+    {"code":"GW","name":"Guinea-Bissau"},
+    {"code":"GY","name":"Guyana"},
+    {"code":"HT","name":"Haiti"},
+    {"code":"HN","name":"Honduras"},
+    {"code":"HK","name":"Hongkong"},
+    {"code":"HU","name":"Ungarn"},
+    {"code":"IS","name":"Island"},
+    {"code":"IN","name":"Indien"},
+    {"code":"Id","name":"Indonesien"},
+    {"code":"IQ","name":"Irak"},
+    {"code":"IE","name":"Irland"},
+    {"code":"IM","name":"Isle of Man"},
+    {"code":"IL","name":"Israel"},
+    {"code":"IT","name":"Italien"},
+    {"code":"JM","name":"Jamaika"},
+    {"code":"JP","name":"Japan"},
+    {"code":"JE","name":"Jersey"},
+    {"code":"JO","name":"Jordanien"},
+    {"code":"KZ","name":"Kasachstan"},
+    {"code":"KE","name":"Kenya"},
+    {"code":"KI","name":"Kiribati"},
+    {"code":"XK","name":"Kosovo"},
+    {"code":"KW","name":"Kuwait"},
+    {"code":"KG","name":"Kirgisistan"},
+    {"code":"LA","name":"Laos"},
+    {"code":"LV","name":"Lettland"},
+    {"code":"LB","name":"Libanon"},
+    {"code":"LS","name":"Lesotho"},
+    {"code":"LR","name":"Liberia"},
+    {"code":"LY","name":"Libyen"},
+    {"code":"LI","name":"Liechtenstein"},
+    {"code":"LT","name":"Litauen"},
+    {"code":"LU","name":"Luxemburg"},
+    {"code":"MO","name":"Macau"},
+    {"code":"MG","name":"Madagaskar"},
+    {"code":"MW","name":"Malawi"},
+    {"code":"MY","name":"Malaysia"},
+    {"code":"MV","name":"Malediven"},
+    {"code":"ML","name":"Mali"},
+    {"code":"MT","name":"Malta"},
+    {"code":"MQ","name":"Martinique"},
+    {"code":"MR","name":"Mauretanien"},
+    {"code":"MU","name":"Mauritius"},
+    {"code":"YT","name":"Mayotte"},
+    {"code":"MX","name":"Mexiko"},
+    {"code":"MD","name":"Republik Moldau"},
+    {"code":"MC","name":"Monaco"},
+    {"code":"MN","name":"Mongolei"},
+    {"code":"mich","name":"Montenegro"},
+    {"code":"MS","name":"Montserrat"},
+    {"code":"MA","name":"Marokko"},
+    {"code":"MZ","name":"Mosambik"},
+    {"code":"MM","name":"Myanmar"},
+    {"code":"NA","name":"Namibia"},
+    {"code":"NR","name":"Nauru"},
+    {"code":"NP","name":"Nepal"},
+    {"code":"NL","name":"Niederlande"},
+    {"code":"NC","name":"Neukaledonien"},
+    {"code":"NZ","name":"Neuseeland"},
+    {"code":"NI","name":"Nicaragua"},
+    {"code":"NE","name":"Niger"},
+    {"code":"NG","name":"Nigeria"},
+    {"code":"NU","name":"Niue"},
+    {"code":"MK","name":"Nordmazedonien"},
+    {"code":"Nein","name":"Norwegen"},
+    {"code":"OM","name":"Oman"},
+    {"code":"PK","name":"Pakistan"},
+    {"code":"PS","name":"Palästina"},
+    {"code":"PA","name":"Panama"},
+    {"code":"PG","name":"Papua-Neuguinea"},
+    {"code":"PY","name":"Paraguay"},
+    {"code":"PE","name":"Peru"},
+    {"code":"PH","name":"Philippinen"},
+    {"code":"PN","name":"Pitcairn-Inseln"},
+    {"code":"PL","name":"Polen"},
+    {"code":"PT","name":"Portugal"},
+    {"code":"PR","name":"Puerto Rico"},
+    {"code":"QA","name":"Qatar"},
+    {"code":"CG","name":"Republik Kongo"},
+    {"code":"RE","name":"Réunion"},
+    {"code":"RO","name":"Rumänien"},
+    {"code":"RU","name":"Russland"},
+    {"code":"RW","name":"Rwanda"},
+    {"code":"BL","name":"Saint-Barthélemy"},
+    {"code":"SH","name":"St. Helena"},
+    {"code":"KN","name":"Saint Kitts und Nevis"},
+    {"code":"LC","name":"Saint Lucia"},
+    {"code":"MF","name":"Saint Martin"},
+    {"code":"PM","name":"Saint-Pierre und Miquelon"},
+    {"code":"VC","name":"St. Vincent und die Grenadinen"},
+    {"code":"WS","name":"Samoa"},
+    {"code":"SM","name":"San Marino"},
+    {"code":"ST","name":"Sao Tome und Principe"},
+    {"code":"SA","name":"Saudi-Arabien"},
+    {"code":"SN","name":"Senegal"},
+    {"code":"RS","name":"Serbien"},
+    {"code":"SC","name":"Seychellen"},
+    {"code":"SL","name":"Sierra Leone"},
+    {"code":"SG","name":"Singapur"},
+    {"code":"SX","name":"Sint Maarten"},
+    {"code":"SK","name":"Slowakei"},
+    {"code":"SI","name":"Slowenien"},
+    {"code":"SB","name":"Salomonen"},
+    {"code":"SO","name":"Somalia"},
+    {"code":"ZA","name":"Südafrika"},
+    {"code":"GS","name":"Südgeorgien und die Südlichen Sandwichinseln"},
+    {"code":"KR","name":"Südkorea"},
+    {"code":"SS","name":"Südsudan"},
+    {"code":"ge","name":"Spanien"},
+    {"code":"LK","name":"Sri Lanka"},
+    {"code":"SR","name":"Suriname"},
+    {"code":"SJ","name":"Svalbard und Jan Mayen"},
+    {"code":"SE","name":"Schweden"},
+    {"code":"CH","name":"Schweiz"},
+    {"code":"TW","name":"Taiwan"},
+    {"code":"TJ","name":"Tadschikistan"},
+    {"code":"TZ","name":"Tansania"},
+    {"code":"TH","name":"Thailand"},
+    {"code":"TL","name":"Timor-Leste"},
+    {"code":"TG","name":"Togo"},
+    {"code":"TK","name":"Tokelau"},
+    {"code":"DABEI","name":"Tonga"},
+    {"code":"TT","name":"Trinidad und Tobago"},
+    {"code":"TA","name":"Tristan da Cunha"},
+    {"code":"TN","name":"Tunesien"},
+    {"code":"TR","name":"Türkei"},
+    {"code":"TM","name":"Turkmenistan"},
+    {"code":"TC","name":"Turks- und Caicosinseln"},
+    {"code":"TV","name":"Tuvalu"},
+    {"code":"UG","name":"Uganda"},
+    {"code":"UA","name":"Ukraine"},
+    {"code":"AE","name":"Vereinigte Arabische Emirate"},
+    {"code":"GB","name":"Vereinigtes Königreich"},
+    {"code":"USA","name":"Vereinigte Staaten"},
+    {"code":"UY","name":"Uruguay"},
+    {"code":"UZ","name":"Usbekistan"},
+    {"code":"VU","name":"Vanuatu"},
+    {"code":"VA","name":"Vatikanstadt"},
+    {"code":"VE","name":"Venezuela"},
+    {"code":"VN","name":"Vietnam"},
+    {"code":"WF","name":"Wallis und Futuna"},
+    {"code":"EH","name":"Westsahara"},
+    {"code":"YE","name":"Jemen"},
+    {"code":"ZM","name":"Sambia"},
+    {"code":"ZW","name":"Zimbabwe"}
+  ]
+}