Redesign contact page with separate support and complaint channels.
- Replace single placeholder mailto with two contact cards - Show kontakt@bilhej.se for general questions and service issues - Show jcamorling@gmail.com for complaints with clearer labeling - Add tips section pointing users to Mina beställningar first - Extend ContactPage tests for both email addresses Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
758ace1b92
commit
60cb07fc89
2 changed files with 219 additions and 19 deletions
|
|
@ -3,8 +3,23 @@ import { mount } from '@vue/test-utils'
|
|||
import ContactPage from '@/pages/ContactPage.vue'
|
||||
|
||||
describe('ContactPage', () => {
|
||||
it('renders heading', () => {
|
||||
it('renders heading and lead', () => {
|
||||
const wrapper = mount(ContactPage)
|
||||
expect(wrapper.text()).toContain('Kontakta oss')
|
||||
expect(wrapper.text()).toContain('klagomål')
|
||||
})
|
||||
|
||||
it('renders general support email', () => {
|
||||
const wrapper = mount(ContactPage)
|
||||
const link = wrapper.find('a[href="mailto:kontakt@bilhej.se"]')
|
||||
expect(link.exists()).toBe(true)
|
||||
expect(link.text()).toBe('kontakt@bilhej.se')
|
||||
})
|
||||
|
||||
it('renders complaints email', () => {
|
||||
const wrapper = mount(ContactPage)
|
||||
const link = wrapper.find('a[href="mailto:jcamorling@gmail.com"]')
|
||||
expect(link.exists()).toBe(true)
|
||||
expect(wrapper.text()).toContain('jcamorling@gmail.com')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,25 +1,143 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const contactChannels = [
|
||||
{
|
||||
variant: 'general',
|
||||
title: 'Frågor om tjänsten',
|
||||
description:
|
||||
'Beställningar, betalning, tekniska problem eller allmänna frågor om hur Bilhej fungerar.',
|
||||
email: 'kontakt@bilhej.se',
|
||||
label: 'Skicka e-post',
|
||||
},
|
||||
{
|
||||
variant: 'complaints',
|
||||
title: 'Klagomål och synpunkter',
|
||||
description:
|
||||
'Om något gått fel eller du vill lämna ett klagomål direkt till oss som driver tjänsten.',
|
||||
email: 'jcamorling@gmail.com',
|
||||
label: 'Skicka klagomål',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page__card">
|
||||
<h1>Kontakta oss</h1>
|
||||
<p>
|
||||
Har du frågor eller feedback? Hör av dig till oss på
|
||||
<a href="mailto:hej@bilhalsning.se">hej@bilhalsning.se</a>.
|
||||
<div class="contact">
|
||||
<section class="contact__hero">
|
||||
<p class="contact__eyebrow">Kontakt</p>
|
||||
<h1 class="contact__title">Kontakta oss</h1>
|
||||
<p class="contact__lead">
|
||||
Vi svarar så snart vi kan. Välj rätt adress beroende på om det gäller en
|
||||
vanlig fråga eller ett klagomål.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="contact__section">
|
||||
<div class="contact__cards">
|
||||
<article
|
||||
v-for="channel in contactChannels"
|
||||
:key="channel.email"
|
||||
class="contact__card"
|
||||
:class="`contact__card--${channel.variant}`"
|
||||
>
|
||||
<h2>{{ channel.title }}</h2>
|
||||
<p>{{ channel.description }}</p>
|
||||
<a class="contact__email" :href="`mailto:${channel.email}`">
|
||||
{{ channel.email }}
|
||||
</a>
|
||||
<a
|
||||
class="btn btn--ghost contact__btn"
|
||||
:href="`mailto:${channel.email}`"
|
||||
>
|
||||
{{ channel.label }}
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact__section">
|
||||
<div class="contact__tips">
|
||||
<h2 class="contact__tips-title">Innan du skriver</h2>
|
||||
<ul class="contact__tips-list">
|
||||
<li>
|
||||
Har du en pågående beställning? Kontrollera
|
||||
<strong>Mina beställningar</strong> först. Där ser du status och
|
||||
spårning.
|
||||
</li>
|
||||
<li>
|
||||
Vid klagomål, skriv gärna med beställnings-ID och
|
||||
registreringsnummer så kan vi hitta ärendet snabbare.
|
||||
</li>
|
||||
<li>
|
||||
Vi läser all e-post manuellt och återkommer när vi har tittat på
|
||||
ditt ärende.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
max-width: 36rem;
|
||||
margin: var(--space-3xl) auto 0;
|
||||
padding: 0 var(--space-lg);
|
||||
.contact {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-3xl) var(--space-lg) var(--space-3xl);
|
||||
}
|
||||
|
||||
.page__card {
|
||||
.contact__hero {
|
||||
margin-bottom: var(--space-2xl);
|
||||
padding: var(--space-2xl);
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
var(--color-surface) 0%,
|
||||
#f8faff 55%,
|
||||
var(--color-paper) 100%
|
||||
);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.contact__eyebrow {
|
||||
display: inline-block;
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-primary-dark);
|
||||
background: var(--color-primary-soft);
|
||||
border: 1px solid #bfdbfe;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.contact__title {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
font-size: clamp(1.75rem, 4vw, 2.25rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.contact__lead {
|
||||
margin: 0;
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.75;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.contact__section {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.contact__cards {
|
||||
display: grid;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.contact__card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
|
|
@ -27,13 +145,80 @@
|
|||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
font-size: 1.5rem;
|
||||
.contact__card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: var(--contact-accent);
|
||||
}
|
||||
|
||||
p {
|
||||
.contact__card--general {
|
||||
--contact-accent: linear-gradient(90deg, #1d4ed8, #60a5fa);
|
||||
}
|
||||
|
||||
.contact__card--complaints {
|
||||
--contact-accent: linear-gradient(90deg, #4338ca, #818cf8);
|
||||
}
|
||||
|
||||
.contact__card h2 {
|
||||
margin: 0 0 var(--space-sm) 0;
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.contact__card p {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.65;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.contact__email {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.contact__email:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.contact__btn {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.contact__tips {
|
||||
padding: var(--space-xl);
|
||||
background: var(--color-border-light);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.contact__tips-title {
|
||||
margin: 0 0 var(--space-md) 0;
|
||||
font-size: 1.0625rem;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.contact__tips-list {
|
||||
margin: 0;
|
||||
line-height: 1.7;
|
||||
padding-left: 1.25rem;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.contact__tips-list li + li {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.contact__tips-list li {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue