Skip to content

Commit

Permalink
Correct checkout success data (#359)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jade-GG
Jade-GG authored Oct 12, 2023
1 parent e4ef9b3 commit e3f70bb
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 28 deletions.
38 changes: 38 additions & 0 deletions resources/js/components/Checkout/CheckoutSuccess.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,44 @@ export default {
.get(window.url('/api/order'), { headers: { Authorization: 'Bearer ' + (this.token || this.mask) } })
.then((response) => (this.order = response.data))
},
serialize(address) {
return JSON.stringify({
firstname: address.firstname ?? '',
lastname: address.lastname ?? '',
postcode: address.postcode ?? '',
street: address.street ?? '',
city: address.city ?? '',
country_id: address.country_id ?? '',
telephone: address.telephone ?? '',
})
},
sameAddress(a1, a2) {
return this.serialize(a1) == this.serialize(a2)
},
},
computed: {
hideBilling() {
return this.shipping && this.billing && this.sameAddress(this.shipping, this.billing)
},
shipping() {
if (!this.order?.sales_order_addresses) {
return null
}
let shipping = this.order.sales_order_addresses.filter((e) => e.address_type == 'shipping')
return shipping.length > 1 ? null : shipping.at(-1)
},
billing() {
if (!this.order?.sales_order_addresses) {
return null
}
let billing = this.order.sales_order_addresses.filter((e) => e.address_type == 'billing')
return billing.at(-1)
},
items() {
return this.order.sales_order_items.filter((item) => !item.parent_item_id)
},
},
}
</script>
47 changes: 26 additions & 21 deletions resources/views/checkout/steps/success.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,73 @@
<checkout-success>
<div dusk="checkout-success">
<div dusk="checkout-success" slot-scope="{ order, hideBilling, shipping, billing, items }" v-cloak v-if="order">
<h1 class="font-bold text-4xl mb-5">@lang('Order placed succesfully')</h1>
<div class="bg-highlight rounded p-8">
<p>@lang('We will get to work for you right away')</p>
<p>@lang('We will send a confirmation of your order to') <span class="font-bold">@{{ $root.user?.email }}</span></p>
<p>@lang('We will send a confirmation of your order to') <span class="font-bold">@{{ order.customer_email }}</span></p>
</div>
<div class="mt-4">
<div class="flex flex-wrap items-center mb-4 border-b pb-2" v-for="(item, productId, index) in cart.items">
<div
class="flex flex-wrap items-center mb-4 border-b pb-2"
v-for="(item, productId, index) in items"
>
<div class="w-1/6 sm:w-1/12 pr-3">
<a :href="item.url" class="block">
<img
:alt="item.name"
:src="'/storage/resizes/80x80/catalog/product' + item.image + '.webp'"
:src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/sku/' + item.sku + '.webp'"
height="100"
class="mx-auto"
/>
</a>
</div>
<div class="w-5/6 sm:w-5/12 lg:w-5/12">
<a :href="item.url" dusk="cart-item-name" class="font-bold">@{{ item.name }}</a>
<div v-for="(optionValue, option) in item.options">
@{{ option }}: @{{ optionValue }}
</div>
<template v-if="item.product_options?.attributes_info">
<div v-for="option in item.product_options.attributes_info">
@{{ option.label }}: @{{ option.value }}
</div>
</template>
</div>
<div class="w-2/6 sm:w-1/6 lg:w-2/12 text-right pr-5">
@{{ item.qty }}
@{{ Math.round(item.qty_ordered) }}
</div>
<div class="w-2/6 sm:w-1/6 lg:w-2/12 text-right pr-5">
@{{ item.price | price }}
</div>
<div class="w-2/6 sm:w-1/6 lg:w-2/12 flex justify-end items-center text-right">
@{{ item.total | price }}
@{{ item.row_total | price }}
</div>
</div>
</div>
<div class="flex flex-col mt-4 gap-x-4 md:flex-row">
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral md:w-1/2">
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral md:w-1/2" v-if="billing">
<p class="text-neutral font-lg font-bold mb-2">@lang('Billing address')</p>
<ul>
<li>@{{ $root.checkout?.billing_address?.firstname }} @{{ $root.checkout?.billing_address?.lastname }}</li>
<li>@{{ $root.checkout?.billing_address?.street[0] }} @{{ $root.checkout?.billing_address?.street[1] }} @{{ $root.checkout?.billing_address?.street[2] }}</li>
<li>@{{ $root.checkout?.billing_address?.postcode }} - @{{ $root.checkout?.billing_address?.city }} - @{{ $root.checkout?.billing_address?.country_id }}</li>
<li>@{{ $root.checkout?.billing_address?.telephone }}</li>
<li>@{{ billing.firstname }} @{{ billing.lastname }}</li>
<li>@{{ billing.street }}</li>
<li>@{{ billing.postcode }} - @{{ billing.city }} - @{{ billing.country_id }}</li>
<li>@{{ billing.telephone }}</li>
</ul>
</div>
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2">
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2" v-if="shipping">
<p class="text-neutral font-lg font-bold mb-2">@lang('Shipping address')</p>
<ul>
<li>@{{ $root.checkout?.shipping_address?.firstname }} @{{ $root.checkout?.shipping_address?.lastname }}</li>
<li>@{{ $root.checkout?.shipping_address?.street[0] }} @{{ $root.checkout?.shipping_address?.street[1] }} @{{ $root.checkout?.billing_address?.street[2] }}</li>
<li>@{{ $root.checkout?.shipping_address?.postcode }} - @{{ $root.checkout?.shipping_address?.city }} - @{{ $root.checkout?.shipping_address?.country_id }}</li>
<li>@{{ $root.checkout?.shipping_address?.telephone }}</li>
<li>@{{ shipping.firstname }} @{{ shipping.lastname }}</li>
<li>@{{ shipping.street }}</li>
<li>@{{ shipping.postcode }} - @{{ shipping.city }} - @{{ shipping.country_id }}</li>
<li>@{{ shipping.telephone }}</li>
</ul>
</div>
</div>

<div class="flex flex-col mt-4 gap-x-4 md:flex-row">
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral md:w-1/2">
<p class="text-neutral font-lg font-bold mb-2">@lang('Shipping method')</p>
<p>@{{ $root.checkout?.shipping_method }}</p>
<p>@{{ order.shipping_description }}</p>
</div>
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2">
<p class="text-neutral font-lg font-bold mb-2">@lang('Payment method')</p>
<p>@{{ $root.checkout?.payment_method }}</p>
<p v-for="method in order.sales_order_payments">@{{ method.additional_information.method_title }}</p>
</div>
</div>
</div>
Expand Down
16 changes: 9 additions & 7 deletions resources/views/product/partials/options.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<div class="flex flex-col space-y-3">
@foreach($product->options->sortBy('sort_order') as $option)
<div>
@include('rapidez::product.partials.options.'.$option->type_id)
</div>
@endforeach
</div>
@if($product->options->isNotEmpty())
<div class="flex flex-col space-y-3">
@foreach($product->options->sortBy('sort_order') as $option)
<div>
@include('rapidez::product.partials.options.'.$option->type_id)
</div>
@endforeach
</div>
@endif

0 comments on commit e3f70bb

Please sign in to comment.