Skip to content

Add promo code (coupon) support to order form #615

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ninedev-i wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Add promo code (coupon) support to order form #615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eab2793
Add promo code (coupon) support to order form
ninedev-i Oct 6, 2026
e99d5a5
Merge branch 'main' into feature/promocode
ninedev-i Oct 21, 2026
0a62fc1
fix comments
ninedev-i Oct 21, 2026
d0db041
fix comments
ninedev-i Oct 21, 2026
dde1130
fix comments
ninedev-i Oct 22, 2026
efecd6e
fix comments
ninedev-i Oct 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions common/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,16 +102,14 @@ export interface AvailableDelivery {
title: string;
address: string | null;
mapUrl: string | null;
price: number;
price: number | null;
total: number;
error?: DeliveryError | false | null; // false/null - no error
}

export interface AvailableDeliveriesInfo{
available: AvailableDelivery[];
freeDelivery: boolean;
}

export type AvailableDeliveriesInfo = AvailableDelivery[];

export interface CustomerData{
individual:{
fio: string;
Expand Down Expand Up @@ -152,11 +150,19 @@ export interface PaymentsInfo {
default: string;
}

export interface PromocodeNotice {
type: 'invalid_code' | 'payer_type' | 'sum_from' | 'capped' | 'outbid';
message: string;
severity: 'error' | 'warning' | 'info';
}

export interface OrderInfo {
payerType: string;
payerData: CustomerData;
deliveryType: string;
deliveryData: Record<string, string>;
promocode: string;
promocodeNotices: PromocodeNotice[];
basketData: Record<string, number>;
countries: Record<number, string>;
cdekCountries: number[];
Expand Down
54 changes: 54 additions & 0 deletions components/Alert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script setup lang="ts">
defineProps<{
variant?: 'info' | 'success' | 'warning' | 'error';
}>();
</script>

<template>
<div
class="wb-alert"
:class="{
'wb-alert-info': !variant || variant === 'info',
'wb-alert-success': variant === 'success',
'wb-alert-warning': variant === 'warning',
'wb-alert-error': variant === 'error',
}"
:role="variant === 'error' ? 'alert' : 'status'"
>
<slot />
</div>
</template>

<style scoped>
.wb-alert {
padding: 12px 16px;
border: 1px solid transparent;
border-radius: 2px;
font-size: 16px;
line-height: 1.4;
}

.wb-alert-info {
background: #eff6ff;
border-color: #bfdbfe;
color: #1d4ed8;
}

.wb-alert-success {
background: #eff8e6;
border-color: #b7e0a0;
color: var(--primary-color-hover);
}

.wb-alert-warning {
background: #fffbeb;
border-color: #fde68a;
color: #92400e;
}

.wb-alert-error {
background: #fee2e2;
border-color: var(--danger-color);
color: var(--danger-color);
}
</style>
14 changes: 12 additions & 2 deletions components/Button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ withDefaults(defineProps<{
'wb-button-m': size === 'default',
'wb-button-l': size === 'large',
'wb-button-primary': variant === 'primary',
'wb-button-secondary': variant === 'secondary',
'wb-button-outlined': outlined
}"
:id="id">
Expand Down Expand Up @@ -76,9 +77,18 @@ withDefaults(defineProps<{
color: var(--primary-color)
}

.wb-button-primary.wb-button-outlined {
.wb-button-secondary {
background: var(--gray-color);
border: 1px solid var(--border-color);
color: var(--heading-color);
}

.wb-button-secondary:hover {
background: var(--border-color) !important;
}

.wb-button-secondary.wb-button-outlined {
background: transparent;
color: var(--primary-color)
}

.wb-button-m {
Expand Down
40 changes: 34 additions & 6 deletions components/Input.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const props = defineProps<{
pattern?: string;
title?: string;
errorMessage?: string;
size?: 'default' | 'large';
}>();

const model = defineModel<string>();
Expand Down Expand Up @@ -49,7 +50,9 @@ const hasError = computed(() => error.value || !!props.errorMessage);
class="input"
:class="{
'input-filled': !!model,
'input-error': hasError
'input-error': hasError,
'input-hasAction': !!$slots.action,
'input-large': size === 'large'
}"
:id="id"
:autofocus="autofocus"
Expand All @@ -62,12 +65,15 @@ const hasError = computed(() => error.value || !!props.errorMessage);
@blur="validate"
@input="validate"
/>
<div v-else class="input input-static" :id="id">{{ model }}</div>
<div v-else class="input input-static" :class="{ 'input-large': size === 'large' }" :id="id">{{ model }}</div>

<label v-if="label" class="input-label" :class="{ 'input-label--static': disabled }" :for="id">
{{ label }}
<span v-if="required" class="input-required">*</span>
</label>
<div v-if="$slots.action" class="input-action">
<slot name="action" />
</div>
<span v-if="errorMessage" class="input-errorMessage">{{ errorMessage }}</span>
</div>
</template>
Expand All @@ -82,7 +88,7 @@ const hasError = computed(() => error.value || !!props.errorMessage);
color: #000;
font-family: 'Plumb', sans-serif;
border: 1px solid var(--border-color);
padding: 26px 12px 18px;
padding: 26px 12px 8px;
transition: background 0.2s, border 0.2s, outline-offset 0.2s;
font-size: 24px;
line-height: 24px;
Expand All @@ -106,17 +112,19 @@ const hasError = computed(() => error.value || !!props.errorMessage);
.input-label {
position: absolute;
z-index: 1;
top: 26px;
top: 50%;
transform: translateY(-50%);
left: 12px;
color: #ccc;
font-size: 16px;
font-weight: 500;
transition: top 0.2s, font-weight 0.2s, font-size 0.2s;
transition: top 0.2s, font-weight 0.2s, font-size 0.2s, transform 0.2s;
}

.input:not(:placeholder-shown) + .input-label,
.input:focus + .input-label {
top: 8px;
transform: translateY(0);
font-size: 14px;
}

Expand All @@ -134,8 +142,16 @@ const hasError = computed(() => error.value || !!props.errorMessage);
color: #aaa;
}

.input-static {
.input-large {
padding-bottom: 18px;
}

.input-static.input-large {
min-height: 74px;
}

.input-static {
min-height: 64px;
height: auto;
white-space: normal;
overflow-wrap: anywhere;
Expand All @@ -144,6 +160,18 @@ const hasError = computed(() => error.value || !!props.errorMessage);
cursor: not-allowed;
}

.input-hasAction {
padding-right: 112px;
}

.input-action {
position: absolute;
z-index: 1;
right: 8px;
top: 50%;
transform: translateY(-50%);
}

.input-errorMessage {
color: var(--danger-color);
font-size: 13px;
Expand Down
16 changes: 11 additions & 5 deletions components/Select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ defineProps<{
placeholder: string;
disabled?: boolean;
showClear?: boolean;
size?: 'small' | 'default';
size?: 'small' | 'default' | 'large';
isSearchable?: boolean;
changeCallback?: () => void;
}>();
Expand All @@ -20,7 +20,8 @@ const model = defineModel();
<Select
:class="{
'wb-select-small': size === 'small',
'wb-select-default': size !== 'small',
'wb-select-large': size === 'large',
'wb-select-default': size !== 'small' && size !== 'large',
}"
v-model="model"
:options="options"
Expand Down Expand Up @@ -176,12 +177,17 @@ const model = defineModel();
}

.wb-select-default {
padding: 26px 12px 18px;
padding: 17px 12px;
}

.wb-select-default [data-pc-section="label"] {
.wb-select-large {
padding: 22px 12px;
}

.wb-select-default [data-pc-section="label"],
.wb-select-large [data-pc-section="label"] {
font-size: 24px;
font-weight: 500;
line-height: 24px;
}

.wb-select-small {
Expand Down
13 changes: 7 additions & 6 deletions components/order/Customer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,16 @@ const individual = defineModel<{ fio: string; phone: string; additional: string;
const entity = defineModel<{ fio: string; phone: string; additional: string; inn: string; kpp: string; orgName: string; address: string; email: string; comment: string; }>('entity', {required: true});
const country = defineModel<number>('country');

const { countries, cdekCountries, recentOrgs, fieldErrors } = defineProps<{
const props = defineProps<{
countries: Record<number, string>;
cdekCountries: number[];
recentOrgs?: RecentOrg[];
fieldErrors?: Record<string, string>;
}>();
const { countries, cdekCountries, recentOrgs, fieldErrors } = toRefs(props);

const recentOrgSuggestions = computed(() =>
(recentOrgs ?? []).map(org => ({
(recentOrgs.value ?? []).map(org => ({
value: org.orgName,
data: {
inn: org.inn,
Expand All @@ -37,7 +38,7 @@ if (entity.value && individual.value) {

const isRussia = computed(() => country.value === RUSSIA_ID);
// Добавочный номер показываем только для стран, куда доступна доставка СДЭК.
const isCdekCountry = computed(() => !!country.value && cdekCountries.includes(country.value));
const isCdekCountry = computed(() => !!country.value && cdekCountries.value.includes(country.value));

const hasSavedOrg = !!(entity.value?.inn || entity.value?.orgName);
const orgMode = ref<'search' | 'fields'>(isRussia.value && !hasSavedOrg ? 'search' : 'fields');
Expand Down Expand Up @@ -88,7 +89,7 @@ const onOrgSelect = ({ orgName, inn, kpp, address }: { orgName: string; inn: str
</script>

<template>
<h2>{{ t('title') }}</h2>
<legend>{{ t('title') }}</legend>
<div class="customer">
<Select
v-model="country"
Expand Down Expand Up @@ -265,7 +266,7 @@ const onOrgSelect = ({ orgName, inn, kpp, address }: { orgName: string; inn: str
<i18n>
{
"ru": {
"title": "Введите информацию о покупателе",
"title": "Информация о покупателе",
"country": "Страна",
"individual": "Физическое лицо",
"entity": "Юридическое лицо",
Expand All @@ -286,7 +287,7 @@ const onOrgSelect = ({ orgName, inn, kpp, address }: { orgName: string; inn: str
"kppFormat": "КПП — 9 цифр"
},
"en": {
"title": "Enter the customer's information",
"title": "Customer's information",
"country": "Country",
"individual": "Individuals",
"entity": "Legal entities",
Expand Down
Loading
Loading