@meeovi/layer-commerce 1.0.5 → 1.0.7

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

@@ -1,206 +0,0 @@
-<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

@@ -1,49 +0,0 @@
-<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

@@ -1,263 +0,0 @@
-<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

@@ -1,175 +0,0 @@
-<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>