231 lines
12 KiB
PHP
231 lines
12 KiB
PHP
@extends('public.account.layout')
|
|
|
|
@section('title', trans('storefront::account.pages.my_addresses'))
|
|
|
|
@push('globals')
|
|
<script>
|
|
FleetCart.langs['storefront::account.addresses.confirm'] = '{{ trans('storefront::account.addresses.confirm') }}';
|
|
</script>
|
|
@endpush
|
|
|
|
@section('panel')
|
|
<my-addresses
|
|
:initial-addresses="{{ $addresses }}"
|
|
:initial-default-address="{{ $defaultAddress }}"
|
|
:countries="{{ json_encode($countries) }}"
|
|
inline-template
|
|
>
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h4>{{ trans('storefront::account.pages.my_addresses') }}</h4>
|
|
</div>
|
|
|
|
<div class="panel-body" v-cloak>
|
|
<div class="my-addresses">
|
|
<div class="address-card-wrap" v-if="hasAddress && ! formOpen">
|
|
<div class="row">
|
|
<div class="col-xl-6 col-lg-9 d-flex" v-for="address in addresses" :key="address.id">
|
|
<address
|
|
class="address-card"
|
|
:class="{ active: defaultAddress.address_id === address.id }"
|
|
@click="changeDefaultAddress(address)"
|
|
>
|
|
<span class="badge" v-if="defaultAddress.address_id === address.id">
|
|
{{ trans('storefront::account.addresses.default') }}
|
|
</span>
|
|
|
|
<div class="address-card-data">
|
|
<span v-text="address.full_name"></span>
|
|
<span v-text="address.address_1"></span>
|
|
<span v-if="address.address_2" v-text="address.address_2"></span>
|
|
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
|
<span v-text="address.country_name"></span>
|
|
</div>
|
|
|
|
<div class="address-card-actions">
|
|
<button type="button" class="btn btn-edit-address" @click.stop="edit(address)">
|
|
{{ trans('storefront::account.addresses.edit') }}
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-delete-address" @click.stop="remove(address)">
|
|
{{ trans('storefront::account.addresses.delete') }}
|
|
</button>
|
|
</div>
|
|
|
|
</address>
|
|
</div>
|
|
|
|
<div class="col-md-18">
|
|
<button
|
|
type="button"
|
|
class="btn btn-lg btn-default btn-add-new-address"
|
|
@click="formOpen = true"
|
|
>
|
|
{{ trans('storefront::account.addresses.add_new_address') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form @submit.prevent="save" @input="errors.clear($event.target.name)" v-else>
|
|
<div class="add-new-address-form">
|
|
<h4 class="section-title">
|
|
{{ trans('storefront::account.addresses.new_address') }}
|
|
</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-md-9">
|
|
<div class="form-group">
|
|
<label for="first-name">
|
|
{{ trans('storefront::account.addresses.first_name') }}<span>*</span>
|
|
</label>
|
|
|
|
<input v-model="form.first_name" name="first_name" type="text" id="first-name"
|
|
class="form-control">
|
|
|
|
<span class="error-message" v-if="errors.has('first_name')"
|
|
v-text="errors.get('first_name')">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-9">
|
|
<div class="form-group">
|
|
<label for="last-name">
|
|
{{ trans('storefront::account.addresses.last_name') }}<span>*</span>
|
|
</label>
|
|
|
|
<input v-model="form.last_name" name="last_name" type="text" id="last-name"
|
|
class="form-control">
|
|
|
|
<span class="error-message" v-if="errors.has('last_name')"
|
|
v-text="errors.get('last_name')">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-18">
|
|
<div class="form-group">
|
|
<label for="address-1">
|
|
{{ trans('storefront::account.addresses.street_address') }}<span>*</span>
|
|
</label>
|
|
|
|
<input v-model="form.address_1" name="address_1" type="text" id="address-1"
|
|
placeholder="{{ trans('storefront::account.addresses.address_line_1') }}"
|
|
class="form-control">
|
|
|
|
<span class="error-message" v-if="errors.has('address_1')"
|
|
v-text="errors.get('address_1')">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input v-model="form.address_2" name="address_2" type="text" id="address-2"
|
|
placeholder="{{ trans('storefront::account.addresses.address_line_2') }}"
|
|
class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-9">
|
|
<div class="form-group">
|
|
<label for="city">
|
|
{{ trans('storefront::account.addresses.city') }}<span>*</span>
|
|
</label>
|
|
|
|
<input v-model="form.city" name="city" type="text" id="city"
|
|
class="form-control">
|
|
|
|
<span class="error-message" v-if="errors.has('city')" v-text="errors.get('city')">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-9">
|
|
<div class="form-group">
|
|
<label for="zip">
|
|
{{ trans('storefront::account.addresses.zip') }}<span>*</span>
|
|
</label>
|
|
|
|
<input v-model="form.zip" name="zip" type="text" id="zip"
|
|
class="form-control">
|
|
|
|
<span class="error-message" v-if="errors.has('zip')" v-text="errors.get('zip')">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-9">
|
|
<div class="form-group">
|
|
<label for="country">
|
|
{{ trans('storefront::account.addresses.country') }}<span>*</span>
|
|
</label>
|
|
|
|
<select
|
|
:value="form.country"
|
|
name="country"
|
|
id="country"
|
|
class="form-control arrow-black"
|
|
@change="changeCountry($event.target.value)"
|
|
>
|
|
<option v-for="(name, code) in countries" :value="code" v-text="name">
|
|
</option>
|
|
</select>
|
|
|
|
<span class="error-message" v-if="errors.has('country')"
|
|
v-text="errors.get('country')">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-9">
|
|
<div class="form-group">
|
|
<label for="state">
|
|
{{ trans('storefront::account.addresses.state') }}<span>*</span>
|
|
</label>
|
|
|
|
<input v-model="form.state" name="state" type="text" id="state"
|
|
class="form-control" v-if="hasNoStates">
|
|
|
|
<select v-model="form.state" name="state" id="state"
|
|
class="form-control arrow-black" v-else>
|
|
<option value="">
|
|
{{ trans('storefront::account.addresses.please_select') }}
|
|
</option>
|
|
|
|
<option v-for="(name, code) in states" :value="code" v-html="name">
|
|
</option>
|
|
</select>
|
|
|
|
<span class="error-message" v-if="errors.has('state')"
|
|
v-text="errors.get('state')">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-18">
|
|
<button
|
|
type="button"
|
|
class="btn btn-lg btn-default btn-cancel"
|
|
v-if="hasAddress"
|
|
@click="cancel"
|
|
>
|
|
{{ trans('storefront::account.addresses.cancel') }}
|
|
</button>
|
|
|
|
<button
|
|
type="submit"
|
|
class="btn btn-lg btn-primary btn-save-address"
|
|
:class="{ 'btn-loading': loading }"
|
|
>
|
|
{{ trans('storefront::account.addresses.save_address') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</my-addresses>
|
|
@endsection
|