Merged in feat/SW-459-payment-flow-ui-ux (pull request #657)

Feat/SW-459 payment flow ui ux

* feat(SW-431): List payment methods and handle booking status and redirection

* feat(SW-431): small fix

* fix(SW-431): Added intl string and sorted dictionaries

* fix(SW-431): add todo comments

* feat(SW-459): Added payment method icons

* feat(SW-459): refactored into new component and added form

* feat(SW-459): Localized strings

* feat(SW-459): added checkbox

* feat(SW-459): Refactored payment options and updated payment form

* feat(SW-459): update input bg color

* feat(SW-459): add current web links and style fixes

* fix(SW-459): fix issue with booking confirmation not being accessible

* feat(SW-459): style changes

* feat(SW-459): update max width of payment container

* feat(SW-459): update create booking schema

* feat(SW-459): fixes from PR


Approved-by: Arvid Norlin

constants/booking.ts

@@ -5,3 +5,48 @@ export enum BookingStatusEnum {
 }
 
 export const BOOKING_CONFIRMATION_NUMBER = "bookingConfirmationNumber"
+
+export enum PaymentMethodEnum {
+  card = "card",
+  swish = "swish",
+  vipps = "vipps",
+  mobilePay = "mobilePay",
+  applePay = "applePay",
+  googlePay = "googlePay",
+  alipayPlus = "alipayPlus",
+  weChatPay = "weChatPay",
+  payPal = "payPal",
+  klarna = "klarna",
+}
+
+export const PAYMENT_METHOD_TITLES: Record<
+  keyof typeof PaymentMethodEnum,
+  string
+> = {
+  card: "Credit card",
+  swish: "Swish",
+  vipps: "Vipps",
+  mobilePay: "MobilePay",
+  applePay: "Apple Pay",
+  googlePay: "Google Pay",
+  alipayPlus: "Alipay+",
+  weChatPay: "WeChat Pay",
+  payPal: "PayPal",
+  klarna: "Klarna",
+}
+
+export const PAYMENT_METHOD_ICONS: Record<
+  keyof typeof PaymentMethodEnum,
+  string
+> = {
+  card: "/_static/icons/payment/mastercard.svg",
+  swish: "/_static/icons/payment/swish.svg",
+  vipps: "/_static/icons/payment/vipps.svg",
+  mobilePay: "/_static/icons/payment/mobilepay.svg",
+  applePay: "/_static/icons/payment/apple-pay.svg",
+  googlePay: "/_static/icons/payment/google-pay.svg",
+  alipayPlus: "/_static/icons/payment/alipay-plus.svg",
+  weChatPay: "/_static/icons/payment/wechat-pay.svg",
+  payPal: "/_static/icons/payment/paypal.svg",
+  klarna: "/_static/icons/payment/klarna.svg",
+}

constants/currentWebHrefs.ts

@@ -0,0 +1,17 @@
+export const bookingTermsAndConditions = {
+  da: "https://www.scandichotels.dk/kundeservice/priser-og-bookingvilkar/vilkar-og-betingelser3",
+  de: "https://www.scandichotels.de/kundenbetreuung/preise-und-richtlinien/reservierungsbedingungen",
+  en: "https://www.scandichotels.com/customer-service/rates-and-policies/terms-conditions",
+  fi: "https://www.scandichotels.fi/asiakaspalvelu/hinnat-ja-varausehdot/varausehdot",
+  no: "https://www.scandichotels.no/kundeservice/priser-og-bestillingsvilkar/reservasjonsbetingelser",
+  sv: "https://www.scandichotels.se/kundservice/priser-och-bokningsregler/bokningsregler",
+}
+
+export const privacyPolicy = {
+  da: "https://www.scandichotels.dk/kundeservice/priser-og-bookingvilkar/persondatapolitik",
+  de: "https://www.scandichotels.de/kundenbetreuung/preise-und-richtlinien/reservierungsbedingungen",
+  en: "https://www.scandichotels.com/customer-service/rates-and-policies/privacy-policy",
+  fi: "https://www.scandichotels.fi/asiakaspalvelu/hinnat-ja-varausehdot/tietosuojaseloste",
+  no: "https://www.scandichotels.no/kundeservice/priser-og-bestillingsvilkar/personvernpolicy",
+  sv: "https://www.scandichotels.se/kundservice/priser-och-bokningsregler/integritetspolicy",
+}

constants/routes/hotelReservation.js

@@ -49,7 +49,7 @@ export const details = {
 }
 
 // TODO: Translate paths
-export const payments = {
+export const payment = {
   en: `${hotelReservation.en}/payment`,
   sv: `${hotelReservation.sv}/payment`,
   no: `${hotelReservation.no}/payment`,
@@ -68,24 +68,14 @@ export const selectHotelMap = {
   de: `${selectHotel.de}/map`,
 }
 
-/** @type {import('@/types/routes').LangRoute} */
-export const payment = {
-  en: `${hotelReservation.en}/payment`,
-  sv: `${hotelReservation.sv}/betalning`,
-  no: `${hotelReservation.no}/betaling`,
-  fi: `${hotelReservation.fi}/maksu`,
-  da: `${hotelReservation.da}/payment`,
-  de: `${hotelReservation.de}/bezahlung`,
-}
-
 /** @type {import('@/types/routes').LangRoute} */
 export const bookingConfirmation = {
   en: `${hotelReservation.en}/booking-confirmation`,
-  sv: `${hotelReservation.sv}/bokningsbekraftelse`,
+  sv: `${hotelReservation.sv}/booking-confirmation`,
   no: `${hotelReservation.no}/booking-confirmation`,
-  fi: `${hotelReservation.fi}/varausvahvistus`,
+  fi: `${hotelReservation.fi}/booking-confirmation`,
   da: `${hotelReservation.da}/booking-confirmation`,
-  de: `${hotelReservation.de}/buchungsbesttigung`,
+  de: `${hotelReservation.de}/booking-confirmation`,
 }
 
 export const bookingFlow = [
@@ -93,6 +83,7 @@ export const bookingFlow = [
   ...Object.values(selectBed),
   ...Object.values(breakfast),
   ...Object.values(details),
-  ...Object.values(payments),
+  ...Object.values(payment),
   ...Object.values(selectHotelMap),
+  ...Object.values(bookingConfirmation),
 ]