account-addresses.html.twig

{%  extends 'base.html.twig' %}

{% block title %}
	{{ 'My delivery addresses'| trans }}
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	{{ encore_entry_script_tags('addresses') }}
{% endblock %}

{% block body %}
	{% set addresses = resources('/api/front/account/addresses', {'customer.id': attr('customer', 'id')}) %}

	<div class="relative">
		{% include "@components/Molecules/Button/Button.html.twig" with {
      text: 'My account' | trans,
      href: '/account',
      variant: 'minimal',
      icon_left: 'chevron-left',
      classes: 'absolute top-2 lg:top-6 lg:left-5',
    } %}

		{% include '@components/Layout/Subheader/TitleOnly/SubheaderTitle.html.twig' with {title: "My addresses" | trans, position: "centered" }  %}
	</div>
	{% if addresses|length > 0 %}
		<div class="flex flex-col items-center justify-center mt-6 md:mt-11 mb-[80px] md:mb-[120px] px-6">
			<ul class="grid w-full max-w-screen-lg grid-cols-1 gap-6 mx-auto md:grid-cols-2">
				{% if app.request.get('delete_success') %}
					<div class="col-span-full">
						{% include "@components/Organisms/SnackBar/SnackBar.html.twig" with {text: 'Your address has been deleted'|trans, variant: 'validated', withIcon:true, size: "full"} %}
					</div>
				{% endif %}
				{% if app.request.get('create_success') %}
					<div class="col-span-full">
						{% include "@components/Organisms/SnackBar/SnackBar.html.twig" with {text: 'Your address has been created'|trans, variant: 'validated', withIcon:true, size: "full"} %}
					</div>
				{% endif %}
				{% if app.request.get('update_success') %}
					<div class="col-span-full">
						{% include "@components/Organisms/SnackBar/SnackBar.html.twig" with {text: 'Your address has been updaded'|trans, variant: 'validated', withIcon:true, size: "full"} %}
					</div>
				{% endif %}
				{% if app.request.get('default_success') %}
					<div class="col-span-full">
						{% include "@components/Organisms/SnackBar/SnackBar.html.twig" with {text: 'Your default address has been updaded'|trans, variant: 'validated', withIcon:true, size: "full"} %}
					</div>
				{% endif %}
				{% if app.request.get('error') %}
					<div class="col-span-full">
						{% include "@components/Organisms/SnackBar/SnackBar.html.twig" with {text: 'An error has occurred, please try again later'|trans, variant: 'warning', withIcon:true, size: "full"} %}
					</div>
				{% endif %}

				{% for address in addresses %}
					{% set country = resources(address.country) %}
					<li>
						{% include '@components/Organisms/Card/Address/AddressCard.html.twig' with {
            address: address|merge({
              country: country.isoalpha2
              }),
              attributesDelete: {
                'class': 'open-modal',
                'data-id': 'confirmDeleteAdresse'
              },
              classes: 'h-full'
            } %}
					</li>
				{% endfor %}
			</ul>

			{% include '@components/Molecules/Button/Button.html.twig' with {
      text: "Add an address" | trans,
      classes: "mt-8 w-[340px]",
      href: path('account_address_new')
    } %}
		</div>
	{% else %}
		<div class="flex flex-col items-center justify-center mb-20 text-center mt-11 lg:mt-12">
			<div class="w-[135px] h-[140px] lg:w-[244px] lg:h-[253px]">
				{{ source('assets/images/nothing.svg') }}
			</div>
			<h3 class="mt-4 mb-6 h3">{{ 'You have no registered address yet' | trans }}</h3>
		</div>
	{% endif %}
{% endblock %}

{% block footer %}
	{% include '@components/Layout/Footer/FooterCheckout.html.twig' %}
{% endblock %}

{% block modals %}
	{% set deleteModalContent %}
	<div class='h4'>{{'Are you sure you want to delete this address ?'|trans}}</div>
	<div class='flex flex-col gap-4 mt-8 md:flex-row'>
		{% include '@components/Molecules/Button/Button.html.twig' with {
        text: 'Cancel'| trans,
        variant: 'secondary',
        fill: true,
        classes: 'close-button'
        }
      %}
		{% include '@components/Molecules/Button/Button.html.twig' with {
        text: 'Yes'| trans,
        fill: true,
        href: '#0',
        id:"DeleteAddressBtn"
        }
      %}
	</div>
	{% endset %}

	{% include '@components/Molecules/Modal/Modal.html.twig' with {
    name: 'confirmDeleteAdresse',
    content: deleteModalContent
    }
  %}

	{% set setDefaultModalContent %}
	<div class='h4'>{{'Are you sure you want to choose this address by default ?'|trans}}</div>
	<div class='flex flex-col gap-4 mt-8 md:flex-row'>
		{% include '@components/Molecules/Button/Button.html.twig' with {
        text: 'Cancel'| trans,
        variant: 'secondary',
        fill: true,
        classes: 'close-button'
        }
      %}
		{% include '@components/Molecules/Button/Button.html.twig' with {
        text: 'Yes'| trans,
        fill: true,
        href: '#0',
        id:"ConfirmDefaultAddressBtn"
        }
      %}
	</div>
	{% endset %}

	{% include '@components/Molecules/Modal/Modal.html.twig' with {
    name: 'confirmDefaultAdresse',
    content: setDefaultModalContent
    }
  %}
{% endblock %}