Add new order creation page

.gitignore

@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# AI
+.claude

assets/css/fonts.css

@@ -8,13 +8,20 @@
 @font-face {
   font-family: 'Plumb';
   src: url('/fonts/plumb-bo-webfont.woff2') format('woff2');
-  font-weight: bold;
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Plumb';
+  src: url('/fonts/plumb-me-webfont.woff2') format('woff2');
+  font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Plumb';
   src: url('/fonts/plumb-re-webfont.woff2') format('woff2');
-  font-weight: normal;
+  font-weight: 400;
   font-style: normal;
 }

common/constants.ts

@@ -1,26 +1,25 @@
 export enum ArticleType {
-    WithoutSubCategories,
-    WithSubCategories,
-    SubCategory,
+  WithoutSubCategories,
+  WithSubCategories,
+  SubCategory,
 }
 
 export enum FilterTypeKeys {
-    ByCategory = '0',
-    ByDate = '1',
+  ByCategory = '0',
+  ByDate = '1',
 }
 
 export const FilterTypeParams = {
-    [FilterTypeKeys.ByCategory]: 'filter_category',
-    [FilterTypeKeys.ByDate]: 'filter_date',
-}
+  [FilterTypeKeys.ByCategory]: 'filter_category',
+  [FilterTypeKeys.ByDate]: 'filter_date',
+};
 
 export enum FilterDateKeys {
-    ASC = '0',
-    DESC = '1',
+  ASC = '0',
+  DESC = '1',
 }
 
 export const FilterDateParams = {
-    [FilterDateKeys.ASC]: 'filter_asc',
-    [FilterDateKeys.DESC]: 'filter_desc',
-}
-
+  [FilterDateKeys.ASC]: 'filter_asc',
+  [FilterDateKeys.DESC]: 'filter_desc',
+};

common/types.ts

@@ -55,7 +55,7 @@ export interface Product {
     inv_final_assembly: number;
     inv_ready_to_assembly: number;
     inv_scheduled: number;
-  },
+  };
   options: ProductOption[];
   components: ProductOption[];
   use_cases: string[];
@@ -66,3 +66,106 @@ export type Video = [string, string, string, any?];
 export type PhotoLink = [string, string, string?, string?];
 
 export type LogoLink = [string, string, string];
+
+export enum DeliveryType {
+  Courier = 'courier',
+  Pickup = 'pickup',
+  Point = 'point',
+  Taxi = 'todoor',
+}
+
+export const RUSSIA_ID = 643;
+
+export interface AvailableDelivery {
+  id: string;
+  type: string;
+  daysMin: number | null;
+  daysMax: number | null;
+  title: string;
+  address: string | null;
+  price: number;
+  total: number;
+  error?: string | null;
+}
+
+export interface AvailableDeliveriesInfo{
+  available: AvailableDelivery[];
+  freeDelivery: boolean;
+}
+
+export interface CustomerData{
+  individual:{
+   fio: string;
+   phone: string;
+   additional: string;
+   email: string;
+   comment: string;
+  }
+  entity: {
+    inn: string;
+    orgName: string;
+    address: string;
+    email: string;
+    comment: string;
+  };
+  payerType: 'individual' | 'entity';
+}
+
+export interface RecentAddress {
+  city: string;
+  postcode: string;
+  address: string;
+}
+
+export interface RecentOrg {
+  inn: string;
+  orgName: string;
+  address: string;
+}
+
+export interface OrderInfo {
+  payerType: string;
+  payerData: CustomerData;
+  deliveryType: string;
+  deliveryData: Record<string, string>;
+  paymentType: string;
+  basketData: Record<string, number>;
+  countries: Record<number, string>;
+  cdekCountries: number[];
+  recentAddresses?: RecentAddress[];
+  recentOrgs?: RecentOrg[];
+}
+
+export interface Tariff {
+  calendar_max: number;
+  calendar_min: number;
+  delivery_date_range: { min: string; max: string };
+  delivery_mode: number;
+  delivery_sum: number;
+  period_max: number;
+  period_min: number;
+  tariff_code: number;
+  tariff_description: string;
+  tariff_name: string;
+}
+
+export interface Destination {
+  city_code: number;
+  city: string;
+  type: string;
+  postal_code: string;
+  country_code: string;
+  region: string;
+  have_cashless: boolean;
+  have_cash: boolean;
+  allowed_cod: boolean;
+  is_dressing_room: boolean;
+  code: string;
+  name: string;
+  address: string;
+  work_time: string;
+  location: [number, number];
+  weight_min: number;
+  weight_max: number;
+  dimensions: any;
+}

components/Button.vue

@@ -1,20 +1,36 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ id?: string; label: string; size?: 'default' | 'large' }>(), {
+import Spinner from 'assets/icons/spinner.svg';
+
+withDefaults(defineProps<{
+  id?: string;
+  label: string;
+  type?: 'button' | 'submit';
+  variant: 'primary' | 'secondary';
+  outlined: boolean;
+  size?: 'default' | 'large';
+  isLoading?: boolean;
+}>(), {
   size: 'default',
+  variant: 'primary',
+  type: 'button',
+  isLoading: false,
 });
 
 </script>
 
 <template>
   <button
-    type="button"
+    :type="type"
     class="wb-button"
     :class="{
       'wb-button-m': size === 'default',
       'wb-button-l': size === 'large',
+      'wb-button-primary': variant === 'primary',
+      'wb-button-outlined': outlined
     }"
     :id="id">
-    {{ label }}
+    <Spinner v-if="isLoading" class="wb-button-spinner" />
+    <span :style="isLoading ? { visibility: 'hidden' } : {}">{{ label }}</span>
   </button>
 </template>
 
@@ -24,24 +40,45 @@ withDefaults(defineProps<{ id?: string; label: string; size?: 'default' | 'large
   border-radius: 4px;
   white-space: nowrap;
   position: relative;
-  min-height: 33px;
+  min-height: 31px;
   display: inline-flex;
-  cursor: pointer;
   user-select: none;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background: var(--primary-color);
-  color: #fff;
-  border: 0;
-  transition: background 0.2s;
+  transition: background 0.3s, color 0.3s;
   font-weight: bold;
   outline: none;
   line-height: 24px;
 }
 
-.wb-button:hover {
-  background: var(--primary-color-hover);
+.wb-button:not(:disabled) {
+  cursor: pointer;
+}
+
+.wb-button:disabled {
+  filter: opacity(0.5);
+}
+
+.wb-button-primary {
+  background: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  color: #fff;
+}
+
+.wb-button-primary:hover {
+  background: var(--primary-color-hover) !important;
+  color: #fff !important;
+}
+
+.wb-button-primary.wb-button-outlined {
+  background: transparent;
+  color: var(--primary-color)
+}
+
+.wb-button-primary.wb-button-outlined {
+  background: transparent;
+  color: var(--primary-color)
 }
 
 .wb-button-m {
@@ -53,4 +90,20 @@ withDefaults(defineProps<{ id?: string; label: string; size?: 'default' | 'large
   padding: 12px 24px;
   font-size: 18px;
 }
+
+.wb-button-spinner {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  animation: spin 1s linear infinite;
+}
+
+.wb-button-primary .wb-button-spinner {
+  color: #fff;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
 </style>