@mframework/layer-commerce 0.0.7 → 0.0.8

package/app/components/shop/checkout/StripeCardElement.vue

@@ -0,0 +1,206 @@
+<template>
+  <v-form @submit.prevent="handlePayment" aria-label="Stripe payment form" ref="formRef">
+    <div ref="cardElement" class="StripeElement" aria-label="Card input"></div>
+    <div v-if="cardError" class="stripe-error" role="alert">{{ cardError }}</div>
+    <v-row class="stripe-details">
+      <v-col cols="12" md="6">
+        <v-text-field v-model="billingDetails.name" label="Name on Card" required autocomplete="cc-name" outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="billingDetails.email" label="Email" type="email" required autocomplete="email" outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="billingDetails.phone" label="Phone" type="tel" autocomplete="tel" outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-select v-model="billingDetails.address.country" :items="countryOptions" label="Country" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="billingDetails.address.line1" label="Address" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="billingDetails.address.city" label="City" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="billingDetails.address.state" label="State" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="billingDetails.address.postal_code" label="Postal Code" required outlined />
+      </v-col>
+    </v-row>
+    <v-row class="stripe-details">
+      <v-col cols="12" md="6">
+        <v-text-field v-model="shippingDetails.name" label="Shipping Name" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-select v-model="shippingDetails.address.country" :items="countryOptions" label="Shipping Country" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="shippingDetails.address.line1" label="Shipping Address" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="shippingDetails.address.city" label="Shipping City" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="shippingDetails.address.state" label="Shipping State" required outlined />
+      </v-col>
+      <v-col cols="12" md="6">
+        <v-text-field v-model="shippingDetails.address.postal_code" label="Shipping Postal Code" required outlined />
+      </v-col>
+    </v-row>
+    <v-checkbox v-model="saveCard" label="Save card for future payments (secure)" class="mb-4" />
+    <v-btn type="submit" :disabled="loading || !cardReady" aria-busy="loading">
+      <span v-if="loading">Processing...</span>
+      <span v-else>Pay</span>
+    </v-btn>
+  </v-form>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { v-btn } from '@storefront-ui/vue';
+import { useUserStore } from '../../stores/user';
+import { useDirectusAuth } from '../../../../../composables/useDirectusAuth';
+import countryList from '../../utils/countryList'; // Assume this is an array of country codes/names
+
+const props = defineProps<{ clientSecret: string }>();
+const emit = defineEmits(['payment-success', 'payment-error']);
+
+const cardElement = ref<HTMLElement | null>(null);
+let card: any = null;
+let elements: any = null;
+const loading = ref(false);
+const cardError = ref('');
+const cardReady = ref(false);
+const saveCard = ref(false);
+const formRef = ref();
+
+const userStore = useUserStore();
+const directusAuth = useDirectusAuth();
+const directusUser = computed(() => directusAuth.user || {});
+
+// Prefer Directus user data if available, fallback to store
+const user = computed(() => Object.keys(directusUser.value).length ? directusUser.value : userStore.user || {});
+
+const countryOptions = countryList.map((c: any) => ({ text: c.name, value: c.code }));
+
+const billingDetails = ref({
+  name: user.value.name || '',
+  email: user.value.email || '',
+  phone: user.value.phone || '',
+  address: {
+    line1: user.value.address?.line1 || '',
+    city: user.value.address?.city || '',
+    state: user.value.address?.state || '',
+    postal_code: user.value.address?.postal_code || '',
+    country: user.value.address?.country || '',
+  },
+});
+const shippingDetails = ref({
+  name: user.value.shippingName || user.value.name || '',
+  address: {
+    line1: user.value.shippingAddress?.line1 || '',
+    city: user.value.shippingAddress?.city || '',
+    state: user.value.shippingAddress?.state || '',
+    postal_code: user.value.shippingAddress?.postal_code || '',
+    country: user.value.shippingAddress?.country || '',
+  },
+});
+
+function useNuxtApp() {
+  // Return a simple wrapper exposing a client-side Stripe instance if available
+  return {
+    $stripe: (typeof window !== 'undefined' && window.Stripe) ? window.Stripe : null
+  };
+}
+const { $stripe } = useNuxtApp();
+
+onMounted(() => {
+  if (!$stripe || !props.clientSecret) return;
+  elements = $stripe.elements({ clientSecret: props.clientSecret });
+  card = elements.create('card');
+  card.mount(cardElement.value);
+  card.on('change', (event: any) => {
+    cardError.value = event.error ? event.error.message : '';
+    cardReady.value = event.complete;
+  });
+});
+
+onUnmounted(() => {
+  if (card) card.destroy();
+});
+
+watch(() => props.clientSecret, (newSecret) => {
+  if (elements && newSecret) {
+    // Re-create card element if clientSecret changes
+    if (card) card.destroy();
+    card = elements.create('card');
+    card.mount(cardElement.value);
+    card.on('change', (event: any) => {
+      cardError.value = event.error ? event.error.message : '';
+      cardReady.value = event.complete;
+    });
+  }
+});
+
+const handlePayment = async () => {
+  cardError.value = '';
+  loading.value = true;
+  try {
+    if (!$stripe || !props.clientSecret) {
+      cardError.value = 'Stripe is not initialized.';
+      emit('payment-error', cardError.value);
+      return;
+    }
+    // Validate form before submitting
+    if (formRef.value && !(await formRef.value.validate?.())) {
+      loading.value = false;
+      return;
+    }
+    const { error, paymentIntent, setupIntent } = await $stripe.confirmCardPayment(props.clientSecret, {
+      payment_method: {
+        card: card,
+        billing_details: billingDetails.value,
+      },
+      shipping: shippingDetails.value,
+      setup_future_usage: saveCard.value ? 'off_session' : undefined, // Save card if checked
+      // 3D Secure is handled automatically by Stripe if required
+    });
+    if (error) {
+      cardError.value = error.message || 'Payment failed.';
+      emit('payment-error', cardError.value);
+      return;
+    }
+    if (paymentIntent && paymentIntent.status === 'succeeded') {
+      emit('payment-success', paymentIntent);
+    } else if (setupIntent && setupIntent.status === 'succeeded') {
+      emit('payment-success', setupIntent);
+    } else {
+      cardError.value = 'Payment was not successful.';
+      emit('payment-error', cardError.value);
+    }
+  } catch (e: any) {
+    cardError.value = e?.message || 'An unexpected error occurred.';
+    emit('payment-error', cardError.value);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.StripeElement {
+  border: 1px solid #ccc;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}
+.stripe-error {
+  color: #d32f2f;
+  margin-bottom: 1rem;
+  font-size: 0.95em;
+}
+.stripe-details {
+  margin-bottom: 1rem;
+}
+</style>

package/app/components/shop/checkout/StripeCheckout.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>Checkout</h1>
+    <v-btn @click="startCheckout" :disabled="loading || !clientSecret">
+      Pay with Stripe
+    </v-btn>
+    <StripeCardElement v-if="clientSecret" :clientSecret="clientSecret" @payment-success="onPaymentSuccess" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { v-btn } from '@storefront-ui/vue';
+import { useVendureQuery } from '@/app/composables/useVendureQuery';
+import { useVendureMutation } from '@/app/composables/useVendureMutation';
+import createStripePaymentIntentMutation from '#graphql/app/commerce/mutations/createStripePaymentIntent.gql';
+import getActiveOrderQuery from '#graphql/app/commerce/queries/getActiveOrder.gql';
+import StripeCardElement from './StripeCardElement.vue';
+
+const loading = ref(false);
+const clientSecret = ref<string | null>(null);
+
+// Get the active order (cart)
+const { data: orderData, refetch } = useVendureQuery(getActiveOrderQuery);
+
+const { mutate: createStripePaymentIntent } = useVendureMutation(createStripePaymentIntentMutation);
+
+const startCheckout = async () => {
+  if (!orderData.value?.activeOrder) return;
+  loading.value = true;
+  try {
+    // Create payment intent on the server via Vendure mutation
+    const response = await createStripePaymentIntent({
+      orderId: orderData.value.activeOrder.id,
+    });
+    clientSecret.value = response?.createStripePaymentIntent?.clientSecret;
+  } catch (err) {
+    // Handle error (show notification, etc.)
+    console.error(err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const onPaymentSuccess = () => {
+  // Optionally refetch order/cart, show success notification, etc.
+  refetch();
+};
+</script>

package/app/components/shop/checkout/addressBilling.vue

@@ -0,0 +1,263 @@
+<template>
+    <v-form class="pa-4" @submit.prevent="setBillingAddressHandler">
+      <!-- Loading Overlay -->
+      <v-overlay
+        :model-value="loading"
+        class="align-center justify-center"
+      >
+        <v-progress-circular
+          indeterminate
+          size="64"
+        ></v-progress-circular>
+      </v-overlay>
+  
+      <!-- Error Alert -->
+      <v-alert
+        v-if="error"
+        type="error"
+        closable
+        class="mb-4"
+        @click:close="error = null"
+      >
+        {{ error }}
+      </v-alert>
+  
+      <h2 class="text-h4 font-weight-bold mb-4">Billing Address</h2>
+      <v-row>
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="billingAddress.fullName"
+            :error-messages="errors.fullName"
+            label="Full Name"
+            name="fullName"
+            autocomplete="name"
+            required
+            variant="outlined"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="billingAddress.phoneNumber"
+            :error-messages="errors.phoneNumber"
+            label="Phone"
+            name="phone"
+            type="tel"
+            autocomplete="tel"
+            required
+            variant="outlined"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12">
+          <v-select
+            v-model="billingAddress.countryCode"
+            :error-messages="errors.countryCode"
+            label="Country"
+            name="country"
+            :items="countries"
+            item-title="name"
+            item-value="code"
+            autocomplete="country-name"
+            required
+            variant="outlined"
+            @update:model-value="updateRegions"
+          ></v-select>
+        </v-col>
+        <v-col cols="12" md="8">
+          <v-text-field
+            v-model="billingAddress.streetLine1"
+            :error-messages="errors.streetLine1"
+            label="Street Address 1"
+            name="streetLine1"
+            autocomplete="address-line1"
+            required
+            variant="outlined"
+            hint="Street address or P.O. Box"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="billingAddress.streetLine2"
+            label="Street Address 2"
+            name="streetLine2"
+            variant="outlined"
+            hint="Optional"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="billingAddress.city"
+            :error-messages="errors.city"
+            label="City"
+            name="city"
+            autocomplete="address-level2"
+            required
+            variant="outlined"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-select
+            v-model="billingAddress.province"
+            :error-messages="errors.province"
+            label="State/Province"
+            name="province"
+            :items="regions"
+            item-title="name"
+            item-value="code"
+            autocomplete="address-level1"
+            required
+            variant="outlined"
+          ></v-select>
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="billingAddress.postalCode"
+            :error-messages="errors.postalCode"
+            label="ZIP/Postal Code"
+            name="postalCode"
+            placeholder="eg. 12345"
+            autocomplete="postal-code"
+            required
+            variant="outlined"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12">
+          <v-checkbox
+            v-model="useAsShippingAddress"
+            label="Use as shipping address"
+            name="useAsShippingAddress"
+          ></v-checkbox>
+        </v-col>
+        <v-col cols="12" class="d-flex justify-end gap-4">
+          <v-btn
+            variant="outlined"
+            type="reset"
+            color="primary"
+            @click="handleReset"
+          >
+            Clear all
+          </v-btn>
+          <v-btn
+            color="primary"
+            type="submit"
+            :loading="loading"
+            :disabled="loading"
+          >
+            Save
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-form>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, reactive, onMounted, onErrorCaptured } from 'vue';
+  import { useVendureMutation } from '../../composables/useVendureMutation';
+  import setOrderBillingAddressMutation from '#graphql/app/commerce/mutations/setOrderBillingAddress.gql';
+  import getCountryListQuery from '#graphql/app/commerce/queries/getCountryList.gql';
+  import { useVendureQuery } from '../../composables/useVendureQuery';
+  import { useNotification } from '~//composables/useNotifications';
+  
+  const emit = defineEmits(['address-saved', 'address-error', 'form-reset']);
+  const { showNotification } = useNotification();
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const useAsShippingAddress = ref(false);
+
+  // Add a reactive errors object for field-level error messages
+  const errors = reactive({
+    fullName: '',
+    streetLine1: '',
+    streetLine2: '',
+    city: '',
+    province: '',
+    postalCode: '',
+    phoneNumber: '',
+    countryCode: '',
+  });
+  
+  const { data: countriesResult } = useVendureQuery(getCountryListQuery);
+  type Country = {
+    code: string;
+    name: string;
+    regions?: Array<{ code: string; name: string }>;
+  };
+  
+  const countries = ref<Country[]>([]);
+  const regions = ref<Array<{ code: string; name: string }>>([]);
+  
+  const billingAddress = reactive({
+    fullName: '',
+    streetLine1: '',
+    streetLine2: '',
+    city: '',
+    province: '',
+    postalCode: '',
+    phoneNumber: '',
+    countryCode: '',
+  });
+  
+  const { mutate: setBillingAddress } = useVendureMutation(setOrderBillingAddressMutation);
+  
+  const updateRegions = (countryCode: string) => {
+    const country = countries.value.find((c) => c.code === countryCode);
+    regions.value = country?.regions || [];
+  };
+  
+  const handleReset = () => {
+    Object.assign(billingAddress, {
+      fullName: '',
+      streetLine1: '',
+      streetLine2: '',
+      city: '',
+      province: '',
+      postalCode: '',
+      phoneNumber: '',
+      countryCode: '',
+    });
+    useAsShippingAddress.value = false;
+    emit('form-reset');
+  };
+  
+  const setBillingAddressHandler = async () => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const result = await setBillingAddress({
+        input: {
+          fullName: billingAddress.fullName,
+          streetLine1: billingAddress.streetLine1,
+          streetLine2: billingAddress.streetLine2,
+          city: billingAddress.city,
+          province: billingAddress.province,
+          postalCode: billingAddress.postalCode,
+          phoneNumber: billingAddress.phoneNumber,
+          countryCode: billingAddress.countryCode,
+        },
+      });
+      showNotification({ type: 'success', message: 'Billing address updated' });
+      emit('address-saved', result?.setOrderBillingAddress?.billingAddress);
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to update billing address';
+      showNotification({ type: 'error', message: error.value });
+      emit('address-error', err instanceof Error ? err : new Error(error.value));
+    } finally {
+      loading.value = false;
+    }
+  };
+  
+  onMounted(() => {
+    if (countriesResult.value) {
+      countries.value = countriesResult.value.countries;
+    }
+  });
+  onErrorCaptured((err) => {
+    error.value = err instanceof Error ? err.message : 'An unexpected error occurred';
+    return false;
+  });
+  </script>
+  
+  <style scoped>
+  .gap-4 {
+    gap: 1rem;
+  }
+  </style>

package/app/components/shop/checkout/addressShipping.vue

@@ -0,0 +1,175 @@
+<template>
+    <v-form class="pa-4" @submit.prevent="setShippingAddressHandler">
+        <!-- Loading Overlay -->
+        <v-overlay :model-value="loading" class="align-center justify-center">
+            <v-progress-circular indeterminate size="64"></v-progress-circular>
+        </v-overlay>
+
+        <!-- Error Alert -->
+        <v-alert v-if="error" type="error" closable class="mb-4" @click:close="error = null">
+            {{ error }}
+        </v-alert>
+
+        <h2 class="text-h4 font-weight-bold mb-4">Shipping Address</h2>
+        <v-row>
+            <v-col cols="12" md="6">
+                <v-text-field v-model="shippingAddress.fullName" :error-messages="errors.fullName" label="Full Name"
+                    name="fullName" autocomplete="name" required variant="outlined"></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+                <v-text-field v-model="shippingAddress.phoneNumber" :error-messages="errors.phoneNumber" label="Phone"
+                    name="phone" type="tel" autocomplete="tel" required variant="outlined"></v-text-field>
+            </v-col>
+            <v-col cols="12">
+                <v-select v-model="shippingAddress.countryCode" :error-messages="errors.countryCode" label="Country"
+                    name="country" :items="countries" item-title="name" item-value="code"
+                    autocomplete="country-name" required variant="outlined"
+                    @update:model-value="updateRegions"></v-select>
+            </v-col>
+            <v-col cols="12" md="8">
+                <v-text-field v-model="shippingAddress.streetLine1" :error-messages="errors.streetLine1" label="Street Line 1"
+                    name="streetLine1" autocomplete="address-line1" required variant="outlined"
+                    hint="Street address or P.O. Box"></v-text-field>
+            </v-col>
+            <v-col cols="12" md="4">
+                <v-text-field v-model="shippingAddress.streetLine2" label="Street Line 2" name="streetLine2"
+                    variant="outlined" hint="Optional"></v-text-field>
+            </v-col>
+            <v-col cols="12" md="4">
+                <v-text-field v-model="shippingAddress.city" :error-messages="errors.city" label="City" name="city"
+                    autocomplete="address-level2" required variant="outlined"></v-text-field>
+            </v-col>
+            <v-col cols="12" md="4">
+                <v-select v-model="shippingAddress.province" :error-messages="errors.province" label="State" name="state"
+                    :items="regions" item-title="name" item-value="code" autocomplete="address-level1" required
+                    variant="outlined"></v-select>
+            </v-col>
+            <v-col cols="12" md="4">
+                <v-text-field v-model="shippingAddress.postalCode" :error-messages="errors.postalCode" label="ZIP Code"
+                    name="zipCode" placeholder="eg. 12345" autocomplete="postal-code" required
+                    variant="outlined"></v-text-field>
+            </v-col>
+            <v-col cols="12">
+                <v-checkbox v-model="useAsShippingAddress" label="Use as shipping address"
+                    name="useAsShippingAddress"></v-checkbox>
+            </v-col>
+            <v-col cols="12" class="d-flex justify-end gap-4">
+                <v-btn variant="outlined" type="reset" color="primary" @click="handleReset">
+                    Clear all
+                </v-btn>
+                <v-btn color="primary" type="submit" :loading="loading" :disabled="loading">
+                    Save
+                </v-btn>
+            </v-col>
+        </v-row>
+    </v-form>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onErrorCaptured } from 'vue';
+import { useVendureMutation } from '../../composables/useVendureMutation';
+import setOrderShippingAddressMutation from '#graphql/app/commerce/mutations/setOrderShippingAddress.gql';
+import getCountryListQuery from '#graphql/app/commerce/queries/getCountryList.gql';
+import { useVendureQuery } from '../../composables/useVendureQuery';
+import { useNotification } from '~//composables/useNotifications';
+
+const emit = defineEmits(['address-saved', 'address-error', 'form-reset']);
+const { showNotification } = useNotification();
+const loading = ref(false);
+const error = ref<string | null>(null);
+const useAsShippingAddress = ref(false);
+
+const errors = reactive({
+  fullName: '',
+  streetLine1: '',
+  streetLine2: '',
+  city: '',
+  province: '',
+  postalCode: '',
+  phoneNumber: '',
+  countryCode: '',
+});
+
+const { data: countriesResult } = useVendureQuery(getCountryListQuery);
+type Province = { code: string; name: string };
+type Country = { code: string; name: string; provinces?: Province[] };
+
+const countries = ref<Country[]>([]);
+const regions = ref<Province[]>([]);
+
+const shippingAddress = reactive({
+  fullName: '',
+  streetLine1: '',
+  streetLine2: '',
+  city: '',
+  province: null,
+  postalCode: '',
+  phoneNumber: '',
+  countryCode: null,
+});
+
+const { mutate: setShippingAddress } = useVendureMutation(setOrderShippingAddressMutation);
+
+const updateRegions = (countryCode: string | null) => {
+  const country = countries.value.find((c: any) => c.code === countryCode);
+  regions.value = country?.provinces || [];
+};
+
+const handleReset = () => {
+  Object.assign(shippingAddress, {
+    fullName: '',
+    streetLine1: '',
+    streetLine2: '',
+    city: '',
+    province: '',
+    postalCode: '',
+    phoneNumber: '',
+    countryCode: '',
+  });
+  useAsShippingAddress.value = false;
+  emit('form-reset');
+};
+
+const setShippingAddressHandler = async () => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const result = await setShippingAddress({
+      input: {
+        fullName: shippingAddress.fullName,
+        streetLine1: shippingAddress.streetLine1,
+        streetLine2: shippingAddress.streetLine2,
+        city: shippingAddress.city,
+        province: shippingAddress.province,
+        postalCode: shippingAddress.postalCode,
+        phoneNumber: shippingAddress.phoneNumber,
+        countryCode: shippingAddress.countryCode,
+      },
+    });
+    showNotification({ type: 'success', message: 'Shipping address updated' });
+    emit('address-saved', result?.setOrderShippingAddress?.shippingAddress);
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to update shipping address';
+    showNotification({ type: 'error', message: error.value });
+    emit('address-error', err instanceof Error ? err : new Error(error.value));
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  if (countriesResult.value) {
+    countries.value = countriesResult.value.countries;
+  }
+});
+onErrorCaptured((err) => {
+  error.value = err instanceof Error ? err.message : 'An unexpected error occurred';
+  return false;
+});
+</script>
+
+<style scoped>
+.gap-4 {
+  gap: 1rem;
+}
+</style>