Merged in fix/BOOK-529-my-stay-guarantee (pull request #3282)

fix(BOOK-529): add card icon to payment cards, show scrollbar, add missing text

* fix(BOOK-529): add card icon to payment cards, show scrollbar, add missing text

* fix(BOOK-529): refactor savdecard

* fix(BOOK-529): fix lokaliseid

* fix(BOOK-529): paymentmethods


Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/index.tsx

@@ -64,8 +64,9 @@ export function ConfirmBookingPaymentOptions({
 
             {savedCreditCards.map((savedCreditCard) => (
               <PaymentOption
+                type={savedCreditCard.cardType as PaymentMethodEnum}
                 key={savedCreditCard.id}
-                value={savedCreditCard.id as PaymentMethodEnum}
+                value={savedCreditCard.id}
                 label={
                   PAYMENT_METHOD_TITLES[
                     savedCreditCard.cardType as PaymentMethodEnum
@@ -86,6 +87,7 @@ export function ConfirmBookingPaymentOptions({
           </>
         ) : null}
         <PaymentOption
+          type={PaymentMethodEnum.card}
           value={PaymentMethodEnum.card}
           label={intl.formatMessage({
             id: "common.creditCard",
@@ -96,6 +98,7 @@ export function ConfirmBookingPaymentOptions({
         {!hasMixedRates
           ? availablePaymentOptions.map((paymentMethod) => (
               <PaymentOption
+                type={paymentMethod}
                 key={paymentMethod}
                 value={paymentMethod}
                 label={PAYMENT_METHOD_TITLES[paymentMethod]}

packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx

@@ -9,14 +9,16 @@ import { PaymentMethodIcon } from '../../Payment/PaymentMethodIcon'
 import { Typography } from '../../Typography'
 
 export type PaymentOptionProps = {
-  value: PaymentMethodEnum
+  value: string
   label: string
+  type: PaymentMethodEnum
   cardNumber?: string
   hideRadioButton?: boolean
 }
 export function PaymentOption({
   value,
   label,
+  type,
   cardNumber,
   hideRadioButton = false,
 }: PaymentOptionProps) {
@@ -40,16 +42,15 @@ export function PaymentOption({
               <Label>{label}</Label>
             </Typography>
           </div>
-          {cardNumber ? (
-            <>
+          <div className={styles.cardContainer}>
+            {cardNumber && (
               <Typography variant={'Body/Supporting text (caption)/smRegular'}>
                 {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                 <span>•••• {cardNumber}</span>
               </Typography>
-            </>
-          ) : (
-            <PaymentMethodIcon paymentMethod={value} alt={label} />
-          )}
+            )}
+            <PaymentMethodIcon paymentMethod={type} alt={label} />
+          </div>
         </>
       )}
     </Radio>

packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx

@@ -22,15 +22,21 @@ export const Default: Story = {
     onChange: fn(),
     children: (
       <>
-        <PaymentOption label="Visa" value={PaymentMethodEnum.visa} />
+        <PaymentOption
+          label="Visa"
+          value={PaymentMethodEnum.visa}
+          type={PaymentMethodEnum.visa}
+        />
         <PaymentOption
           label="American Express"
           value={PaymentMethodEnum.americanExpress}
+          type={PaymentMethodEnum.americanExpress}
         />
         <PaymentOption
           label="MasterCard"
           value={PaymentMethodEnum.masterCard}
           cardNumber="1234"
+          type={PaymentMethodEnum.masterCard}
         />
       </>
     ),

packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css

@@ -11,6 +11,12 @@
   cursor: pointer;
 }
 
+.cardContainer {
+  display: flex;
+  gap: var(--Space-x15);
+  align-items: center;
+}
+
 .paymentOption.focused {
   outline: 2px solid var(--UI-Input-Controls-Border-Focus);
   outline-offset: 2px;

packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx

@@ -9,7 +9,7 @@ import styles from './selectPaymentMethod.module.css'
 
 import {
   PAYMENT_METHOD_TITLES,
-  type PaymentMethodEnum,
+  PaymentMethodEnum,
 } from '@scandic-hotels/common/constants/paymentMethod'
 
 type PaymentMethod = {
@@ -79,8 +79,9 @@ export function SelectPaymentMethod({
 
           return (
             <PaymentOption
+              type={paymentMethods.cardType}
               key={paymentMethods.id}
-              value={paymentMethods.id as PaymentMethodEnum}
+              value={paymentMethods.id}
               label={label}
               cardNumber={paymentMethods.truncatedNumber}
             />
@@ -90,7 +91,8 @@ export function SelectPaymentMethod({
           <span>{otherCardLabel}</span>
         </Typography>
         <PaymentOption
-          value={PAYMENT_METHOD_TITLES.card as PaymentMethodEnum}
+          value={PaymentMethodEnum.card}
+          type={PaymentMethodEnum.card}
           label={intl.formatMessage({
             id: 'common.creditCard',
             defaultMessage: 'Credit card',