From 723fcd18efaa1ab78c20137270c71660d606b8cb Mon Sep 17 00:00:00 2001
From: Ekaterina Volkova <ekaterina.volkova@wirenboard.com>
Date: Tue, 11 Aug 2026 10:09:27 +0000
Subject: [PATCH 1/5] Select payment method default from order payments
 response

---
 common/types.ts              |  1 -
 components/order/Payment.vue | 20 ++++++++++++++------
 pages/contents/order.vue     |  4 +++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/common/types.ts b/common/types.ts
index 78b824a2..43edd312 100644
--- a/common/types.ts
+++ b/common/types.ts
@@ -134,7 +134,6 @@ export interface OrderInfo {
   payerData: CustomerData;
   deliveryType: string;
   deliveryData: Record<string, string>;
-  paymentType: string;
   basketData: Record<string, number>;
   countries: Record<number, string>;
   cdekCountries: number[];
diff --git a/components/order/Payment.vue b/components/order/Payment.vue
index c56c2f3b..6410a097 100644
--- a/components/order/Payment.vue
+++ b/components/order/Payment.vue
@@ -5,24 +5,32 @@ const paymentType = defineModel<string>('paymentType');
 const { t } = useI18n();
 
 const params = computed(() => ({ payerType: props.payerType, country: props.country }));
-const { data: paymentMethods } = await useApi<string[]>(
+const { data: paymentsInfo } = await useApi<{ methods: string[]; default: string }>(
   '/order/payments/',
   params,
   { watch: [() => props.payerType, () => props.country] },
 );
 
 const paymentTypes = computed(() =>
-  (paymentMethods.value!).map(method => ({
+  (paymentsInfo.value?.methods ?? []).map(method => ({
     id: method,
     title: t(method),
     comment: t(`${method}Comment`),
   }))
 );
 
-watch(paymentMethods, (methods) => {
-  if (!methods) return;
-  if (!methods.includes(paymentType.value ?? '')) {
-    paymentType.value = methods[0] ?? '';
+// Способ оплаты по умолчанию присылает бэк в поле default (зависит от типа
+// плательщика: юрлицо — банковский перевод, физлицо — карта). Ручной выбор
+// пользователя сохраняем, пока он доступен; при смене типа плательщика
+// возвращаемся к дефолту нового типа.
+const payerTypeChanged = ref(false);
+watch(() => props.payerType, () => { payerTypeChanged.value = true; });
+
+watch(paymentsInfo, (info) => {
+  if (!info) return;
+  if (payerTypeChanged.value || !paymentType.value || !info.methods.includes(paymentType.value)) {
+    payerTypeChanged.value = false;
+    paymentType.value = info.default;
   }
 }, { immediate: true });
 </script>
diff --git a/pages/contents/order.vue b/pages/contents/order.vue
index 466a9bc9..9288ecf2 100644
--- a/pages/contents/order.vue
+++ b/pages/contents/order.vue
@@ -48,7 +48,9 @@ const deliveryData = ref(orderInfo.value!.deliveryData);
 const deliveryType = ref(orderInfo.value!.deliveryType);
 const country = ref(Number(orderInfo.value!.deliveryData.country));
 
-const paymentType = ref(orderInfo.value!.paymentType);
+// Способ оплаты из прошлого заказа не подставляем: начальное значение пустое,
+// Payment.vue выберет дефолт из /order/payments/ по типу плательщика.
+const paymentType = ref('');
 
 
 useHead({

From bc452f94e32d2954be23add045ad15a70d8e99b8 Mon Sep 17 00:00:00 2001
From: Ekaterina Volkova <ekaterina.volkova@wirenboard.com>
Date: Tue, 11 Aug 2026 10:39:13 +0000
Subject: [PATCH 2/5] Fix payment default highlight lost to SSR hydration
 mismatch

---
 components/order/Payment.vue | 28 ++++------------------------
 pages/contents/order.vue     | 34 +++++++++++++++++++++++++++++-----
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/components/order/Payment.vue b/components/order/Payment.vue
index 6410a097..6108107f 100644
--- a/components/order/Payment.vue
+++ b/components/order/Payment.vue
@@ -1,38 +1,18 @@
 <script setup lang="ts">
-const props = defineProps<{ payerType: string; country: number }>();
+// Список способов и дефолт запрашивает и выбирает order.vue (владелец состояния) —
+// см. комментарий там про SSR/hydration; здесь только отображение.
+const props = defineProps<{ paymentsInfo: { methods: string[]; default: string } | null }>();
 const paymentType = defineModel<string>('paymentType');
 
 const { t } = useI18n();
 
-const params = computed(() => ({ payerType: props.payerType, country: props.country }));
-const { data: paymentsInfo } = await useApi<{ methods: string[]; default: string }>(
-  '/order/payments/',
-  params,
-  { watch: [() => props.payerType, () => props.country] },
-);
-
 const paymentTypes = computed(() =>
-  (paymentsInfo.value?.methods ?? []).map(method => ({
+  (props.paymentsInfo?.methods ?? []).map(method => ({
     id: method,
     title: t(method),
     comment: t(`${method}Comment`),
   }))
 );
-
-// Способ оплаты по умолчанию присылает бэк в поле default (зависит от типа
-// плательщика: юрлицо — банковский перевод, физлицо — карта). Ручной выбор
-// пользователя сохраняем, пока он доступен; при смене типа плательщика
-// возвращаемся к дефолту нового типа.
-const payerTypeChanged = ref(false);
-watch(() => props.payerType, () => { payerTypeChanged.value = true; });
-
-watch(paymentsInfo, (info) => {
-  if (!info) return;
-  if (payerTypeChanged.value || !paymentType.value || !info.methods.includes(paymentType.value)) {
-    payerTypeChanged.value = false;
-    paymentType.value = info.default;
-  }
-}, { immediate: true });
 </script>
 
 <template>
diff --git a/pages/contents/order.vue b/pages/contents/order.vue
index 9288ecf2..fb58449c 100644
--- a/pages/contents/order.vue
+++ b/pages/contents/order.vue
@@ -48,9 +48,34 @@ const deliveryData = ref(orderInfo.value!.deliveryData);
 const deliveryType = ref(orderInfo.value!.deliveryType);
 const country = ref(Number(orderInfo.value!.deliveryData.country));
 
-// Способ оплаты из прошлого заказа не подставляем: начальное значение пустое,
-// Payment.vue выберет дефолт из /order/payments/ по типу плательщика.
-const paymentType = ref('');
+// Способы оплаты и дефолт запрашиваются здесь, а не в Payment.vue: начальное
+// значение paymentType должно быть установлено ДО первого рендера. Если ставить
+// его из дочернего компонента через defineModel, SSR отдаёт HTML без выделения
+// (emit не возвращается в пропсы в одном проходе), а в проде Vue hydration
+// mismatch не исправляет — выделение так и не появляется.
+const paymentsParams = computed(() => ({ payerType: payerType.value, country: country.value }));
+const { data: paymentsInfo } = await useApi<{ methods: string[]; default: string }>(
+  '/order/payments/',
+  paymentsParams,
+  { watch: [payerType, country] },
+);
+
+// Способ оплаты из прошлого заказа не подставляем — всегда дефолт по типу
+// плательщика (юрлицо — банковский перевод, физлицо — карта).
+const paymentType = ref(paymentsInfo.value?.default ?? '');
+
+// При смене типа плательщика ставим дефолт нового типа из перезапрошенного
+// списка; ручной выбор пользователя сохраняем, пока способ доступен.
+const payerTypeChanged = ref(false);
+watch(payerType, () => { payerTypeChanged.value = true; });
+
+watch(paymentsInfo, (info) => {
+  if (!info) return;
+  if (payerTypeChanged.value || !paymentType.value || !info.methods.includes(paymentType.value)) {
+    payerTypeChanged.value = false;
+    paymentType.value = info.default;
+  }
+});
 
 
 useHead({
@@ -139,8 +164,7 @@ const makeOrder = async () => {
 
     <OrderPayment
       v-model:paymentType="paymentType"
-      :payerType="payerType"
-      :country="country"
+      :paymentsInfo="paymentsInfo"
     />
 
     <div v-if="orderError && !Object.keys(fieldErrors).length" class="order-error">

From ced5a035cbe0f834674626bf5c3db82f5bbd46c4 Mon Sep 17 00:00:00 2001
From: Ekaterina Volkova <ekaterina.volkova@wirenboard.com>
Date: Tue, 11 Aug 2026 10:56:52 +0000
Subject: [PATCH 3/5] Remove code comments

---
 components/order/Payment.vue | 2 --
 pages/contents/order.vue     | 9 ---------
 2 files changed, 11 deletions(-)

diff --git a/components/order/Payment.vue b/components/order/Payment.vue
index 6108107f..430143fc 100644
--- a/components/order/Payment.vue
+++ b/components/order/Payment.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-// Список способов и дефолт запрашивает и выбирает order.vue (владелец состояния) —
-// см. комментарий там про SSR/hydration; здесь только отображение.
 const props = defineProps<{ paymentsInfo: { methods: string[]; default: string } | null }>();
 const paymentType = defineModel<string>('paymentType');
 
diff --git a/pages/contents/order.vue b/pages/contents/order.vue
index fb58449c..b5b196c6 100644
--- a/pages/contents/order.vue
+++ b/pages/contents/order.vue
@@ -48,11 +48,6 @@ const deliveryData = ref(orderInfo.value!.deliveryData);
 const deliveryType = ref(orderInfo.value!.deliveryType);
 const country = ref(Number(orderInfo.value!.deliveryData.country));
 
-// Способы оплаты и дефолт запрашиваются здесь, а не в Payment.vue: начальное
-// значение paymentType должно быть установлено ДО первого рендера. Если ставить
-// его из дочернего компонента через defineModel, SSR отдаёт HTML без выделения
-// (emit не возвращается в пропсы в одном проходе), а в проде Vue hydration
-// mismatch не исправляет — выделение так и не появляется.
 const paymentsParams = computed(() => ({ payerType: payerType.value, country: country.value }));
 const { data: paymentsInfo } = await useApi<{ methods: string[]; default: string }>(
   '/order/payments/',
@@ -60,12 +55,8 @@ const { data: paymentsInfo } = await useApi<{ methods: string[]; default: string
   { watch: [payerType, country] },
 );
 
-// Способ оплаты из прошлого заказа не подставляем — всегда дефолт по типу
-// плательщика (юрлицо — банковский перевод, физлицо — карта).
 const paymentType = ref(paymentsInfo.value?.default ?? '');
 
-// При смене типа плательщика ставим дефолт нового типа из перезапрошенного
-// списка; ручной выбор пользователя сохраняем, пока способ доступен.
 const payerTypeChanged = ref(false);
 watch(payerType, () => { payerTypeChanged.value = true; });
 

From a02a8d48e5ec4e3d5fa31d72f81943e2185926b8 Mon Sep 17 00:00:00 2001
From: Ekaterina Volkova <ekaterina.volkova@wirenboard.com>
Date: Tue, 11 Aug 2026 11:13:40 +0000
Subject: [PATCH 4/5] Extract PaymentsInfo type, note SSR constraint at
 payments fetch

---
 common/types.ts              | 5 +++++
 components/order/Payment.vue | 4 +++-
 pages/contents/order.vue     | 5 +++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/common/types.ts b/common/types.ts
index 43edd312..ede1f903 100644
--- a/common/types.ts
+++ b/common/types.ts
@@ -129,6 +129,11 @@ export interface RecentOrg {
   address: string;
 }
 
+export interface PaymentsInfo {
+  methods: string[];
+  default: string;
+}
+
 export interface OrderInfo {
   payerType: string;
   payerData: CustomerData;
diff --git a/components/order/Payment.vue b/components/order/Payment.vue
index 430143fc..19f12d39 100644
--- a/components/order/Payment.vue
+++ b/components/order/Payment.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const props = defineProps<{ paymentsInfo: { methods: string[]; default: string } | null }>();
+import type { PaymentsInfo } from '~/common/types';
+
+const props = defineProps<{ paymentsInfo: PaymentsInfo | null }>();
 const paymentType = defineModel<string>('paymentType');
 
 const { t } = useI18n();
diff --git a/pages/contents/order.vue b/pages/contents/order.vue
index b5b196c6..bfe77ad5 100644
--- a/pages/contents/order.vue
+++ b/pages/contents/order.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Loader from '~/components/Loader.vue';
 import Button from '~/components/Button.vue';
-import type {OrderInfo} from "~/common/types";
+import type {OrderInfo, PaymentsInfo} from "~/common/types";
 
 const { t, locale } = useI18n();
 
@@ -49,7 +49,8 @@ const deliveryType = ref(orderInfo.value!.deliveryType);
 const country = ref(Number(orderInfo.value!.deliveryData.country));
 
 const paymentsParams = computed(() => ({ payerType: payerType.value, country: country.value }));
-const { data: paymentsInfo } = await useApi<{ methods: string[]; default: string }>(
+// Запрос здесь, а не в Payment.vue: paymentType должен встать до первого рендера, иначе SSR-гидрация теряет выделение.
+const { data: paymentsInfo } = await useApi<PaymentsInfo>(
   '/order/payments/',
   paymentsParams,
   { watch: [payerType, country] },

From f995baaaefb7ef20172a8307b17e72ea3b1d9d10 Mon Sep 17 00:00:00 2001
From: Ekaterina Volkova <ekaterina.volkova@wirenboard.com>
Date: Fri, 14 Aug 2026 09:45:30 +0000
Subject: [PATCH 5/5] Translate comment to English

---
 pages/contents/order.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/contents/order.vue b/pages/contents/order.vue
index bfe77ad5..a2287915 100644
--- a/pages/contents/order.vue
+++ b/pages/contents/order.vue
@@ -49,7 +49,7 @@ const deliveryType = ref(orderInfo.value!.deliveryType);
 const country = ref(Number(orderInfo.value!.deliveryData.country));
 
 const paymentsParams = computed(() => ({ payerType: payerType.value, country: country.value }));
-// Запрос здесь, а не в Payment.vue: paymentType должен встать до первого рендера, иначе SSR-гидрация теряет выделение.
+// Fetch here rather than in Payment.vue: paymentType must be set before the first render, otherwise SSR hydration loses the selection.
 const { data: paymentsInfo } = await useApi<PaymentsInfo>(
   '/order/payments/',
   paymentsParams,