diff --git a/apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx index 99d0d7f8c..a778bf8e5 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/EditBookingPage.tsx @@ -53,6 +53,7 @@ import { type BookingFormValues, } from "./new-booking-form/schema"; import { SelectField } from "./new-booking-form/shared"; +import { PaymentCurrencyField } from "./new-booking-form/payment-currency-field"; import { Step5CargoDetails, StepScheduling } from "./new-booking-form/steps"; const EDIT_SECTIONS = [ @@ -137,6 +138,8 @@ function mapBookingToFormValues( isRefrigerated: booking.isRefrigerated ?? false, shippingLine: (booking as any).shippingLine?.name ?? "", consolidationEnabled: booking.allowConsolidation ?? false, + paymentCurrency: + booking.paymentCurrency === "ETB" ? "ETB" : "USD", scheduledDate: booking.scheduledDate ? new Date(booking.scheduledDate).toISOString().slice(0, 10) : "", @@ -426,7 +429,7 @@ export default function EditBookingPage() { cargoTypeId: data.cargoType === "container" ? undefined : cargoTypeId, cargoTotalWeightVgm: totalWeight, isHazardous: data.isHazardous, - paymentCurrency: "USD", + paymentCurrency: data.paymentCurrency, allowConsolidation: data.consolidationEnabled, freightType: data.cargoType === "container" @@ -607,6 +610,8 @@ export default function EditBookingPage() { /> + + {(selectedService?.includesFirstMile || selectedService?.includesLastMile || selectedService?.includesCustoms) && ( diff --git a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx index 16c948f0b..fd068e8ef 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx @@ -274,7 +274,7 @@ export default function NewBookingPage() { data.equipmentReturn === "with_return" ? "WITH_RETURN" : "WITHOUT_RETURN", - paymentCurrency: "USD", + paymentCurrency: data.paymentCurrency, originYardId: data.originYard, destinationYardId: data.destinationYard, tradeDirection: direction!, diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/payment-currency-field.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/payment-currency-field.tsx new file mode 100644 index 000000000..c11620d4f --- /dev/null +++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/payment-currency-field.tsx @@ -0,0 +1,59 @@ +import { Box, Text } from "@mantine/core"; +import { Banknote, DollarSign } from "lucide-react"; +import { Controller, type Control } from "react-hook-form"; +import { + PAYMENT_CURRENCY_OPTIONS, + type BookingFormInputValues, + type BookingFormValues, + type PaymentCurrency, +} from "./schema"; +import { OptionCard, OptionFieldError, StepLabel } from "./shared"; + +const CURRENCY_ICONS: Record< + PaymentCurrency, + { icon: typeof DollarSign; bg: string; color: string } +> = { + USD: { icon: DollarSign, bg: "#EEF0FB", color: "#4F46E5" }, + ETB: { icon: Banknote, bg: "#ECF6F1", color: "#0A6F4D" }, +}; + +export function PaymentCurrencyField({ + control, +}: { + control: Control; +}) { + return ( + + Payment currency + + Choose the currency for your freight quote and invoices. + + ( +
+
+ {PAYMENT_CURRENCY_OPTIONS.map((option) => { + const Icon = CURRENCY_ICONS[option.value].icon; + return ( + field.onChange(option.value)} + icon={} + iconBg={CURRENCY_ICONS[option.value].bg} + iconColor={CURRENCY_ICONS[option.value].color} + title={option.label} + description={option.description} + /> + ); + })} +
+ +
+ )} + /> +
+ ); +} diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts index 7bc6666dc..ea4b1214a 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts +++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts @@ -61,11 +61,32 @@ export const BOOKING_DOCS_SETTING: Freight.IFileUploadSetting = { export type BookingDocuments = Record; +export const PAYMENT_CURRENCIES = ["USD", "ETB"] as const; +export type PaymentCurrency = (typeof PAYMENT_CURRENCIES)[number]; + +export const PAYMENT_CURRENCY_OPTIONS: Array<{ + value: PaymentCurrency; + label: string; + description: string; +}> = [ + { + value: "USD", + label: "USD", + description: "US Dollar — international pricing and invoicing.", + }, + { + value: "ETB", + label: "ETB", + description: "Ethiopian Birr — local pricing and invoicing.", + }, +]; + export const bookingFormSchema = z .object({ contractType: z.enum(["new", "renewal"], "Select a contract type."), previousContractRef: z.string(), serviceTypeId: z.string("Select a service type."), + paymentCurrency: z.enum(PAYMENT_CURRENCIES, "Select a payment currency."), firstMile: z .object({ @@ -200,6 +221,7 @@ export const initialBookingFormValues: DeepPartial = { previousContractRef: "", serviceTypeId: "", + paymentCurrency: "USD", firstMile: { enabled: false, pickUpAddress: "", @@ -230,6 +252,7 @@ export const stepFields: Record>> = { 1: ["contractType", "previousContractRef"], 2: [ "serviceTypeId", + "paymentCurrency", "firstMile", "lastMile", "equipmentReturn", diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx index e8edc5e5e..b53571c03 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx @@ -12,6 +12,7 @@ import { StepHeader, StepLabel, } from "./shared"; +import { PaymentCurrencyField } from "./payment-currency-field"; import type { Freight } from "@edr/types"; @@ -102,6 +103,8 @@ export function Step2ServiceType({ )} /> + + {showServiceSections && ( Trucking & customs options diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx index 255eea380..ae7cddf4f 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx @@ -248,6 +248,10 @@ export function Step8Review({ )} +