@qite/tide-components 1.0.14-preview.2 → 1.0.14-preview.4

package/build/build-esm/src/content/agent-entries/agent-entries-services.d.ts

@@ -0,0 +1,18 @@
+import { AgentPrintAction, CustomEntryStatusItem, DossierViewResult, FilterItem, NumberStringPair, PageResult, TideClientConfig } from '@qite/tide-client';
+import { AgentEntriesColumn, AgentEntriesSort } from './types';
+/** Agent endpoints need the member token, fall back to the one the Login component stored. */
+export declare const withAgentToken: (config: TideClientConfig) => TideClientConfig;
+/** False when the token is not a JWT or has expired. */
+export declare const isAgentTokenValid: (token?: string) => boolean;
+export declare const isUnauthorizedError: (error: unknown, token?: string) => boolean;
+export interface AgentEntriesLookups {
+    entryStatuses: NumberStringPair[];
+    customEntryStatuses: CustomEntryStatusItem[];
+    printActions: AgentPrintAction[];
+}
+export declare const fetchLookups: (config: TideClientConfig, languageCode: string, signal: AbortSignal) => Promise<AgentEntriesLookups>;
+/** Converts the raw filter inputs to the OData column filters understood by tide-client's createParams. */
+export declare const buildFilterItem: (columns: AgentEntriesColumn[], filterValues: Record<string, string>, sort: AgentEntriesSort, page: number, take: number) => FilterItem;
+export declare const fetchEntries: (config: TideClientConfig, filter: FilterItem, signal: AbortSignal) => Promise<PageResult<DossierViewResult>>;
+/** Prints the entry and returns an object url to the resulting pdf. */
+export declare const printEntry: (config: TideClientConfig, printActionId: number, entryId: number) => Promise<string>;

package/build/build-esm/src/content/agent-entries/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AgentEntriesProps } from './types';
+declare const AgentEntries: React.FC<AgentEntriesProps>;
+export default AgentEntries;

package/build/build-esm/src/content/agent-entries/types.d.ts

@@ -0,0 +1,27 @@
+import { TideClientConfig } from '@qite/tide-client';
+export interface AgentEntriesProps {
+    /** Tide connection. When no `token` is set, the agent token saved by the Login component (session/localStorage 'token') is used. */
+    tideClientConfig: TideClientConfig;
+    languageCode: string;
+    /** Title above the table, defaults to the translated "Bookings". */
+    title?: string;
+    /** Initial number of rows per page, defaults to 20. */
+    pageSize?: number;
+    /** Partial translation overrides, deep-merged over the built-in AGENT_ENTRIES translations. */
+    customTranslations?: any;
+    /** When set, a login button is shown when no agent is logged in or the session expired. */
+    onLogin?: () => void;
+    /** Called when the API rejects the agent token (e.g. expired). */
+    onUnauthorized?: () => void;
+}
+export type AgentEntriesColumnKind = 'text' | 'date' | 'number' | 'status' | 'customStatus';
+export interface AgentEntriesColumn {
+    /** OData field name on the entry list (DossierViewResult). */
+    id: string;
+    kind: AgentEntriesColumnKind;
+    label: string;
+}
+export interface AgentEntriesSort {
+    name: string;
+    asc: boolean;
+}

package/build/build-esm/src/content/navbar/types.d.ts

@@ -29,4 +29,5 @@ export interface NavbarProps {
     member?: MemberInfo;
     onLogin?: () => void;
     onLogout?: () => void;
+    onMyBookings?: () => void;
 }

package/build/build-esm/src/index.d.ts

@@ -8,6 +8,7 @@ import TideForm from './form';
 import SearchResults from './search-results';
 import ImageCardGrid from './content/image-card-grid';
 import Login from './content/login';
+import AgentEntries from './content/agent-entries';
 import ImageWithTextSection from './content/image-with-text-section';
 import Slider from './content/components/slider';
 import PhotoGallery from './content/components/gallery';
@@ -21,9 +22,10 @@ export * from './content/header/types';
 export * from './content/footer/types';
 export * from './content/image-card-grid/types';
 export * from './content/login/types';
+export * from './content/agent-entries/types';
 export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
 export * from './content/featured-trips/types';
-export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, ImageWithTextSection, Slider, PhotoGallery, Breadcrumbs, FAQ, FeaturedTrips, Spinner, ItineraryMapView, TideForm };
+export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, AgentEntries, ImageWithTextSection, Slider, PhotoGallery, Breadcrumbs, FAQ, FeaturedTrips, Spinner, ItineraryMapView, TideForm };

package/build/build-esm/src/search-results/store/search-results-slice.d.ts

@@ -42,6 +42,8 @@ export interface SearchResultsState {
     trajectNodeAvailability: Record<string, TrajectNodeAvailability>;
     /** Per-flight-node one-way search results, keyed by the entry line guid. */
     trajectFlightAvailability: Record<string, TrajectFlightAvailability>;
+    /** Per-connecting-node transfer, keyed by the node id. */
+    trajectTransferAvailability: Record<number, TrajectTransferAvailability>;
     trajectDaySuggestions: Record<number, TrajectDaySuggestions>;
     trajectEditLineGuid: string | null;
     trajectActivitiesDayOrder: number | null;
@@ -67,6 +69,11 @@ export interface TrajectFlightAvailability {
     results: PackagingFlightResponse[];
     selectedGuid: string | null;
 }
+export interface TrajectTransferAvailability {
+    nodeId: number;
+    status: TrajectNodeStatus;
+    result: PackagingAccommodationResponse | null;
+}
 export declare const setResults: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingPackageItem[], "searchResults/setResults">, setFilteredResults: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingPackageItem[], "searchResults/setFilteredResults">, setSelectedSearchResult: import("@reduxjs/toolkit").ActionCreatorWithPayload<BookingPackageItem | null, "searchResults/setSelectedSearchResult">, setPackagingAccoResults: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingAccommodationResponse[], "searchResults/setPackagingAccoResults">, setFilteredPackagingAccoResults: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingAccommodationResponse[], "searchResults/setFilteredPackagingAccoResults">, setFilteredPackagingFlightResults: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingFlightResponse[], "searchResults/setFilteredPackagingFlightResults">, setPackagingAccoSearchDetails: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingAccommodationResponse[], "searchResults/setPackagingAccoSearchDetails">, setSelectedPackagingAccoResult: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setSelectedPackagingAccoResult">, setPackagingFlightResults: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingFlightResponse[], "searchResults/setPackagingFlightResults">, setSelectedPackagingFlight: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingFlightResponse | null, "searchResults/setSelectedPackagingFlight">, setSelectedFlight: import("@reduxjs/toolkit").ActionCreatorWithPayload<ExtendedFlightSearchResponseItem | null, "searchResults/setSelectedFlight">, setSelectedFlightDetails: import("@reduxjs/toolkit").ActionCreatorWithPayload<ExtendedFlightSearchResponseItem | null, "searchResults/setSelectedFlightDetails">, setBookingPackageDetails: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     details: BookingPackage;
 }, "searchResults/setBookingPackageDetails">, selectFlight: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
@@ -88,17 +95,23 @@ export declare const setResults: import("@reduxjs/toolkit").ActionCreatorWithPay
 }, "searchResults/setTrajectNodeAvailability">, setTrajectNodeSelection: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     lineGuid: string;
     code: string;
-}, "searchResults/setTrajectNodeSelection">, setTrajectResolving: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "searchResults/setTrajectResolving">, setTrajectItineraryView: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "searchResults/setTrajectItineraryView">, setTrajectFlightLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "searchResults/setTrajectFlightLoading">, setTrajectFlightAvailability: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+}, "searchResults/setTrajectNodeSelection">, clearTrajectNodeSelection: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "searchResults/clearTrajectNodeSelection">, setTrajectResolving: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "searchResults/setTrajectResolving">, setTrajectItineraryView: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "searchResults/setTrajectItineraryView">, setTrajectFlightLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "searchResults/setTrajectFlightLoading">, setTrajectFlightAvailability: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     lineGuid: string;
     results: PackagingFlightResponse[];
     selectedGuid: string | null;
 }, "searchResults/setTrajectFlightAvailability">, setTrajectFlightSelection: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     lineGuid: string;
     guid: string;
-}, "searchResults/setTrajectFlightSelection">, setTrajectEditLineGuid: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setTrajectEditLineGuid">, setTrajectActivitiesDayOrder: import("@reduxjs/toolkit").ActionCreatorWithPayload<number | null, "searchResults/setTrajectActivitiesDayOrder">, setTrajectDaySuggestionsLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "searchResults/setTrajectDaySuggestionsLoading">, setTrajectDaySuggestions: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+}, "searchResults/setTrajectFlightSelection">, clearTrajectFlightSelection: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "searchResults/clearTrajectFlightSelection">, setTrajectTransferLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "searchResults/setTrajectTransferLoading">, setTrajectTransferAvailability: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    nodeId: number;
+    result: PackagingAccommodationResponse | null;
+}, "searchResults/setTrajectTransferAvailability">, setTrajectEditLineGuid: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setTrajectEditLineGuid">, setTrajectActivitiesDayOrder: import("@reduxjs/toolkit").ActionCreatorWithPayload<number | null, "searchResults/setTrajectActivitiesDayOrder">, setTrajectDaySuggestionsLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "searchResults/setTrajectDaySuggestionsLoading">, setTrajectDaySuggestions: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     dayOrder: number;
     results: PackagingAccommodationResponse[];
-}, "searchResults/setTrajectDaySuggestions">, addEditableEntryLines: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingEntryLine[], "searchResults/addEditableEntryLines">, updateTrajectNodeResult: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+}, "searchResults/setTrajectDaySuggestions">, addEditableEntryLines: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingEntryLine[], "searchResults/addEditableEntryLines">, upsertEditableEntryLines: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingEntryLine[], "searchResults/upsertEditableEntryLines">, removeTrajectNode: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    nodeId: number;
+    lineGuids: string[];
+}, "searchResults/removeTrajectNode">, updateTrajectNodeResult: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     lineGuid: string;
     result: PackagingAccommodationResponse;
 }, "searchResults/updateTrajectNodeResult">, resetTrajectAvailability: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"searchResults/resetTrajectAvailability">, updateEditableEntryLine: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingEntryLine, "searchResults/updateEditableEntryLine">, removeEditableEntryLines: import("@reduxjs/toolkit").ActionCreatorWithPayload<string[], "searchResults/removeEditableEntryLines">;

package/build/build-esm/src/search-results/utils/traject-utils.d.ts

@@ -1,4 +1,4 @@
-import { FlightSearchRequest, TideClientConfig, PackagingAccommodationRequest, PackagingAccommodationResponse, PackagingDestination, PackagingEntry, PackagingEntryLine, PackagingFlightResponse, PackagingRoom, PackagingTrajectAlternative, PackagingTrajectNode, PackagingTrajectResponse } from '@qite/tide-client';
+import { FlightSearchRequest, TideClientConfig, PackagingAccommodationRequest, PackagingAccommodationResponse, PackagingDestination, PackagingEntry, PackagingEntryLine, PackagingFlightResponse, PackagingRoom, PackagingTrajectAlternative, PackagingTrajectNode, PackagingTrajectResponse, PackagingTransferRequest } from '@qite/tide-client';
 import { SearchResultsConfiguration } from '../types';
 export declare const REGULAR_TRAJECT_NODE_TYPE = 0;
 export declare const CONNECTING_TRAJECT_NODE_TYPE = 1;
@@ -10,6 +10,12 @@ export interface TrajectNodeWithLine {
 export declare const isSearchableTrajectNode: (node: PackagingTrajectNode) => boolean;
 export declare const isTrajectFlightNode: (node: PackagingTrajectNode) => boolean;
 export declare const getTrajectNodesWithLines: (trajectEntry: PackagingTrajectResponse) => TrajectNodeWithLine[];
+export declare const TRANSFER_SERVICE_TYPE = 13;
+export declare const canRemoveTrajectNode: (node: PackagingTrajectNode) => boolean;
+export declare const getDroppedTrajectNodeIds: (trajectEntry: PackagingTrajectResponse, entry: PackagingEntry | null | undefined) => Set<number>;
+export declare const isTrajectTransferNode: (node: PackagingTrajectNode) => boolean;
+export declare const buildTrajectTransferRequest: (node: PackagingTrajectNode, context: TrajectSearchContext) => PackagingTransferRequest;
+export declare const buildTrajectTransferLine: (node: PackagingTrajectNode, result: PackagingAccommodationResponse) => PackagingEntryLine | null;
 export declare const hasDestination: (destination: PackagingDestination | null) => boolean;
 export interface TrajectSearchContext {
     transactionId: string;

package/build/build-esm/src/shared/booking/travelers-form.d.ts

@@ -41,6 +41,8 @@ export interface SharedTravelersFormProps {
 }
 export declare function isBabyAge(age?: number | null, maxBabyAge?: number): boolean;
 export declare function formatBirthDate(birthDate?: string): string;
+export declare function hasConfiguredBuiltInPaxFields(paxFields?: BookingPackagePaxFieldConfig[]): boolean;
+export declare function hasConfiguredMainBookerFields(paxFields?: BookingPackagePaxFieldConfig[]): boolean;
 export declare function buildEmptyCustomFields(paxFields?: BookingPackagePaxFieldConfig[]): BookingPackageCustomField[];
 export declare function getApplicablePaxCustomFields(paxFields: BookingPackagePaxFieldConfig[] | undefined, isMainBooker: boolean): BookingPackagePaxFieldConfig[];
 export declare function getApplicableBuiltInPaxFields(paxFields: BookingPackagePaxFieldConfig[] | undefined, isMainBooker: boolean): BookingPackagePaxFieldConfig[];
@@ -48,6 +50,10 @@ export declare function getBuiltInPaxField(paxFields: BookingPackagePaxFieldConf
 export declare const BUILT_IN_FIELD_PATHS: Record<string, string>;
 export declare const CORE_FIELD_NAMES: Set<string>;
 export declare const ADDRESS_FIELD_NAMES: string[];
+export declare function getBuiltInFieldControlMeta(translations: any): Record<string, {
+    type?: string;
+    label: string;
+}>;
 export declare function applyTravelerToPax<T extends BookingPackagePax>(pax: T, traveler: Traveler, mainBookerId?: number): T;
 export declare function createTraveler(traveler: RoomTraveler, followNumber: {
     number: number;
@@ -56,7 +62,7 @@ export declare function createInitialValuesFromRooms(formRooms: {
     adults: RoomTraveler[];
     children: RoomTraveler[];
 }[], startDate?: string, endDate?: string, agentAdressId?: number, personTranslation?: string, isCompact?: boolean, maxBabyAge?: number, paxFields?: BookingPackagePaxFieldConfig[]): TravelersFormValues;
-export declare function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry: PackagingEntry, agentAdressId?: number): TravelersFormValues;
+export declare function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry: PackagingEntry, agentAdressId?: number, paxFields?: BookingPackagePaxFieldConfig[]): TravelersFormValues;
 export declare function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry: PackagingEntry, values: TravelersFormValues): {
     pax: PackagingEntryPax[];
     address: {
@@ -67,8 +73,8 @@ export declare function applyTravelersFormValuesToEditablePackagingEntry(editabl
         place: string;
         country: string;
         travelAgentId: number;
-        phone: string;
-        email: string;
+        phone: string | undefined;
+        email: string | undefined;
         remarks?: string;
     };
     language?: string;
@@ -81,6 +87,9 @@ export declare function applyTravelersFormValuesToEditablePackagingEntry(editabl
     rooms: import("@qite/tide-client").PackagingEntryRoom[];
     paxFields: BookingPackagePaxFieldConfig[];
     lines: import("@qite/tide-client").PackagingEntryLine[];
+    trajectId?: number | null;
+    trajectStartDate?: string | null;
+    removedTrajectNodeIds?: number[] | null;
     status: import("@qite/tide-client").EntryStatus;
     customStatusId?: number;
     redirectUrl?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-components",
-  "version": "1.0.14-preview.2",
+  "version": "1.0.14-preview.4",
   "description": "React components for Tide (booking, product availability, form, ...)",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^2.0.21-preview.2",
+    "@qite/tide-client": "^2.0.21-preview.4",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/styles/components/_agent-entries.scss

@@ -0,0 +1,336 @@
+@use '../components/mixins' as mixins;
+
+.agent-entries {
+  @include mixins.container-wide();
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 30px;
+  padding-bottom: 60px;
+  color: var(--tide-booking-text-dark);
+
+  &__title {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 400;
+  }
+
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  &__icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  &__card {
+    background-color: var(--tide-booking-white);
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+    transition: opacity 0.2s ease;
+
+    &--loading {
+      opacity: 0.6;
+    }
+  }
+
+  &__table-wrapper {
+    overflow-x: auto;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--tide-booking-font-size-body);
+
+    th,
+    td {
+      padding: 8px 7px;
+      text-align: left;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
+
+    thead th {
+      font-weight: 600;
+      border-bottom: 1px solid var(--tide-booking-gray-background-light);
+    }
+  }
+
+  &__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 0;
+    border: none;
+    background: none;
+    font: inherit;
+    font-weight: 600;
+    color: inherit;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--tide-booking-color-primary);
+    }
+  }
+
+  &__sort-icon {
+    width: 9px;
+    height: 12px;
+
+    &--desc {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__filter-row th {
+    font-weight: 400;
+  }
+
+  // Nested under the row to win over the generic `#tide-content input` rules.
+  &__filter-row .agent-entries__filter {
+    width: 100%;
+    min-width: 90px;
+    height: 34px;
+    min-height: 34px;
+    padding: 4px 8px;
+    border: 1px solid var(--tide-booking-gray-medium);
+    border-radius: 4px;
+    background-color: var(--tide-booking-white);
+    font: inherit;
+    color: inherit;
+
+    &:focus {
+      outline: none;
+      border-color: var(--tide-booking-color-primary);
+    }
+  }
+
+  &__row {
+    background-color: var(--tide-booking-gray-xlight);
+
+    td {
+      border-bottom: 1px solid var(--tide-booking-gray-background-light);
+    }
+
+    &:hover,
+    &--expanded {
+      background-color: var(--tide-booking-color-primary-extra-fade);
+    }
+  }
+
+  &__table td.agent-entries__cell--date,
+  &__table td.agent-entries__cell--number {
+    text-align: right;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 6px;
+  }
+
+  &__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background-color: var(--tide-booking-gray--medium-light);
+    color: var(--tide-booking-black);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--tide-booking-gray-background-light);
+    }
+
+    &--primary {
+      background-color: var(--tide-booking-color-primary);
+      color: var(--tide-booking-white);
+
+      &:hover {
+        background-color: var(--tide-booking-color-primary-dark);
+      }
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: progress;
+    }
+  }
+
+  &__empty {
+    padding: 24px 12px !important;
+    text-align: center !important;
+    color: var(--tide-booking-text-medium);
+  }
+
+  &__details-row > td {
+    padding: 0 !important;
+    white-space: normal !important;
+    border-bottom: 1px solid var(--tide-booking-gray-background-light);
+    background-color: var(--tide-booking-white);
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px 20px;
+
+    &__list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 12px 24px;
+      margin: 0;
+    }
+
+    &__item {
+      dt {
+        font-size: 12px;
+        color: var(--tide-booking-text-medium);
+        margin-bottom: 4px;
+      }
+
+      dd {
+        margin: 0;
+        line-height: 1.4;
+      }
+    }
+
+    &__prints {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      &__title {
+        font-size: 12px;
+        color: var(--tide-booking-text-medium);
+      }
+
+      &__buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+    }
+  }
+
+  &__print-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border: 1px solid var(--tide-booking-gray-medium);
+    border-radius: 4px;
+    background-color: var(--tide-booking-white);
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--tide-booking-color-primary);
+      color: var(--tide-booking-color-primary);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: progress;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 14px;
+    padding: 14px;
+    background-color: var(--tide-booking-gray-xlight);
+    font-size: 13px;
+  }
+
+  &__footer .agent-entries__page-size {
+    height: 36px;
+    min-height: 36px;
+    padding: 4px 8px;
+    border: 1px solid var(--tide-booking-gray-medium);
+    border-radius: 4px;
+    background-color: var(--tide-booking-white);
+    font: inherit;
+    font-size: 15px;
+    color: inherit;
+  }
+
+  &__pager {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: auto;
+
+    &__button {
+      padding: 6px 12px;
+      border: 1px solid var(--tide-booking-gray-medium);
+      border-radius: 4px;
+      background-color: var(--tide-booking-white);
+      font: inherit;
+      color: inherit;
+      cursor: pointer;
+
+      &:hover:not(:disabled) {
+        border-color: var(--tide-booking-color-primary);
+        color: var(--tide-booking-color-primary);
+      }
+
+      &:disabled {
+        opacity: 0.4;
+        cursor: default;
+      }
+    }
+  }
+
+  &__message {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 24px;
+    background-color: var(--tide-booking-white);
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+
+    p {
+      margin: 0;
+    }
+  }
+
+  &__error {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 14px;
+    border-radius: 4px;
+    background-color: var(--tide-booking-invalid-light);
+    color: var(--tide-booking-invalid-dark);
+
+    &__close {
+      border: none;
+      background: none;
+      font-size: 18px;
+      line-height: 1;
+      color: inherit;
+      cursor: pointer;
+    }
+  }
+}

package/styles/content-blocks.scss

@@ -24,6 +24,7 @@ body {
   @import './components/gallery';
   @import './components/faq';
   @import './components/login';
+  @import './components/agent-entries';
   @import './components/accordion';
   @import './components/footer';
   @import './components/error';