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/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>