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

components/HotelReservation/SelectRate/Payment/payment.module.css

@@ -1,18 +1,27 @@
-.paymentItemContainer {
-  max-width: 480px;
+.paymentContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
-  padding-bottom: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
+  max-width: 480px;
 }
 
-.paymentItem {
-  background-color: var(--Base-Background-Normal);
-  padding: var(--Spacing-x3);
-  border: 1px solid var(--Base-Border-Normal);
-  border-radius: var(--Corner-radius-Medium);
+.paymentOptionContainer {
   display: flex;
-  align-items: center;
-  gap: var(--Spacing-x2);
-  cursor: pointer;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.submitButton {
+  align-self: flex-start;
+}
+
+.paymentContainer .link {
+  font-weight: 500;
+  font-size: var(--Typography-Caption-Regular-fontSize);
+}
+
+.terms {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x-one-and-half);
 }