Skip to content

Commit

Permalink
Merge pull request #3414 from uktrade/ET-461-guided-journey-mvp-goods…
Browse files Browse the repository at this point in the history 
…-sector-happy-paths

ET-461: guided mvp goods/sector happy paths
  • Loading branch information
@lewis-coulson-dit
lewis-coulson-dit authored Sep 23, 2024
2 parents 5efedb3 + 070e60c commit 68cf8b7
Show file tree
Hide file tree
Showing 10 changed files with 117 additions and 190 deletions.
34 changes: 18 additions & 16 deletions contact/templates/domestic/contact/export-support/guided-journey/step-1.html
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
{% extends 'domestic/contact/export-support/base.html' %}
{% load static %}
{% block head_title %}Export support{% endblock %}
{% block head_title %}Export support for UK businesses{% endblock %}
{% block head_css %}
{{ block.super }}
<link href="{% static 'core/css/accessible-autocomplete.min.css' %}"
rel="stylesheet"
type="text/css">
{% endblock %}
{% block content %}
<div class="great great-bg-white">
<div class="great">
<div class="great-container govuk-!-padding-top-4">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full great-grid-column-seven-twelfths">
<h1 class="govuk-heading-xl govuk-!-margin-bottom-9">Export support</h1>
<form method="post" autocomplete="off" class="great-min-height-500">
<h1 class="govuk-heading-xl govuk-!-margin-bottom-5">Export support for UK businesses</h1>
<form method="post" autocomplete="off" class="great-min-height-500 ">
{% csrf_token %}
<input type="hidden" id="sector" name="sector" />
<input type="hidden" id="make_or_do_keyword" name="make_or_do_keyword" />
<input type="hidden" id="exporter_type" name="exporter_type" />

<div class="govuk-!-margin-bottom-6">
<h2 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="sic_description">
What does your company make or do?
</label>
</h2>
<div class="govuk-hint govuk-!-margin-bottom-3">
Enter a keyword to search a list of business activities
<div class="govuk-!-padding-6 great-bg-white">
<div class="govuk-!-margin-bottom-6">
<h2 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="sic_description">
What does your company make or do?
</label>
</h2>
<div class="govuk-hint govuk-!-margin-bottom-3">
Enter a keyword to search a list of business activities
</div>
<input type="text" id="sic_description" name="sic_description" class="govuk-input great-text-input govuk-!-width-one-half" />
<div id="sic_description-container"></div>
</div>
<input type="text" id="sic_description" name="sic_description" class="govuk-input great-text-input govuk-!-width-one-half" />
<div id="sic_description-container"></div>
</div>

<button type="submit" class="govuk-button great-min-width-250-desktop">{{ button_text }}</button>
<button type="submit" class="govuk-button great-min-width-250-desktop">{{ button_text }}</button>
</div>
</form>
</div>
</div>
Expand Down
16 changes: 10 additions & 6 deletions contact/templates/domestic/contact/export-support/guided-journey/step-2.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
{% extends 'domestic/contact/export-support/base.html' %}
{% load static %}
{% block head_title %}Export support{% endblock %}
{% block head_title %}Export support for UK businesses{% endblock %}
{% block content %}
<div class="great great-bg-white">
<div class="great">
<div class="great-container govuk-!-padding-top-4">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full great-grid-column-seven-twelfths">
<h1 class="govuk-heading-xl govuk-!-margin-bottom-9">Export support</h1>
<h1 class="govuk-heading-xl govuk-!-margin-bottom-5">Export support for UK businesses</h1>
{% if session_data.sic_description %}
<p class="govuk-body">Your business activity: {{ session_data.sic_description }} <a href="{% url 'core:guided-journey-step-1' %}" class="govuk-link">(Change)</a></p>
<div class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white">
<h2 class="govuk-heading-s">What does your company make or do?</h2>
<p class="govuk-body">{{ session_data.sic_description }} <a href="{% url 'core:guided-journey-step-1' %}" class="govuk-link">(Change)</a></p>
<p class="govuk-body govuk-!-margin-bottom-0">Your sector is <strong class="great-font-bold">{{ session_data.sector }}</strong></p>
</div>
{% endif %}
<form method="post" autocomplete="off" class="great-min-height-500">
{% csrf_token %}
<div class="govuk-!-margin-bottom-6">
<div class="govuk-!-padding-6 great-bg-white govuk-!-margin-bottom-6">
<h2 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="sic_description">
Select the best commodity match for '<strong>{% if session_data.make_or_do_keyword %}{{ session_data.make_or_do_keyword }}{% else %}{{ session_data.sic_description }}{% endif %}</strong>'
Select the best commodity match
</label>
</h2>
<div class="great-text-select--arrow">
Expand Down
27 changes: 15 additions & 12 deletions contact/templates/domestic/contact/export-support/guided-journey/step-3.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
{% extends 'domestic/contact/export-support/base.html' %}
{% load static %}
{% block head_title %}Export support{% endblock %}
{% block head_title %}Export support for UK businesses{% endblock %}
{% block content %}
<div class="great great-bg-white">
<div class="great">
<div class="great-container govuk-!-padding-top-4">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full great-grid-column-seven-twelfths">
<h1 class="govuk-heading-xl govuk-!-margin-bottom-6">Export support</h1>
<h1 class="govuk-heading-xl govuk-!-margin-bottom-6">Export support for UK businesses</h1>

{% if session_data.sector %}
<p class="govuk-body">Your sector: {{ session_data.sector }}</p>
{% endif %}

{% if session_data.hs_code %}
<p class="govuk-body">Your commodity code: {{ session_data.hs_code }}</p>
{% if session_data.sic_description %}
<div class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white">
<h2 class="govuk-heading-s">What does your company make or do?</h2>
<p class="govuk-body">{{ session_data.sic_description }} <a href="{% url 'core:guided-journey-step-1' %}" class="govuk-link">(Change)</a></p>
<p class="govuk-body govuk-!-margin-bottom-0">Your sector is <strong class="great-font-bold">{{ session_data.sector }}</strong></p>
</div>
{% endif %}

{% if session_data.sic_description %}
<p class="govuk-body">Your business activity: {{ session_data.sic_description }} <a href="{% url 'core:guided-journey-step-1' %}" class="govuk-link">(Change)</a></p>
{% if session_data.exporter_type == 'goods' and session_data.hs_code %}
<div class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white">
<h2 class="govuk-heading-s">Your commodity match</h2>
<p class="govuk-body">Your commodity code is <strong class="great-font-bold">{{ session_data.hs_code }}</strong> <a href="{% url 'core:guided-journey-step-2' %}" class="govuk-link">(Change)</a></p>
</div>
{% endif %}

{% if session_data.exporter_type == 'goods' %}
Expand All @@ -28,7 +31,7 @@ <h1 class="govuk-heading-xl govuk-!-margin-bottom-6">Export support</h1>
{% include 'domestic/contact/export-support/includes/service-widget.html' %}
{% endif %}

<form method="post" autocomplete="off">
<form method="post" autocomplete="off" class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white">
{% csrf_token %}
{% for field in form.visible_fields %}
<div class="govuk-form-group govuk-!-margin-bottom-7 {% if field.errors %}govuk-form-group--error{% endif %}">
Expand Down
74 changes: 21 additions & 53 deletions contact/templates/domestic/contact/export-support/guided-journey/step-4.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
{% extends 'domestic/contact/export-support/base.html' %}
{% load static %}
{% block head_title %}Export support{% endblock %}
{% block head_title %}Export support for UK businesses{% endblock %}
{% block content %}
<div class="great great-bg-white">
<div class="great">
<div class="great-container govuk-!-padding-top-4">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full great-grid-column-seven-twelfths govuk-!-margin-bottom-5">
<h1 class="govuk-heading-xl govuk-!-margin-bottom-6">Export support</h1>
<h1 class="govuk-heading-xl govuk-!-margin-bottom-6">Export support for UK businesses</h1>

{% if session_data.sector %}
<p class="govuk-body">Your sector: {{ session_data.sector }}</p>
{% endif %}

{% if session_data.hs_code %}
<p class="govuk-body">Your commodity code: {{ session_data.hs_code }}</p>
{% endif %}

{% if session_data.exporter_type == 'goods' %}
{% include 'domestic/contact/export-support/includes/goods-widget.html' %}
{% if session_data.sic_description %}
<div class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white">
<h2 class="govuk-heading-s">What does your company make or do?</h2>
<p class="govuk-body">{{ session_data.sic_description }} <a href="{% url 'core:guided-journey-step-1' %}" class="govuk-link">(Change)</a></p>
<p class="govuk-body govuk-!-margin-bottom-0">Your sector is <strong class="great-font-bold">{{ session_data.sector }}</strong></p>
</div>
{% endif %}

{% if session_data.exporter_type == 'service' %}
{% include 'domestic/contact/export-support/includes/service-widget.html' %}
{% if session_data.exporter_type == 'goods' and session_data.hs_code %}
<div class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white">
<h2 class="govuk-heading-s">Your commodity match</h2>
<p class="govuk-body">Your commodity code is <strong class="great-font-bold">{{ session_data.hs_code }}</strong> <a href="{% url 'core:guided-journey-step-2' %}" class="govuk-link">(Change)</a></p>
</div>
{% endif %}

{% if session_data.market %}
{% include 'domestic/contact/export-support/includes/market-widget.html' with market=session_data.market related_markets=related_markets %}
{% endif %}

<div id="category-buttons">
<h2 class="govuk-heading-s govuk-!-margin-top-5">Whats the subject of your enquiry?</h2>
{% for category in categories %}
<button data-matcher="{{ category.matcher }}" class="govuk-!-padding-5 govuk-!-margin-right-3 govuk-!-margin-bottom-3 great-bg-white great-grey-border">{{ category.name }}</button>
{% endfor %}
{% if not session_data.market %}
<div class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white">
{% include 'domestic/contact/export-support/includes/suggested-markets-widget.html' with suggested_markets=suggested_markets %}
</div>
{% endif %}

<form method="post" autocomplete="off" id="subject-of-enquiry-form" class="govuk-!-margin-top-5">
<form method="post" autocomplete="off" id="subject-of-enquiry-form" class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white govuk-!-margin-top-5">
{% csrf_token %}

<h2 class="govuk-heading-s govuk-!-margin-top-5">Need help with a specific problem??</h2>

{% for field in form.visible_fields %}
<div class="govuk-form-group govuk-!-margin-bottom-7 {% if field.errors %}govuk-form-group--error{% endif %}">
Expand All @@ -54,36 +54,4 @@ <h2 class="govuk-heading-s govuk-!-margin-top-5">Whats the subject of your enqui
</div>
</div>
</div>
{% endblock %}
{% block body_js %}
{{ block.super }}
<script type="text/javascript">
document.querySelectorAll('[data-matcher]').forEach(el => {
el.addEventListener('click', (e) => {
e.preventDefault();

const matcher = e.target.dataset.matcher;

if (matcher) {
document.querySelector('#subject-of-enquiry-form').style.display = 'block';

document.querySelectorAll('[data-filter]').forEach(el => el.style.display = 'none')
document.querySelectorAll('[data-filter]').forEach(el => el.dataset.filter.includes(matcher) ? el.style.display = 'block' : el.style.display = 'none')

document.querySelector('#category-buttons').style.display = 'none';
document.querySelector('#change-category-button').innerHTML = e.target.innerHTML + ' (Change)';
}
});
})

document.querySelector('#subject-of-enquiry-form').style.display = 'none';

document.querySelector('#change-category-button').addEventListener('click', (e) => {
e.preventDefault();

document.querySelector('#category-buttons').style.display = 'block';
document.querySelector('#change-category-button').innerHTML = '';
document.querySelector('#subject-of-enquiry-form').style.display = 'none';
});
</script>
{% endblock %}
38 changes: 12 additions & 26 deletions contact/templates/domestic/contact/export-support/includes/goods-widget.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,13 @@
<p class="govuk-body-l">
Because your a goods exporter, make sure you know about...
</p>
<div class="govuk-grid-row govuk-!-margin-bottom-4">
<div class="govuk-grid-column-one-half">
<div class="great-bg-light-blue govuk-!-padding-5 great-grey-border">
<a href="" class="govuk-heading-s govuk-!-margin-bottom-2 great-heading-link great-heading-link--no-chevron">
<h2 class="govuk-heading-s great-heading-link__heading">Do you understand the Rules of Origin?</h2>
</a>
<p class="govuk-body">
Rules of origin help you work out where your goods originate from, which goods are covered in trade agreements.
</p>

</div>
</div>
<div class="govuk-grid-column-one-half">
<div class="great-bg-light-blue govuk-!-padding-5 great-grey-border">
<a href="" class="govuk-heading-s govuk-!-margin-bottom-2 great-heading-link great-heading-link--no-chevron">
<h2 class="govuk-heading-s great-heading-link__heading">Do you have an EORI number?</h2>
</a>
<p class="govuk-body">
You'll need an EORI number if you use HMRC's customs systems like Customs Handling of Import and Export Freight(CHEIF).
</p>
</div>
</div>
<div class="govuk-!-margin-bottom-2 govuk-!-padding-6 great-bg-white">
<h2 class="govuk-heading-s great-heading-link__heading">Do you understand the Rules of Origin?</h2>

<p class="govuk-body">
Rules of origin help you work out where your goods originate from, which goods are covered in trade agreements.
</p>
</div>
<div class="govuk-!-margin-bottom-6 govuk-!-padding-6 great-bg-white">
<h2 class="govuk-heading-s great-heading-link__heading">Do you have an EORI number?</h2>
<p class="govuk-body">
You'll need an EORI number if you use HMRC's customs systems like Customs Handling of Import and Export Freight(CHEIF).
</p>
</div>
<hr class="govuk-!-margin-top-3 govuk-!-margin-bottom-4 great-hr-blue--thin">
18 changes: 1 addition & 17 deletions contact/templates/domestic/contact/export-support/includes/market-widget.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

{% if market %}
{% with market=market|get_market_widget_data market_name=market %}
<div class="great-bg-light-blue govuk-!-padding-5 great-grey-border">
<div class="great-bg-white govuk-!-padding-5">
{% if market %}
<a href="{{ market.get_full_url }}" class="govuk-heading-s govuk-!-margin-bottom-2 great-heading-link great-heading-link--no-chevron">
<h2 class="govuk-heading-s great-heading-link__heading">
Expand Down Expand Up @@ -40,21 +40,5 @@ <h2 class="govuk-heading-s great-heading-link__heading">
{% endif %}
{% endif %}
</div>

{% if related_markets %}
{% for related_market in related_markets %}
{% if related_market.name == market_name %}
<h3 class="govuk-heading-xs govuk-!-margin-top-3 great-heading-link__heading">Related markets for {{ market.heading }}</h3>
{% for related in related_market.related %}
{% with related_market_data=related|get_market_widget_data %}
<a href="{{ related_market_data.get_full_url }}" class="govuk-!-margin-bottom-2 great-heading-link great-heading-link--no-chevron">
Exporting guide to {{ related_market_data.heading }}
</a>
{% endwith %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}

{% endwith %}
{% endif %}
Loading

0 comments on commit 68cf8b7

Please sign in to comment.