scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in SW-3396-move-my-saved-cards-to-design-system (pull request #2762)

Browse Source 
SW-3396 move my saved cards to design system

* Move PaymentOption, PaymentOptionsGroup, PaymentIcons and MySavedCards (renamed SelectPaymentMethod) to design-system

* Remove unused svg payment icons

* cleanu

* cleanup

* trackUpdatePaymentMethod: remove hotelId argument that was never passed


Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
2025-09-04 13:01:36 +00:00
parent 8e00769c64
commit 6fa301f8e7
57 changed files with 1687 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
View File

@@ -13,13 +13,13 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho
import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
import { Button } from "@scandic-hotels/design-system/Button"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup"
import { trackUpdatePaymentMethod } from "@/utils/tracking"
import styles from "./guarantee.module.css"
@@ -105,11 +105,19 @@ export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
</div>
</Checkbox>
{savedCreditCards?.length && guarantee ? (
<MySavedCards savedCreditCards={savedCreditCards} />
<SelectPaymentMethod
formName="paymentMethod"
onChange={(method) => trackUpdatePaymentMethod({ method })}
paymentMethods={savedCreditCards.map((x) => ({
...x,
cardType: x.cardType as PaymentMethodEnum,
}))}
/>
) : null}
{guarantee ? (
<PaymentOptionsGroup
name="paymentMethod"
onChange={(method) => trackUpdatePaymentMethod({ method })}
label={
savedCreditCards?.length
? intl.formatMessage({

15
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
View File

@@ -8,7 +8,10 @@ import { Label } from "react-aria-components"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import {
PAYMENT_METHOD_TITLES,
PaymentMethodEnum,
} from "@scandic-hotels/common/constants/paymentMethod"
import {
bookingConfirmation,
selectRate,
@@ -20,6 +23,8 @@ import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone"
import Body from "@scandic-hotels/design-system/Body"
import { Button } from "@scandic-hotels/design-system/Button"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap"
@@ -27,15 +32,13 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus"
import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
import { PAYMENT_METHOD_TITLES } from "@/constants/booking"
import { env } from "@/env/client"
import { useEnterDetailsStore } from "@/stores/enter-details"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
import useLang from "@/hooks/useLang"
import { trackPaymentEvent } from "@/utils/tracking"
import { trackPaymentEvent, trackUpdatePaymentMethod } from "@/utils/tracking"
import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm"
@@ -50,7 +53,6 @@ import {
writePaymentInfoToSessionStorage,
} from "./helpers"
import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
import PaymentOptionsGroup from "./PaymentOptionsGroup"
import { type PaymentFormData, paymentSchema } from "./schema"
import TermsAndConditions from "./TermsAndConditions"
@@ -551,6 +553,7 @@ export default function PaymentClient({
<PaymentOptionsGroup
name="paymentMethod"
className={styles.paymentOptionContainer}
onChange={(method) => trackUpdatePaymentMethod({ method })}
>
<Label className="sr-only">
{intl.formatMessage({
@@ -571,7 +574,7 @@ export default function PaymentClient({
{savedCreditCards.map((savedCreditCard) => (
<PaymentOption
key={savedCreditCard.id}
value={savedCreditCard.id}
value={savedCreditCard.id as PaymentMethodEnum}
label={
PAYMENT_METHOD_TITLES[
savedCreditCard.cardType as PaymentMethodEnum

45
apps/scandic-web/components/HotelReservation/MySavedCards/index.tsx
View File

@@ -1,45 +0,0 @@
import { useIntl } from "react-intl"
import { PAYMENT_METHOD_TITLES } from "@/constants/booking"
import PaymentOptionsGroup from "../EnterDetails/Payment/PaymentOptionsGroup"
import PaymentOption from "../PaymentOption"
import styles from "./mySavedCards.module.css"
import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import type { CreditCard } from "@scandic-hotels/trpc/types/user"
interface MySavedCardsProps {
savedCreditCards: CreditCard[] | null
}
export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
const intl = useIntl()
const mySavedCardsLabel = intl.formatMessage({
defaultMessage: "MY SAVED CARDS",
})
return (
<section className={styles.section}>
<PaymentOptionsGroup
name="paymentMethod"
label={mySavedCardsLabel}
className={styles.paymentOptionContainer}
>
{savedCreditCards?.map((savedCreditCard) => (
<PaymentOption
key={savedCreditCard.id}
value={savedCreditCard.id}
label={
PAYMENT_METHOD_TITLES[
savedCreditCard.cardType as PaymentMethodEnum
]
}
cardNumber={savedCreditCard.truncatedNumber}
/>
))}
</PaymentOptionsGroup>
</section>
)
}

18
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
View File

@@ -6,6 +6,9 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho
import { dt } from "@scandic-hotels/common/dt"
import { Alert } from "@scandic-hotels/design-system/Alert"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -13,10 +16,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import useLang from "@/hooks/useLang"
import { trackUpdatePaymentMethod } from "@/utils/tracking"
import styles from "./confirmationStep.module.css"
@@ -134,7 +135,16 @@ export default function ConfirmationStep({
})}
/>
{savedCreditCards?.length ? (
<MySavedCards savedCreditCards={savedCreditCards} />
<SelectPaymentMethod
paymentMethods={savedCreditCards.map((x) => ({
...x,
cardType: x.cardType as PaymentMethodEnum,
}))}
onChange={(method) => {
trackUpdatePaymentMethod({ method })
}}
formName={"paymentMethod"}
/>
) : null}
<PaymentOptionsGroup
name="paymentMethod"

21
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
View File

@@ -8,6 +8,9 @@ import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotel
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
import Link from "@scandic-hotels/design-system/Link"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { toast } from "@scandic-hotels/design-system/Toast"
@@ -18,11 +21,9 @@ import { env } from "@/env/client"
import { useMyStayStore } from "@/stores/my-stay"
import { writeGlaToSessionStorage } from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/helpers"
import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
import useLang from "@/hooks/useLang"
import { trackUpdatePaymentMethod } from "@/utils/tracking"
import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
import { type GuaranteeFormData, paymentSchema } from "./schema"
@@ -144,7 +145,16 @@ export default function Form() {
onSubmit={methods.handleSubmit(handleGuaranteeLateArrival)}
>
{savedCreditCards?.length ? (
<MySavedCards savedCreditCards={savedCreditCards} />
<SelectPaymentMethod
formName="paymentMethod"
paymentMethods={savedCreditCards.map((x) => ({
...x,
cardType: x.type as PaymentMethodEnum,
}))}
onChange={(method) => {
trackUpdatePaymentMethod({ method })
}}
/>
) : null}
<PaymentOptionsGroup
name="paymentMethod"
@@ -155,6 +165,9 @@ export default function Form() {
})
: undefined
}
onChange={(method) => {
trackUpdatePaymentMethod({ method })
}}
>
<PaymentOption
value={PaymentMethodEnum.card}

55
apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
View File

@@ -1,55 +0,0 @@
import { cx } from "class-variance-authority"
import Image from "next/image"
import { Radio } from "react-aria-components"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { PAYMENT_METHOD_ICONS } from "@/constants/booking"
import styles from "./paymentOption.module.css"
import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import type { PaymentOptionProps } from "./paymentOption"
export default function PaymentOption({
value,
label,
cardNumber,
}: PaymentOptionProps) {
return (
<Radio
value={value}
className={({ isFocusVisible }) =>
cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
}
>
{({ isSelected }) => (
<>
<div className={styles.titleContainer}>
<span
className={cx(styles.radio, { [styles.selected]: isSelected })}
aria-hidden
/>
<Body>{label}</Body>
</div>
{cardNumber ? (
<>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
</>
) : (
<Image
className={styles.paymentOptionIcon}
src={PAYMENT_METHOD_ICONS[value as PaymentMethodEnum]}
alt={label}
width={48}
height={32}
/>
)}
</>
)}
</Radio>
)
}

5
apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.ts
View File

@@ -1,5 +0,0 @@
export interface PaymentOptionProps {
value: string
label: string
cardNumber?: string
}

52
apps/scandic-web/constants/booking.ts
View File

@@ -1,59 +1,7 @@
import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
export const SEARCHTYPE = "searchtype"
export const MEMBERSHIP_FAILED_ERROR = "MembershipFailedError"
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",
americanExpress: "American Express",
dankort: "Dankort",
dinersClub: "Diners Club",
jcb: "JCB",
masterCard: "Mastercard",
visa: "Visa",
maestro: "Maestro",
chinaUnionPay: "China UnionPay",
discover: "Discover",
}
export const PAYMENT_METHOD_ICONS: Record<
keyof typeof PaymentMethodEnum,
string
> = {
card: "/_static/icons/payment/card-generic.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",
americanExpress: "/_static/icons/payment/american-express.svg",
dankort: "/_static/icons/payment/dankort.svg",
dinersClub: "/_static/icons/payment/diners-club.svg",
jcb: "/_static/icons/payment/jcb.svg",
masterCard: "/_static/icons/payment/mastercard.svg",
visa: "/_static/icons/payment/visa.svg",
maestro: "/_static/icons/payment/maestro.svg",
chinaUnionPay: "/_static/icons/payment/china-union-pay.svg",
discover: "/_static/icons/payment/discover.svg",
}
export enum CancellationRuleEnum {
CancellableBefore6PM = "CancellableBefore6PM",
NonCancellable = "NonCancellable",

17
apps/scandic-web/public/_static/icons/payment/american-express.svg
View File

@@ -1,17 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46857)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="#0690FF"/>
<mask id="mask0_5382_46857" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="16" y="0" width="32" height="32">
<path d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
</mask>
<g mask="url(#mask0_5382_46857)">
<path d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<path d="M48 32V26.9295H44.1396L42.152 24.7317L40.1544 26.9295H27.4257V16.6865H23.3175L28.4133 5.15416H33.3278L35.082 9.10496V5.15416H41.1652L42.2212 8.13132L43.2844 5.15416H48V0H16V32H48ZM44.7896 25.647H48L43.7536 21.1438L48 16.6916H44.8408L42.2184 19.5574L39.621 16.6916H36.41L40.6316 21.1694L36.41 25.647H39.5316L42.1672 22.7557L44.7896 25.647ZM45.5408 21.1475L48 23.7638V18.5531L45.5408 21.1475ZM31.2287 23.5745V22.18H36.2819V20.1586H31.2287V18.7642H36.4098L36.41 16.6916H28.785V25.647H36.41L36.4098 23.5745H31.2287ZM45.582 15.3921H48V6.43668H44.2388L42.23 12.0145L40.2344 6.43668H36.4092V15.3921H38.827V9.12332L41.13 15.3921H43.2792L45.582 9.1104V15.3921ZM33.6586 15.3921H36.4092L32.4562 6.43668H29.3089L25.3556 15.3921H28.0422L28.7844 13.601H32.9038L33.6586 15.3921ZM32.0595 11.5924H29.6286L30.8441 8.66272L32.0595 11.5924Z" fill="#0690FF"/>
</g>
</g>
<defs>
<clipPath id="clip0_5382_46857">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

21
apps/scandic-web/public/_static/icons/payment/apple-pay.svg
View File

@@ -1,21 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46859)">
<mask id="mask0_5382_46859" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="32">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
</mask>
<g mask="url(#mask0_5382_46859)">
<path d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z" fill="white"/>
<path d="M22.2209 9.16162C24.4408 9.16162 25.9866 10.6918 25.9866 12.9197C25.9866 15.1555 24.409 16.6936 22.1653 16.6936H19.7074V20.6023H17.9316V9.16162H22.2209ZM19.7074 15.203H21.745C23.2911 15.203 24.171 14.3706 24.171 12.9276C24.171 11.4847 23.2911 10.6601 21.753 10.6601H19.7074V15.203Z" fill="black"/>
<path d="M26.4507 18.2316C26.4507 16.7727 27.5686 15.8768 29.5508 15.7658L31.834 15.6311V14.9889C31.834 14.0613 31.2076 13.5063 30.1613 13.5063C29.17 13.5063 28.5516 13.9819 28.4011 14.7273H26.7838C26.8789 13.2208 28.1632 12.1108 30.2246 12.1108C32.2463 12.1108 33.5386 13.1812 33.5386 14.854V20.6021H31.8974V19.2305H31.8579C31.3743 20.1582 30.3198 20.7448 29.2257 20.7448C27.5924 20.7448 26.4507 19.73 26.4507 18.2316ZM31.834 17.4784V16.8204L29.7805 16.9472C28.7578 17.0186 28.1791 17.4705 28.1791 18.184C28.1791 18.9133 28.7816 19.3891 29.7013 19.3891C30.8984 19.3891 31.834 18.5645 31.834 17.4784Z" fill="black"/>
<path d="M35.0882 23.6707V22.2832C35.2149 22.3148 35.5002 22.3148 35.6431 22.3148C36.4358 22.3148 36.864 21.9819 37.1256 21.1257C37.1256 21.1098 37.2763 20.6182 37.2763 20.6103L34.2637 12.2617H36.1187L38.2278 19.0484H38.2594L40.3684 12.2617H42.176L39.0521 21.0384C38.3389 23.0602 37.5143 23.7103 35.7859 23.7103C35.6431 23.7103 35.2149 23.6944 35.0882 23.6707Z" fill="black"/>
<path d="M12.6941 10.2782C13.1221 9.74283 13.4126 9.02407 13.336 8.28955C12.7094 8.32071 11.9449 8.70287 11.5023 9.23863C11.1048 9.69739 10.7531 10.4463 10.8448 11.15C11.5481 11.211 12.2507 10.7984 12.6941 10.2782Z" fill="black"/>
<path d="M13.328 11.2873C12.3067 11.2264 11.4383 11.867 10.9505 11.867C10.4625 11.867 9.71557 11.3179 8.90773 11.3327C7.85629 11.3482 6.88069 11.9427 6.34709 12.8882C5.24965 14.7797 6.05749 17.5855 7.12469 19.126C7.64297 19.8882 8.26757 20.7274 9.09057 20.6972C9.86817 20.6667 10.1729 20.1937 11.1181 20.1937C12.0627 20.1937 12.3372 20.6972 13.1603 20.682C14.0139 20.6667 14.5476 19.9194 15.0659 19.1566C15.6604 18.2878 15.9038 17.4488 15.9191 17.4028C15.9038 17.3875 14.2731 16.762 14.258 14.8862C14.2426 13.3155 15.5383 12.5684 15.5992 12.5221C14.8676 11.44 13.7243 11.3179 13.328 11.2873Z" fill="black"/>
<path d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z" stroke="black" stroke-width="1.1"/>
</g>
</g>
<defs>
<clipPath id="clip0_5382_46859">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

21
apps/scandic-web/public/_static/icons/payment/card-generic.svg
View File

@@ -1,21 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46864)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="url(#paint0_linear_5382_46864)"/>
<path d="M38.8104 26H33.2104" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
<path d="M30.3412 26H24.7412" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
<path d="M21.872 26H16.272" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
<path d="M13.4027 26H7.80273" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
<path d="M12.869 9.59473H7.53566C6.35746 9.59473 5.40234 10.5498 5.40234 11.728V15.4614C5.40234 16.6396 6.35746 17.5947 7.53566 17.5947H12.869C14.0472 17.5947 15.0023 16.6396 15.0023 15.4614V11.728C15.0023 10.5498 14.0472 9.59473 12.869 9.59473Z" fill="#EDEDED"/>
<path d="M9.00811 9.99997V17.2M9.00811 14.8H5.80811M14.6081 14.8H11.4081M9.00811 12.4H5.80811M14.5974 12.4H11.3014V17.2213M7.53611 9.86133H12.8694C13.9004 9.86133 14.7361 10.697 14.7361 11.728V15.4613C14.7361 16.4922 13.9004 17.328 12.8694 17.328H7.53611C6.50515 17.328 5.66943 16.4922 5.66943 15.4613V11.728C5.66943 10.697 6.50515 9.86133 7.53611 9.86133Z" stroke="black" stroke-width="0.5332"/>
<path d="M42.597 6H36.9971" stroke="#EDEDED" stroke-width="1.6" stroke-linecap="round"/>
</g>
<defs>
<linearGradient id="paint0_linear_5382_46864" x1="13.9733" y1="6.18668" x2="21.975" y2="23.9969" gradientUnits="userSpaceOnUse">
<stop stop-color="#C1C1C1"/>
<stop offset="1" stop-color="#9F9F9F"/>
</linearGradient>
<clipPath id="clip0_5382_46864">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

16
apps/scandic-web/public/_static/icons/payment/dankort.svg
View File

@@ -1,16 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46855)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path d="M16.6894 5.12549C10.7022 5.12549 5.83105 10.0036 5.83105 15.9995C5.83105 21.996 10.7022 26.8746 16.6894 26.8746H31.3125C37.2989 26.8746 42.1694 21.996 42.1694 15.9995C42.1694 10.0036 37.2989 5.12549 31.3125 5.12549H16.6894Z" fill="white"/>
<path d="M30.5917 21.6152L26.5498 16.499C25.8021 19.9873 23.3557 21.6146 18.7696 21.6146H9.62988C11.2833 23.6955 13.833 25.0323 16.689 25.0323H31.3122C34.1671 25.0323 36.7163 23.6961 38.3698 21.6152H30.5917Z" fill="#E41D27"/>
<path d="M33.8687 15.3357L38.7313 21.1278C39.7384 19.6701 40.3297 17.9031 40.3297 15.9997C40.3297 13.9909 39.6709 12.133 38.5589 10.6313L33.8687 15.3357Z" fill="#E41D27"/>
<path d="M14.1063 14.0054L12.8096 17.5764H18.0415C19.5881 17.5764 20.0561 16.9351 20.4022 15.7004C20.7448 14.4792 19.8844 14.0054 18.8274 14.0054H14.1063Z" fill="#E41D27"/>
<path d="M20.0894 10.1422C23.7207 10.1422 26.4568 11.0676 26.7384 14.132L30.5601 10.1418H38.17C36.5146 8.2011 34.0545 6.96826 31.3123 6.96826H16.6892C13.9461 6.96826 11.4856 8.2011 9.83008 10.1422H20.0894Z" fill="#E41D27"/>
</g>
<defs>
<clipPath id="clip0_5382_46855">
<rect width="48" height="32" rx="3" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

16
apps/scandic-web/public/_static/icons/payment/diners-club.svg
View File

@@ -1,16 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46858)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="url(#paint0_linear_5382_46858)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.16 25.9335C31.6086 25.9594 36.5818 21.505 36.5818 16.086C36.5818 10.16 31.6086 6.06396 26.16 6.06592H21.4708C15.9569 6.06396 11.4185 10.1613 11.4185 16.086C11.4185 21.5062 15.9569 25.9595 21.4708 25.9335H26.16Z" fill="#3477B9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.474 6.86084C16.4355 6.8624 12.3527 10.9325 12.3516 15.9558C12.3527 20.9782 16.4355 25.0479 21.474 25.0495C26.5136 25.0479 30.5972 20.9782 30.598 15.9558C30.5972 10.9325 26.5136 6.8624 21.474 6.86084ZM15.6915 15.9558C15.6963 13.5011 17.2345 11.4079 19.4037 10.5761V21.3342C17.2345 20.5028 15.6962 18.4108 15.6915 15.9558ZM23.5435 21.3366V10.5758C25.7134 11.4056 27.2541 13.4999 27.258 15.9558C27.2541 18.4124 25.7134 20.5052 23.5435 21.3366Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_5382_46858" x1="8.9407e-07" y1="8.4" x2="48" y2="21.6" gradientUnits="userSpaceOnUse">
<stop stop-color="#3479C0"/>
<stop offset="1" stop-color="#133362"/>
</linearGradient>
<clipPath id="clip0_5382_46858">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

28
apps/scandic-web/public/_static/icons/payment/discover.svg
View File

@@ -1,28 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46865)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6001 32.0002H46.4009C47.2841 32.0002 48.0001 31.2846 48.0001 30.3985V19.2002C48.0001 19.2002 35.1447 28.0427 11.6001 32.0002Z" fill="#E7792B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.2353 13.545C45.2353 12.2851 44.3553 11.5581 42.8213 11.5581H40.8481V18.2879H42.1773V15.5844H42.3509L44.1925 18.2879H45.8285L43.6809 15.4526C44.6833 15.2517 45.2353 14.5754 45.2353 13.545ZM42.5657 14.6565H42.1773V12.6181H42.5869C43.4153 12.6181 43.8661 12.9608 43.8661 13.6155C43.8661 14.2923 43.4153 14.6565 42.5657 14.6565Z" fill="#1A1918"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.1934 18.2879H39.9668V17.1486H37.5229V15.332H39.8767V14.1921H37.5229V12.6985H39.9668V11.5581H36.1934V18.2879Z" fill="#1A1918"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3072 16.0784L30.4883 11.5581H29.0347L31.9295 18.4605H32.6453L35.5921 11.5581H34.1498L32.3072 16.0784Z" fill="#1A1918"/>
<path d="M25.8471 18.6877C27.8847 18.6877 29.5366 17.058 29.5366 15.0477C29.5366 13.0374 27.8847 11.4077 25.8471 11.4077C23.8095 11.4077 22.1577 13.0374 22.1577 15.0477C22.1577 17.058 23.8095 18.6877 25.8471 18.6877Z" fill="url(#paint0_radial_5382_46865)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4893 14.9275C16.4893 16.9056 18.0636 18.4393 20.0896 18.4393C20.6623 18.4393 21.1527 18.3283 21.7577 18.0472V16.502C21.2257 17.0272 20.7548 17.2391 20.1515 17.2391C18.8115 17.2391 17.8604 16.2805 17.8604 14.9176C17.8604 13.6256 18.8415 12.6064 20.0896 12.6064C20.7242 12.6064 21.2046 12.8298 21.7577 13.3636V11.8192C21.1738 11.5269 20.6934 11.4058 20.121 11.4058C18.1053 11.4058 16.4893 12.9707 16.4893 14.9275Z" fill="#1A1918"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1073 14.1406C13.3088 13.8492 13.0745 13.6568 13.0745 13.2933C13.0745 12.8692 13.4922 12.5473 14.0657 12.5473C14.4644 12.5473 14.7919 12.7088 15.1385 13.0923L15.8347 12.193C15.2626 11.6992 14.5782 11.4468 13.8303 11.4468C12.6234 11.4468 11.7029 12.2736 11.7029 13.3752C11.7029 14.3023 12.1316 14.7769 13.381 15.2207C13.902 15.4019 14.1671 15.5225 14.301 15.6039C14.5666 15.7753 14.6997 16.0176 14.6997 16.3002C14.6997 16.8454 14.2604 17.2495 13.6667 17.2495C13.0321 17.2495 12.5211 16.9364 12.2146 16.3519L11.355 17.1686C11.968 18.0562 12.7043 18.4496 13.7167 18.4496C15.0992 18.4496 16.0693 17.5427 16.0693 16.2399C16.0693 15.1707 15.6207 14.6866 14.1073 14.1406Z" fill="#1A1918"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.52344 11.5581H10.854V18.2879H9.52344V11.5581Z" fill="#1A1918"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.24987 11.5581H3.29688V18.2879H5.2396C6.27264 18.2879 7.01844 18.0474 7.67332 17.5111C8.45152 16.8756 8.91164 15.918 8.91164 14.9277C8.91164 12.9415 7.40767 11.5581 5.24987 11.5581ZM6.8042 16.6135C6.38596 16.9861 5.84312 17.1486 4.98348 17.1486H4.6264V12.6985H4.98348C5.84312 12.6985 6.36463 12.85 6.8042 13.2426C7.26432 13.6469 7.54104 14.2733 7.54104 14.9178C7.54104 15.5639 7.26432 16.2095 6.8042 16.6135Z" fill="#1A1918"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.0842 11.8109C46.0842 11.6931 46.0022 11.6284 45.8574 11.6284H45.665V12.2199H45.8082V11.9906L45.9758 12.2199H46.1506L45.9534 11.976C46.0378 11.9537 46.0842 11.8931 46.0842 11.8109ZM45.8322 11.8918H45.8082V11.7371H45.8338C45.9046 11.7371 45.9414 11.7623 45.9414 11.813C45.9414 11.8655 45.9042 11.8918 45.8322 11.8918Z" fill="#1A1918"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.8858 11.4077C45.5946 11.4077 45.3638 11.637 45.3638 11.9233C45.3638 12.2096 45.5974 12.4392 45.8858 12.4392C46.1694 12.4392 46.4018 12.2072 46.4018 11.9233C46.4018 11.641 46.1694 11.4077 45.8858 11.4077ZM45.8838 12.3471C45.655 12.3471 45.4674 12.1589 45.4674 11.9241C45.4674 11.6885 45.6526 11.5006 45.8838 11.5006C46.1118 11.5006 46.2978 11.693 46.2978 11.9241C46.2978 12.1568 46.1118 12.3471 45.8838 12.3471Z" fill="#1A1918"/>
</g>
<defs>
<radialGradient id="paint0_radial_5382_46865" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.6 17.5998) rotate(-142.431) scale(6.56048 6.47264)">
<stop stop-color="#F59900"/>
<stop offset="0.210082" stop-color="#F39501"/>
<stop offset="0.908163" stop-color="#CE3C0B"/>
<stop offset="1" stop-color="#A4420A"/>
</radialGradient>
<clipPath id="clip0_5382_46865">
<rect width="48" height="32" rx="3" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.6 KiB

18
apps/scandic-web/public/_static/icons/payment/google-pay.svg
View File

@@ -1,18 +0,0 @@
<svg width="48" height="26" viewBox="0 0 48 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5597_436)">
<path d="M35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z" fill="white"/>
<path d="M35.234 1.053C36.8106 1.053 38.3426 1.3715 39.7851 1.9955C41.183 2.6 42.434 3.4645 43.5191 4.563C44.5979 5.6615 45.4468 6.942 46.0404 8.3655C46.6532 9.8345 46.966 11.3945 46.966 13C46.966 14.6055 46.6532 16.1655 46.0404 17.6345C45.4468 19.058 44.5979 20.332 43.5191 21.437C42.4404 22.5355 41.183 23.4 39.7851 24.0045C38.3426 24.6285 36.8106 24.947 35.234 24.947H12.766C11.1894 24.947 9.65745 24.6285 8.21489 24.0045C6.81702 23.4 5.56596 22.5355 4.48085 21.437C3.40213 20.3385 2.55319 19.058 1.95957 17.6345C1.34681 16.1655 1.03404 14.6055 1.03404 13C1.03404 11.3945 1.34681 9.8345 1.95957 8.3655C2.55319 6.942 3.40213 5.668 4.48085 4.563C5.55957 3.4645 6.81702 2.6 8.21489 1.9955C9.65745 1.3715 11.1894 1.053 12.766 1.053H35.234ZM35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z" fill="#3C4043"/>
<path d="M23.0598 13.9235V17.856H21.8359V8.14502H25.0806C25.9029 8.14502 26.6041 8.42452 27.1778 8.98352C27.7642 9.54252 28.0575 10.225 28.0575 11.031C28.0575 11.8565 27.7642 12.539 27.1778 13.0915C26.6104 13.644 25.9092 13.917 25.0806 13.917H23.0598V13.9235ZM23.0598 9.34102V12.7275H25.1061C25.5905 12.7275 25.9985 12.5585 26.3172 12.227C26.6423 11.8955 26.808 11.4925 26.808 11.0375C26.808 10.589 26.6423 10.1925 26.3172 9.86102C25.9985 9.51652 25.5969 9.34752 25.1061 9.34752H23.0598V9.34102Z" fill="#3C4043"/>
<path d="M31.2576 10.9912C32.1628 10.9912 32.8767 11.2382 33.3994 11.7322C33.9221 12.2262 34.1835 12.9022 34.1835 13.7602V17.8552H33.0169V16.9322H32.9659C32.4624 17.6927 31.7867 18.0697 30.9452 18.0697C30.2249 18.0697 29.6257 17.8552 29.1412 17.4197C28.6568 16.9842 28.4146 16.4447 28.4146 15.7947C28.4146 15.1057 28.6695 14.5597 29.1795 14.1567C29.6895 13.7472 30.3715 13.5457 31.2193 13.5457C31.946 13.5457 32.5452 13.6822 33.0106 13.9552V13.6692C33.0106 13.2337 32.8448 12.8697 32.507 12.5642C32.1691 12.2587 31.7739 12.1092 31.3213 12.1092C30.6393 12.1092 30.0974 12.4017 29.7022 12.9932L28.6249 12.3042C29.2177 11.4267 30.0974 10.9912 31.2576 10.9912ZM29.6767 15.8142C29.6767 16.1392 29.8106 16.4122 30.0847 16.6267C30.3524 16.8412 30.6711 16.9517 31.0345 16.9517C31.5508 16.9517 32.0098 16.7567 32.4114 16.3667C32.813 15.9767 33.0169 15.5217 33.0169 14.9952C32.6345 14.6897 32.1054 14.5337 31.4233 14.5337C30.9261 14.5337 30.5118 14.6572 30.1803 14.8977C29.8424 15.1512 29.6767 15.4567 29.6767 15.8142Z" fill="#3C4043"/>
<path d="M40.8385 11.2065L36.7588 20.7745H35.4966L37.0138 17.427L34.3237 11.2065H35.656L37.5938 15.9775H37.6193L39.5062 11.2065H40.8385Z" fill="#3C4043"/>
<path d="M18.1926 13.1301C18.1926 12.7232 18.1569 12.3339 18.0906 11.9595H12.9604V14.1045L15.915 14.1051C15.7952 14.8188 15.4095 15.4272 14.8186 15.8328V17.2245H16.5773C17.6043 16.2553 18.1926 14.8227 18.1926 13.1301Z" fill="#4285F4"/>
<path d="M14.8184 15.8321C14.3289 16.1688 13.6984 16.3658 12.9609 16.3658C11.5362 16.3658 10.3276 15.3869 9.89475 14.0674H8.08057V15.5026C8.97937 17.3213 10.8267 18.5693 12.9609 18.5693C14.4359 18.5693 15.6751 18.0746 16.5771 17.2231L14.8184 15.8321Z" fill="#34A853"/>
<path d="M9.72406 13.0025C9.72406 12.632 9.78462 12.2739 9.8949 11.9372V10.502H8.08072C7.70908 11.254 7.5 12.1029 7.5 13.0025C7.5 13.9021 7.70972 14.751 8.08072 15.5031L9.8949 14.0679C9.78462 13.7312 9.72406 13.373 9.72406 13.0025Z" fill="#FABB05"/>
<path d="M12.9614 9.63953C13.7665 9.63953 14.4874 9.92229 15.0567 10.4748L16.6152 8.88684C15.6686 7.98789 14.4345 7.43604 12.9614 7.43604C10.8278 7.43604 8.97986 8.68403 8.08105 10.5027L9.89524 11.9379C10.3281 10.6184 11.5367 9.63953 12.9614 9.63953Z" fill="#E94235"/>
</g>
<defs>
<clipPath id="clip0_5597_436">
<rect width="48" height="26" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

48
apps/scandic-web/public/_static/icons/payment/jcb.svg
View File

@@ -1,48 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46863)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path d="M40.3598 23.5199C40.3598 26.3199 38.0796 28.5999 35.2796 28.5999H7.63965V8.4799C7.63965 5.6799 9.91965 3.3999 12.7196 3.3999H40.3598V23.5199Z" fill="white"/>
<path d="M31.3599 18.3599H33.4599C33.5199 18.3599 33.6599 18.3399 33.7199 18.3399C34.1199 18.2599 34.4599 17.8999 34.4599 17.3999C34.4599 16.9199 34.1199 16.5599 33.7199 16.4599C33.6599 16.4399 33.5399 16.4399 33.4599 16.4399H31.3599V18.3599Z" fill="url(#paint0_linear_5382_46863)"/>
<path d="M33.2196 5.1001C31.2196 5.1001 29.5796 6.7201 29.5796 8.7401V12.5201H34.7196C34.8396 12.5201 34.9796 12.5201 35.0796 12.5401C36.2396 12.6001 37.0996 13.2001 37.0996 14.2401C37.0996 15.0601 36.5196 15.7601 35.4396 15.9001V15.9401C36.6196 16.0201 37.5196 16.6801 37.5196 17.7001C37.5196 18.8001 36.5196 19.5201 35.1996 19.5201H29.5596V26.9201H34.8996C36.8996 26.9201 38.5396 25.3001 38.5396 23.2801V5.1001H33.2196Z" fill="url(#paint1_linear_5382_46863)"/>
<path d="M34.1999 14.4801C34.1999 14.0001 33.8599 13.6801 33.4599 13.6201C33.4199 13.6201 33.3199 13.6001 33.2599 13.6001H31.3599V15.3601H33.2599C33.3199 15.3601 33.4399 15.3601 33.4599 15.3401C33.8599 15.2801 34.1999 14.9601 34.1999 14.4801Z" fill="url(#paint2_linear_5382_46863)"/>
<path d="M23.1595 5.1001C21.1595 5.1001 19.5195 6.7201 19.5195 8.7401V13.5001C20.4395 12.7201 22.0395 12.2201 24.6195 12.3401C25.9995 12.4001 27.4795 12.7801 27.4795 12.7801V14.3201C26.7395 13.9401 25.8595 13.6001 24.7195 13.5201C22.7595 13.3801 21.5795 14.3401 21.5795 16.0201C21.5795 17.7201 22.7595 18.6801 24.7195 18.5201C25.8595 18.4401 26.7395 18.0801 27.4795 17.7201V19.2601C27.4795 19.2601 26.0195 19.6401 24.6195 19.7001C22.0395 19.8201 20.4395 19.3201 19.5195 18.5401V26.9401H24.8595C26.8595 26.9401 28.4995 25.3201 28.4995 23.3001V5.1001H23.1595Z" fill="url(#paint3_linear_5382_46863)"/>
<path d="M13.0999 5.1001C11.0999 5.1001 9.45994 6.7201 9.45994 8.7401V17.7201C10.4799 18.2201 11.5399 18.5401 12.5999 18.5401C13.8599 18.5401 14.5399 17.7801 14.5399 16.7401V12.5001H17.6599V16.7201C17.6599 18.3601 16.6399 19.7001 13.1799 19.7001C11.0799 19.7001 9.43994 19.2401 9.43994 19.2401V26.9001H14.7799C16.7799 26.9001 18.4199 25.2801 18.4199 23.2601V5.1001H13.0999Z" fill="url(#paint4_linear_5382_46863)"/>
</g>
<defs>
<linearGradient id="paint0_linear_5382_46863" x1="24.3923" y1="16.0328" x2="50.4301" y2="16.0328" gradientUnits="userSpaceOnUse">
<stop stop-color="#007940"/>
<stop offset="0.2285" stop-color="#00873F"/>
<stop offset="0.7433" stop-color="#40A737"/>
<stop offset="1" stop-color="#5CB531"/>
</linearGradient>
<linearGradient id="paint1_linear_5382_46863" x1="29.576" y1="16.001" x2="38.5641" y2="16.001" gradientUnits="userSpaceOnUse">
<stop stop-color="#007940"/>
<stop offset="0.2285" stop-color="#00873F"/>
<stop offset="0.7433" stop-color="#40A737"/>
<stop offset="1" stop-color="#5CB531"/>
</linearGradient>
<linearGradient id="paint2_linear_5382_46863" x1="29.5759" y1="14.4771" x2="38.5637" y2="14.4771" gradientUnits="userSpaceOnUse">
<stop stop-color="#007940"/>
<stop offset="0.2285" stop-color="#00873F"/>
<stop offset="0.7433" stop-color="#40A737"/>
<stop offset="1" stop-color="#5CB531"/>
</linearGradient>
<linearGradient id="paint3_linear_5382_46863" x1="19.4676" y1="16.001" x2="28.3315" y2="16.001" gradientUnits="userSpaceOnUse">
<stop stop-color="#6C2C2F"/>
<stop offset="0.1735" stop-color="#882730"/>
<stop offset="0.5731" stop-color="#BE1833"/>
<stop offset="0.8585" stop-color="#DC0436"/>
<stop offset="1" stop-color="#E60039"/>
</linearGradient>
<linearGradient id="paint4_linear_5382_46863" x1="9.45538" y1="16.001" x2="18.5822" y2="16.001" gradientUnits="userSpaceOnUse">
<stop stop-color="#1F286F"/>
<stop offset="0.4751" stop-color="#004E94"/>
<stop offset="0.8261" stop-color="#0066B1"/>
<stop offset="1" stop-color="#006FBC"/>
</linearGradient>
<clipPath id="clip0_5382_46863">
<rect width="48" height="32" rx="3" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

11
apps/scandic-web/public/_static/icons/payment/klarna.svg
View File

@@ -1,11 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46853)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="#FEB3C7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9263 19.812H15.6224V12.0444H13.9263V19.812ZM24.6661 15.3204V14.6257H24.6448L23.1645 14.6254L23.0814 14.6257V19.812H24.6855V17.094C24.6855 16.3053 25.5972 15.9594 26.2229 16.1342C26.229 16.136 26.2353 16.1349 26.2418 16.1349V14.6258C25.585 14.6258 24.9813 14.9043 24.6661 15.3204ZM19.21 18.6108C18.3791 18.6108 17.7056 17.9876 17.7056 17.2188C17.7056 16.45 18.3791 15.8268 19.21 15.8268C20.0408 15.8268 20.7144 16.45 20.7144 17.2188C20.7144 17.9876 20.0408 18.6108 19.21 18.6108ZM20.6993 14.985C20.2417 14.6686 19.6831 14.482 19.0797 14.482C17.5306 14.482 16.2748 15.7074 16.2748 17.2188C16.2748 18.7302 17.5306 19.9556 19.0797 19.9556C19.6831 19.9556 20.2417 19.769 20.6993 19.4527V19.812H22.0848V14.6257H20.6993V14.985ZM30.2081 14.486C29.5722 14.486 28.9706 14.6785 28.5684 15.2098V14.6257H28.5471L27.0668 14.6254L26.9837 14.6257V19.812H28.5877V16.9752C28.5877 16.1865 29.1299 15.8003 29.7826 15.8003C30.482 15.8003 30.8841 16.208 30.8841 16.9644V19.812H32.4737V16.5138C32.4737 15.3066 31.4901 14.486 30.2081 14.486ZM40.5357 17.9723C39.984 17.9723 39.5368 18.4087 39.5368 18.9471C39.5368 19.4853 39.984 19.9217 40.5357 19.9217C41.0873 19.9217 41.5349 19.4853 41.5349 18.9471C41.5349 18.4087 41.0873 17.9723 40.5357 17.9723ZM35.9713 18.6108C35.1403 18.6108 34.4669 17.9876 34.4669 17.2188C34.4669 16.45 35.1403 15.8268 35.9713 15.8268C36.8021 15.8268 37.4755 16.45 37.4755 17.2188C37.4755 17.9876 36.8021 18.6108 35.9713 18.6108ZM37.4606 14.985C37.003 14.6686 36.4444 14.482 35.8409 14.482C34.2918 14.482 33.036 15.7074 33.036 17.2188C33.036 18.7302 34.2918 19.9556 35.8409 19.9556C36.4444 19.9556 37.003 19.769 37.4606 19.4527V19.812H38.8459V14.6257H37.4606V14.985ZM39.8533 14.7203H39.9306C39.9791 14.7203 39.9998 14.7434 39.9998 14.7786C39.9998 14.8138 39.9863 14.84 39.9306 14.84H39.8533V14.7203ZM39.8545 14.9034H39.9316L39.9967 15.0482H40.0741L40.0017 14.8912C40.0481 14.8712 40.0717 14.8319 40.0717 14.7786C40.0717 14.7051 40.0141 14.6559 39.9306 14.6559H39.7832V15.0472H39.8545V14.9034ZM6.46533 19.812H8.23325V12.0444H6.46533V19.812ZM12.7708 12.0451H11.0543C11.0193 13.7986 9.98109 15.3123 8.47597 16.0614L11.1134 19.812H13.267L10.8696 16.4004C12.0667 15.2546 12.7466 13.7101 12.7708 12.0451ZM39.9131 14.5573C40.0813 14.5573 40.2173 14.6922 40.2173 14.8581C40.2173 15.024 40.0813 15.1588 39.9131 15.1588C39.7452 15.1588 39.609 15.024 39.609 14.8581C39.609 14.6922 39.7452 14.5573 39.9131 14.5573ZM39.9131 15.2302C40.1213 15.2302 40.2905 15.0632 40.2905 14.8581C40.2905 14.6529 40.1213 14.486 39.9131 14.486C39.7048 14.486 39.5368 14.6529 39.5368 14.8581C39.5368 15.0632 39.7048 15.2302 39.9131 15.2302Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_5382_46853">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

15
apps/scandic-web/public/_static/icons/payment/maestro.svg
View File

@@ -1,15 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46861)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z" fill="#00A2E5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z" fill="#7375CF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z" fill="#00A2E5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z" fill="#EB001B"/>
</g>
<defs>
<clipPath id="clip0_5382_46861">
<rect width="48" height="32" rx="3" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

15
apps/scandic-web/public/_static/icons/payment/mastercard.svg
View File

@@ -1,15 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46852)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z" fill="#F79E1B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z" fill="#FF5F00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z" fill="#F79E1B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z" fill="#EB001B"/>
</g>
<defs>
<clipPath id="clip0_5382_46852">
<rect width="48" height="32" rx="3" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

51
apps/scandic-web/public/_static/icons/payment/mobilepay.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

17
apps/scandic-web/public/_static/icons/payment/paypal.svg
View File

@@ -1,17 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46860)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4927 13.8679C30.3424 14.8536 29.5892 14.8536 28.8603 14.8536H28.4457L28.7366 13.0131C28.754 12.902 28.85 12.8202 28.9627 12.8202H29.153C29.649 12.8202 30.1174 12.8202 30.3591 13.1024C30.5036 13.2713 30.5472 13.5219 30.4927 13.8679ZM30.1756 11.2959H27.4274C27.2392 11.2959 27.0794 11.4326 27.05 11.6181L25.9389 18.6598C25.9169 18.7986 26.0246 18.9243 26.1649 18.9243H27.5752C27.7066 18.9243 27.8186 18.8287 27.8391 18.6991L28.1545 16.7025C28.1835 16.517 28.3437 16.3803 28.5315 16.3803H29.401C31.2112 16.3803 32.2562 15.5051 32.529 13.7698C32.652 13.0114 32.534 12.4151 32.1786 11.9977C31.7878 11.5388 31.095 11.2959 30.1756 11.2959Z" fill="#009CDE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8911 13.8679C10.7409 14.8536 9.98761 14.8536 9.25873 14.8536H8.84417L9.13509 13.0131C9.15245 12.902 9.24845 12.8202 9.36113 12.8202H9.55141C10.0475 12.8202 10.5159 12.8202 10.7575 13.1024C10.9021 13.2713 10.9457 13.5219 10.8911 13.8679ZM10.574 11.2959H7.82585C7.63769 11.2959 7.47789 11.4326 7.44849 11.6181L6.33733 18.6598C6.31537 18.7986 6.42273 18.9243 6.56337 18.9243H7.87581C8.06361 18.9243 8.22341 18.7877 8.25281 18.6025L8.55293 16.7025C8.58197 16.517 8.74213 16.3803 8.92993 16.3803H9.79945C11.6097 16.3803 12.6546 15.5051 12.9275 13.7698C13.0504 13.0114 12.9324 12.4151 12.577 11.9977C12.1862 11.5388 11.4935 11.2959 10.574 11.2959Z" fill="#003087"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9544 16.3959C16.8272 17.1472 16.2305 17.6518 15.4691 17.6518C15.0875 17.6518 14.7817 17.5289 14.5854 17.2966C14.3909 17.0665 14.3175 16.7383 14.3792 16.3732C14.4975 15.6283 15.1041 15.1078 15.8539 15.1078C16.2277 15.1078 16.531 15.2317 16.7312 15.4661C16.9328 15.7023 17.0122 16.0323 16.9544 16.3959ZM18.7884 13.8363H17.4724C17.3598 13.8363 17.2637 13.9181 17.246 14.0296L17.1883 14.3972L17.0965 14.264C16.8113 13.8508 16.1759 13.7124 15.5417 13.7124C14.0879 13.7124 12.846 14.8136 12.6043 16.3576C12.4785 17.1281 12.6571 17.8642 13.0944 18.378C13.4958 18.85 14.0688 19.0464 14.7516 19.0464C15.9237 19.0464 16.5735 18.2944 16.5735 18.2944L16.5147 18.6598C16.4927 18.7986 16.6001 18.9243 16.7411 18.9243H17.926C18.1141 18.9243 18.2739 18.788 18.3033 18.6024L19.0148 14.1008C19.0368 13.962 18.9291 13.8363 18.7884 13.8363Z" fill="#003087"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.5555 16.3959C36.4283 17.1472 35.8316 17.6518 35.0702 17.6518C34.6885 17.6518 34.3828 17.5289 34.1864 17.2966C33.9916 17.0665 33.9186 16.7383 33.9802 16.3732C34.0986 15.6283 34.7052 15.1078 35.455 15.1078C35.8288 15.1078 36.1321 15.2317 36.3322 15.4661C36.5339 15.7023 36.6132 16.0323 36.5555 16.3959ZM38.3895 13.8363H37.0735C36.9608 13.8363 36.8648 13.9181 36.8471 14.0296L36.7894 14.3972L36.6972 14.264C36.4123 13.8508 35.777 13.7124 35.1428 13.7124C33.689 13.7124 32.4471 14.8136 32.2054 16.3576C32.0796 17.1281 32.2582 17.8642 32.6954 18.378C33.0969 18.85 33.6698 19.0464 34.3526 19.0464C35.5248 19.0464 36.1746 18.2944 36.1746 18.2944L36.1158 18.6598C36.0938 18.7986 36.2012 18.9243 36.3422 18.9243H37.527C37.7152 18.9243 37.875 18.788 37.9044 18.6024L38.6159 14.1008C38.6379 13.962 38.5302 13.8363 38.3895 13.8363Z" fill="#009CDE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.7972 13.8364H24.4745C24.348 13.8364 24.2296 13.8991 24.1588 14.0039L22.334 16.6891L21.5608 14.1087C21.5123 13.9473 21.3635 13.8364 21.1948 13.8364H19.8948C19.7378 13.8364 19.6273 13.9908 19.678 14.1391L21.1342 18.4113L19.7644 20.3428C19.657 20.4943 19.7655 20.7039 19.9515 20.7039H21.2728C21.3978 20.7039 21.5151 20.6427 21.5867 20.54L25.9853 14.1958C26.0906 14.0439 25.9821 13.8364 25.7972 13.8364Z" fill="#003087"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9407 11.4897L38.8129 18.6603C38.7909 18.7991 38.8983 18.9248 39.039 18.9248H40.1737C40.3613 18.9248 40.5213 18.7881 40.5505 18.6026L41.6629 11.5609C41.6849 11.4221 41.5773 11.2964 41.4365 11.2964H40.1673C40.0541 11.2964 39.9581 11.3781 39.9407 11.4897Z" fill="#009CDE"/>
</g>
<defs>
<clipPath id="clip0_5382_46860">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

38
apps/scandic-web/public/_static/icons/payment/swish.svg
View File

@@ -1,38 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46851)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path d="M18.8844 18.2247L18.9947 18.0685C19.1325 17.8853 19.2868 17.8638 19.5128 17.9823C19.7278 18.0954 20.075 18.2894 20.5435 18.2894C20.9403 18.2894 21.1884 18.1116 21.1884 17.8314C21.1884 17.0988 18.8955 17.3735 18.8955 15.822C18.8955 14.9385 19.6947 14.4698 20.6647 14.4698C21.2766 14.4698 21.7064 14.6638 21.949 14.7984C22.1584 14.9062 22.186 15.0894 22.0868 15.2941L21.9986 15.4557C21.8884 15.6712 21.7175 15.6927 21.4915 15.5958C21.2931 15.5096 20.9899 15.3749 20.6151 15.3749C20.2183 15.3749 19.9923 15.5365 19.9923 15.8166C19.9923 16.5601 22.2797 16.2692 22.2797 17.8099C22.2797 18.6072 21.5907 19.1998 20.5214 19.1998C19.7774 19.1998 19.2648 18.925 18.9782 18.7419C18.7687 18.6126 18.7522 18.4186 18.8844 18.2247ZM22.671 14.987C22.5994 14.7392 22.7261 14.5722 22.9852 14.5722H23.4206C23.6466 14.5722 23.7844 14.6799 23.8285 14.9008L24.5726 17.5406C24.6277 17.7776 24.6607 18.02 24.6607 18.02H24.6773C24.6773 18.02 24.7158 17.7776 24.7765 17.5406L25.5536 14.9008C25.5977 14.6907 25.741 14.583 25.9725 14.583H26.3142C26.5402 14.583 26.6725 14.6907 26.7277 14.9008L27.4993 17.5406C27.5709 17.7776 27.5985 18.02 27.5985 18.02H27.615C27.615 18.02 27.6481 17.7776 27.7142 17.5406L28.4473 14.9008C28.5024 14.6799 28.6347 14.5722 28.8607 14.5722H29.2796C29.5496 14.5722 29.6654 14.7392 29.5937 14.987L28.4087 18.7742C28.3426 18.9897 28.1993 19.0867 27.9843 19.0867H27.378C27.1521 19.0867 27.0087 18.9789 26.9536 18.7688L26.2646 16.5062C26.193 16.2692 26.1544 16.0214 26.1544 16.0214H26.1379C26.1379 16.0214 26.0938 16.2692 26.0221 16.5062L25.3276 18.7634C25.2725 18.9789 25.1348 19.0813 24.9088 19.0813H24.2804C24.0655 19.0813 23.9277 18.9843 23.867 18.7688L22.671 14.987ZM30.2827 14.9439C30.2827 14.7015 30.4094 14.5722 30.652 14.5722H31.0488C31.2913 14.5722 31.4181 14.7015 31.4181 14.9439V18.715C31.4181 18.9628 31.2913 19.0867 31.0488 19.0867H30.652C30.4094 19.0867 30.2827 18.9628 30.2827 18.715V14.9439ZM32.1842 18.2247L32.2945 18.0685C32.4268 17.8853 32.5866 17.8638 32.8126 17.9823C33.0275 18.0954 33.3748 18.2894 33.8432 18.2894C34.2401 18.2894 34.4881 18.1116 34.4881 17.8314C34.4881 17.0988 32.2008 17.3735 32.2008 15.822C32.2008 14.9385 32.9944 14.4698 33.9645 14.4698C34.5818 14.4698 35.0062 14.6638 35.2488 14.7984C35.4582 14.9062 35.4858 15.0894 35.3865 15.2941L35.2984 15.4557C35.1936 15.6712 35.0172 15.6927 34.7913 15.5958C34.5928 15.5096 34.2952 15.3749 33.9149 15.3749C33.5181 15.3749 33.2921 15.5365 33.2921 15.8166C33.2921 16.5601 35.5794 16.2692 35.5794 17.8099C35.5794 18.6072 34.8905 19.1998 33.8212 19.1998C33.0771 19.1998 32.559 18.925 32.2834 18.7419C32.0685 18.6126 32.0464 18.4186 32.1842 18.2247ZM36.2519 13.1715C36.2519 12.9345 36.3897 12.7998 36.6322 12.7998H37.018C37.2716 12.7998 37.3983 12.9291 37.3983 13.1715V14.9978C37.3983 15.2186 37.3708 15.3749 37.3708 15.3749H37.3873C37.6133 14.9439 38.192 14.4644 38.9912 14.4644C40.0162 14.4644 40.6006 14.987 40.6006 16.183V18.715C40.6006 18.9628 40.463 19.0867 40.2202 19.0867H39.829C39.5754 19.0867 39.4487 18.9628 39.4487 18.715V16.4146C39.4487 15.8651 39.3054 15.4934 38.7266 15.4934C37.9219 15.4934 37.3928 16.1345 37.3928 16.991V18.715C37.3928 18.9628 37.266 19.0867 37.0125 19.0867H36.6267C36.3842 19.0867 36.2464 18.9628 36.2464 18.715V13.1715H36.2519ZM41.8354 13.8826C41.9398 13.8826 42.0006 13.818 42.0006 13.7102C42.0006 13.6079 41.9398 13.5486 41.8354 13.5486H41.6698V13.8826H41.8354ZM41.477 13.4948C41.477 13.4355 41.5046 13.4086 41.565 13.4086H41.8738C42.0666 13.4086 42.199 13.5271 42.199 13.7156C42.199 13.8718 42.0942 13.9634 42.0118 13.985V13.9904C42.0118 13.9904 42.0226 14.0012 42.0502 14.0442L42.1934 14.3136C42.2266 14.3729 42.2046 14.416 42.1438 14.416H42.111C42.0614 14.416 42.0282 14.3998 42.0062 14.3513L41.8462 14.0227H41.6754V14.3298C41.6754 14.3836 41.6478 14.416 41.5926 14.416H41.565C41.5046 14.416 41.4826 14.389 41.4826 14.3298V13.4948H41.477ZM41.813 14.7122C42.2598 14.7122 42.5958 14.3621 42.5958 13.915C42.5958 13.4678 42.2542 13.1176 41.813 13.1176C41.3778 13.1176 41.0414 13.4678 41.0414 13.915C41.0362 14.3621 41.3778 14.7122 41.813 14.7122ZM41.813 12.9345C42.3642 12.9345 42.7998 13.3708 42.7998 13.915C42.7942 14.459 42.359 14.89 41.813 14.89C41.273 14.89 40.8378 14.4537 40.8378 13.9096C40.8378 13.3708 41.273 12.9345 41.813 12.9345Z" fill="#4D4D4F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.38525 21.0546C10.6351 22.1307 13.4118 21.5981 15.0893 19.5994C17.0776 17.2303 16.7688 13.6986 14.3995 11.7109L12.8245 13.5876C14.6755 15.1405 14.9167 17.8997 13.3634 19.7505C12.1248 21.2263 10.0855 21.719 8.38525 21.0546Z" fill="url(#paint0_linear_5382_46851)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.38525 21.0547C10.6351 22.1307 13.4118 21.5982 15.0893 19.5995C15.2948 19.3547 15.4756 19.0974 15.6323 18.8308C15.8972 17.1846 15.3146 15.4447 13.9442 14.295C13.5961 14.0029 13.2192 13.7676 12.8247 13.5879C14.6755 15.1407 14.9167 17.8998 13.3634 19.7505C12.1248 21.2263 10.0855 21.7191 8.38525 21.0547Z" fill="url(#paint1_linear_5382_46851)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2149 10.9452C10.965 9.86917 8.18827 10.4017 6.51079 12.4005C4.52251 14.7695 4.83131 18.3013 7.20055 20.2889L8.77559 18.4122C6.92463 16.8594 6.68339 14.1002 8.23671 12.2494C9.47531 10.7736 11.5146 10.2808 13.2149 10.9452Z" fill="url(#paint2_linear_5382_46851)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2146 10.9452C10.9648 9.86917 8.18804 10.4017 6.51056 12.4004C6.30512 12.6452 6.12428 12.9024 5.9676 13.169C5.70272 14.8152 6.28528 16.5552 7.65568 17.7049C8.00384 17.997 8.38076 18.2323 8.77512 18.412C6.9244 16.8591 6.6832 14.1001 8.23648 12.2494C9.47508 10.7736 11.5143 10.2808 13.2146 10.9452Z" fill="url(#paint3_linear_5382_46851)"/>
</g>
<defs>
<linearGradient id="paint0_linear_5382_46851" x1="12.6109" y1="18.7386" x2="10.2315" y2="13.9987" gradientUnits="userSpaceOnUse">
<stop stop-color="#EF3220"/>
<stop offset="1" stop-color="#FCD205"/>
</linearGradient>
<linearGradient id="paint1_linear_5382_46851" x1="14.5468" y1="14.6636" x2="10.3757" y2="21.8844" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCD205"/>
<stop offset="0.263921" stop-color="#F47216"/>
<stop offset="0.560797" stop-color="#B31A93"/>
<stop offset="1" stop-color="#2743A0"/>
</linearGradient>
<linearGradient id="paint2_linear_5382_46851" x1="9.03527" y1="13.381" x2="11.3158" y2="18.0191" gradientUnits="userSpaceOnUse">
<stop stop-color="#7FD3B9"/>
<stop offset="0.265705" stop-color="#66CDE1"/>
<stop offset="0.554471" stop-color="#6D8ED1"/>
<stop offset="1" stop-color="#2743A0"/>
</linearGradient>
<linearGradient id="paint3_linear_5382_46851" x1="7.07996" y1="17.3035" x2="11.2185" y2="10.1074" gradientUnits="userSpaceOnUse">
<stop stop-color="#1E5CB2"/>
<stop offset="0.246658" stop-color="#4DC4CE"/>
<stop offset="0.564821" stop-color="#66C657"/>
<stop offset="1" stop-color="#FCD205"/>
</linearGradient>
<clipPath id="clip0_5382_46851">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

24
apps/scandic-web/public/_static/icons/payment/unionpay.svg
View File

@@ -1,24 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46856)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.6113 5.67139C29.4968 5.70603 28.134 6.58371 27.8858 7.66599L24.1192 24.3347C23.871 25.4271 24.5462 26.316 25.6325 26.3323H33.9998C35.0695 26.2794 36.109 25.4118 36.3529 24.3418L40.1196 7.67299C40.372 6.56947 39.6804 5.67343 38.5761 5.67343L30.6113 5.67139Z" fill="#01798A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.1192 24.3348L27.8858 7.66607C28.134 6.58379 29.4968 5.70611 30.5909 5.67255L27.4242 5.67051L21.7186 5.66943C20.6213 5.69187 19.2408 6.57571 18.9927 7.66607L15.225 24.3348C14.9759 25.4272 15.6521 26.3161 16.7376 26.3324H25.6325C24.5462 26.3161 23.871 25.4272 24.1192 24.3348Z" fill="#024381"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2249 24.3348L18.9926 7.66604C19.2407 6.57568 20.6212 5.69184 21.7185 5.6694L14.4093 5.66748C13.3059 5.66748 11.8913 6.56148 11.6391 7.66604L7.87136 24.3348C7.84844 24.4365 7.83572 24.5362 7.82812 24.6337V24.943C7.90189 25.7392 8.50996 26.3191 9.384 26.3324H16.7375C15.652 26.316 14.9758 25.4271 15.2249 24.3348Z" fill="#DD0228"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8729 17.8153H22.0112C22.1384 17.8153 22.2239 17.7727 22.264 17.6882L22.6234 17.1502H23.586L23.3852 17.5041H24.5394L24.393 18.0462H23.0196C22.8615 18.2842 22.6668 18.3961 22.4327 18.3828H21.7174L21.8729 17.8153ZM21.7149 18.5924H24.2434L24.0822 19.1813H23.0654L22.9102 19.7498H23.8997L23.7385 20.3387H22.749L22.5192 21.1787C22.4622 21.3191 22.5371 21.3823 22.7424 21.368H23.5489L23.3995 21.9152H21.8512C21.5577 21.9152 21.457 21.7473 21.5491 21.4107L21.843 20.3387H21.2104L21.3711 19.7498H22.0037L22.1588 19.1813H21.5541L21.7149 18.5924ZM25.7507 17.1462L25.7109 17.4909C25.7109 17.4909 26.1878 17.1328 26.621 17.1328H28.2217L27.6096 19.349C27.5588 19.6024 27.3411 19.7284 26.9566 19.7284H25.1424L24.7174 21.2846C24.6929 21.368 24.7275 21.4107 24.819 21.4107H25.176L25.0448 21.8938H24.1372C23.7889 21.8938 23.644 21.789 23.7014 21.5786L24.9024 17.1462H25.7507ZM27.1062 17.7727H25.6775L25.5066 18.3707C25.5066 18.3707 25.7445 18.1989 26.1421 18.1927C26.5386 18.1865 26.9912 18.1927 26.9912 18.1927L27.1062 17.7727ZM26.5886 19.1599C26.6942 19.1742 26.7533 19.1324 26.7604 19.0337L26.8479 18.7185H25.417L25.297 19.1599H26.5886ZM25.6234 19.8759H26.4482L26.4329 20.2329H26.6525C26.7634 20.2329 26.8184 20.1973 26.8184 20.1272L26.8834 19.8963H27.5689L27.4774 20.2329C27.4 20.5136 27.1947 20.6601 26.8611 20.6744H26.4218L26.4197 21.2846C26.4117 21.3823 26.5 21.4321 26.682 21.4321H27.095L26.9617 21.9152H25.9712C25.6936 21.9284 25.5575 21.7961 25.5604 21.5155L25.6234 19.8759Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1289 17.8399L29.3202 17.1667H30.2873L30.2455 17.4137C30.2455 17.4137 30.7397 17.1667 31.0956 17.1667H32.2915L32.1014 17.8399H31.9133L31.0112 21.0152H31.1993L31.0204 21.6458H30.8323L30.754 21.9194H29.8174L29.8955 21.6458H28.0479L28.2279 21.0152H28.413L29.316 17.8399H29.1289ZM30.1723 17.8399L29.9262 18.6993C29.9262 18.6993 30.3473 18.5377 30.7103 18.4919C30.7905 18.1918 30.8953 17.8399 30.8953 17.8399H30.1723ZM29.8122 19.1021L29.5652 20.0022C29.5652 20.0022 30.032 19.7724 30.3522 19.753C30.4448 19.4052 30.5374 19.1021 30.5374 19.1021H29.8122ZM29.9932 21.0152L30.1784 20.3623H29.4565L29.2704 21.0152H29.9932ZM32.3323 17.125H33.2415L33.28 17.4605C33.274 17.5459 33.3248 17.5867 33.4326 17.5867H33.5932L33.4307 18.1552H32.7624C32.5073 18.1684 32.376 18.0708 32.3639 17.8602L32.3323 17.125ZM35.0109 18.3444L34.838 18.9547H33.9004L33.7396 19.5221H34.6763L34.5024 20.1314H33.4591L33.2231 20.4885H33.7337L33.8517 21.2034C33.8658 21.2746 33.9289 21.3092 34.0367 21.3092H34.1953L34.0286 21.898H33.4672C33.1763 21.9123 33.0259 21.8146 33.0137 21.6042L32.8783 20.9512L32.4137 21.6458C32.3038 21.8421 32.1349 21.9337 31.9073 21.9194H31.0499L31.2167 21.3305H31.4842C31.5941 21.3305 31.6855 21.2817 31.7678 21.183L32.495 20.1314H31.5574L31.7312 19.5221H32.7482L32.9099 18.9547H31.8919L32.0659 18.3444H35.0109Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9423 16.3673C35.6372 17.0161 35.3465 17.3944 35.1757 17.5704C35.0047 17.7444 34.6662 18.1492 33.8506 18.1186L33.9208 17.6233C34.6071 17.4118 34.9783 16.4587 35.1898 16.0367L34.9377 12.9285L35.4685 12.9214H35.9139L35.9618 14.8711L36.7965 12.9214H37.6417L35.9423 16.3673Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.5789 13.1559L33.2431 13.3869C32.8923 13.1123 32.572 12.9424 31.9538 13.2292C31.1117 13.6197 30.408 16.6151 32.7266 15.6285L32.8588 15.7851L33.771 15.8085L34.37 13.0868L33.5789 13.1559ZM33.0602 14.6439C32.9136 15.0762 32.5864 15.362 32.3301 15.2807C32.0738 15.2013 31.9823 14.7843 32.1308 14.351C32.2772 13.9177 32.6066 13.633 32.8608 13.7143C33.1171 13.7937 33.2096 14.2107 33.0602 14.6439Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3048 11.1304H30.3834C30.7831 11.1304 31.0922 11.221 31.3047 11.3989C31.5162 11.5789 31.6221 11.8373 31.6221 12.1739V12.1841C31.6221 12.2481 31.6179 12.3203 31.6119 12.3986C31.6016 12.4759 31.5883 12.5542 31.5712 12.6356C31.4797 13.0811 31.2671 13.4391 30.9387 13.7107C30.6091 13.9812 30.2187 14.1175 29.7692 14.1175H28.6546L28.3099 15.8089H27.3447L28.3048 11.1304ZM28.8243 13.3039H29.7489C29.9898 13.3039 30.181 13.2479 30.3204 13.1371C30.4587 13.0252 30.5502 12.8544 30.601 12.6225C30.6091 12.5797 30.6141 12.5411 30.6203 12.5055C30.6234 12.472 30.6274 12.4383 30.6274 12.4059C30.6274 12.24 30.5686 12.12 30.4505 12.0447C30.3326 11.9684 30.1476 11.9319 29.8912 11.9319H29.1061L28.8243 13.3039Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.7659 12.9204H25.4819L25.4007 13.3374L25.5022 13.2184C25.7342 12.9703 26.0169 12.8472 26.3484 12.8472C26.6495 12.8472 26.867 12.9347 27.0022 13.1106C27.1356 13.2866 27.1742 13.5296 27.109 13.8419L26.7165 15.8089H25.9802L26.3363 14.026C26.3728 13.8419 26.3627 13.7046 26.3067 13.616C26.2487 13.5276 26.1439 13.4839 25.9905 13.4839C25.8013 13.4839 25.6427 13.5428 25.5115 13.6598C25.3812 13.7778 25.2949 13.9416 25.2543 14.15L24.9248 15.8089H24.189L24.7659 12.9204Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3782 15.5882C21.1707 15.3899 21.0659 15.1224 21.0649 14.7828C21.0649 14.7247 21.0685 14.6587 21.0762 14.5864C21.0838 14.5132 21.0935 14.442 21.1072 14.3759C21.2012 13.907 21.4016 13.5348 21.7102 13.2602C22.0183 12.9846 22.3901 12.8462 22.8253 12.8462C23.1817 12.8462 23.4644 12.9459 23.6715 13.1452C23.8783 13.3456 23.982 13.6161 23.982 13.96C23.982 14.0189 23.9775 14.087 23.9699 14.1603C23.9607 14.2345 23.9496 14.3057 23.9367 14.3759C23.8448 14.8376 23.6451 15.2058 23.3364 15.4754C23.0277 15.747 22.657 15.8821 22.2248 15.8821C21.8669 15.8821 21.5851 15.7845 21.3782 15.5882ZM22.8899 15.0166C23.0297 14.8651 23.1299 14.6352 23.1909 14.3291C23.2001 14.2814 23.2082 14.2315 23.2132 14.1816C23.2183 14.1328 23.2203 14.087 23.2203 14.0454C23.2203 13.8674 23.1751 13.7291 23.0841 13.6314C22.9936 13.5327 22.865 13.484 22.6988 13.484C22.479 13.484 22.3001 13.5612 22.1598 13.7158C22.0183 13.8704 21.9182 14.1044 21.8551 14.4156C21.8465 14.4634 21.8394 14.5112 21.8328 14.558C21.8277 14.6058 21.8262 14.6505 21.8272 14.6912C21.8272 14.8682 21.8725 15.0045 21.9635 15.101C22.0539 15.1977 22.182 15.2455 22.3504 15.2455C22.5711 15.2455 22.7501 15.1692 22.8899 15.0166Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8825 12.9212H20.6758L20.0544 15.8077H19.2627L19.8825 12.9212ZM20.1322 11.8696H20.9325L20.7831 12.5703H19.9828L20.1322 11.8696Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5619 12.9204H17.2773L17.1955 13.3374L17.2982 13.2184C17.5301 12.9703 17.8118 12.8472 18.1443 12.8472C18.4453 12.8472 18.6624 12.9347 18.7987 13.1106C18.9329 13.2866 18.9695 13.5296 18.9061 13.8419L18.5119 15.8089H17.7767L18.1326 14.026C18.1693 13.8419 18.1591 13.7046 18.1026 13.616C18.0467 13.5276 17.9399 13.4839 17.7858 13.4839C17.5967 13.4839 17.4375 13.5428 17.3079 13.6598C17.1777 13.7778 17.0918 13.9416 17.0496 14.15L16.7216 15.8089H15.9849L16.5619 12.9204Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6288 14.1937C15.517 14.742 15.2576 15.163 14.8554 15.462C14.4568 15.756 13.9427 15.9034 13.3132 15.9034C12.7209 15.9034 12.2866 15.7529 12.0095 15.4508C11.8173 15.2362 11.7217 14.9636 11.7217 14.6341C11.7217 14.4978 11.738 14.3514 11.7705 14.1937L12.4412 10.9595H13.4541L12.7926 14.1571C12.7722 14.2456 12.7641 14.328 12.7651 14.4022C12.7641 14.566 12.8047 14.7002 12.8871 14.805C13.0071 14.9606 13.2018 15.0379 13.4729 15.0379C13.7845 15.0379 14.0413 14.9616 14.2406 14.808C14.44 14.6555 14.5702 14.4389 14.6286 14.1571L15.2922 10.9595H16.3L15.6288 14.1937Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_5382_46856">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 8.9 KiB

16
apps/scandic-web/public/_static/icons/payment/vipps.svg
View File

@@ -1,16 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46850)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path d="M6.90907 12L8.53179 16.0452L10.1227 12H12L9.20003 18H7.80002L5 12H6.90907Z" fill="#FF5B24"/>
<path d="M16.1872 17.4091C17.3542 17.4091 18.0166 16.7728 18.6475 15.8536C18.9944 15.3586 19.436 15.2526 19.7515 15.5354C20.0669 15.8182 20.0984 16.3485 19.7515 16.8435C18.8367 18.1869 17.6696 19 16.1872 19C14.5785 19 13.1591 18.0101 12.1813 16.2778C11.8974 15.8182 11.9605 15.3232 12.2759 15.0758C12.5913 14.8283 13.0645 14.9343 13.3483 15.4293C14.0423 16.596 14.9886 17.4091 16.1872 17.4091ZM18.3636 13.0606C18.3636 13.697 17.922 14.1212 17.4173 14.1212C16.9126 14.1212 16.4711 13.697 16.4711 13.0606C16.4711 12.4242 16.9126 12 17.4173 12C17.922 12 18.3636 12.4596 18.3636 13.0606Z" fill="#FF5B24"/>
<path d="M22.75 12.1777V13.0658C23.2273 12.4441 23.9591 12 25.041 12C26.4091 12 28 13.0658 28 15.3454C28 17.7434 26.4727 18.898 24.8818 18.898C24.0546 18.898 23.2909 18.602 22.7182 17.8619V21H21V12.1777H22.75ZM22.75 15.4342C22.75 16.7665 23.5773 17.477 24.5001 17.477C25.3909 17.477 26.2818 16.8257 26.2818 15.4342C26.2818 14.0724 25.3909 13.4211 24.5001 13.4211C23.6091 13.4211 22.75 14.0428 22.75 15.4342Z" fill="#FF5B24"/>
<path d="M30.75 12.1777V13.0658C31.2273 12.4441 31.9591 12 33.041 12C34.4091 12 36 13.0658 36 15.3454C36 17.7434 34.4727 18.898 32.8818 18.898C32.0546 18.898 31.2909 18.602 30.7182 17.8619V21H29V12.1777H30.75ZM30.75 15.4342C30.75 16.7665 31.5773 17.477 32.5001 17.477C33.3909 17.477 34.2818 16.8257 34.2818 15.4342C34.2818 14.0724 33.3909 13.4211 32.5001 13.4211C31.5773 13.4211 30.75 14.0428 30.75 15.4342Z" fill="#FF5B24"/>
<path d="M39.0164 12C40.4919 12 41.5411 12.6309 42 14.1932L40.3937 14.4335C40.3606 13.6524 39.836 13.382 39.0492 13.382C38.459 13.382 38 13.6223 38 14.0129C38 14.3133 38.2295 14.6138 38.9181 14.7339L40.1314 14.9442C41.3114 15.1545 41.9674 15.8755 41.9674 16.837C41.9674 18.279 40.5572 19 39.2131 19C37.8033 19 36.2295 18.3391 36 16.7168L37.6066 16.4764C37.7049 17.3176 38.2623 17.6181 39.1803 17.6181C39.8691 17.6181 40.328 17.3777 40.328 16.9872C40.328 16.6267 40.0983 16.3562 39.3443 16.2361L38.2295 16.0558C37.0492 15.8455 36.3279 15.0944 36.3279 14.1331C36.3607 12.6309 37.8361 12 39.0164 12Z" fill="#FF5B24"/>
</g>
<defs>
<clipPath id="clip0_5382_46850">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

16
apps/scandic-web/public/_static/icons/payment/visa.svg
View File

@@ -1,16 +0,0 @@
<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_5382_46849)">
<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6666 17.9752L36.1294 14.0252L36.9523 17.9752H34.6666ZM40.3807 21.1352L38.3234 10.8652H35.4952C34.5409 10.8652 34.3088 11.6306 34.3088 11.6306L30.4761 21.1352H33.1546L33.6907 19.61H36.9578L37.2591 21.1352H40.3807Z" fill="#182E66"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8747 13.4287L31.2382 11.2978C31.2382 11.2978 30.1159 10.8652 28.946 10.8652C27.6813 10.8652 24.6783 11.4258 24.6783 14.1498C24.6783 16.7132 28.2029 16.7451 28.2029 18.0909C28.2029 19.4367 25.0415 19.1963 23.9983 18.3473L23.6191 20.5747C23.6191 20.5747 24.7569 21.1352 26.496 21.1352C28.2349 21.1352 30.8588 20.222 30.8588 17.7384C30.8588 15.1588 27.3022 14.9186 27.3022 13.7971C27.3022 12.6755 29.7842 12.8196 30.8747 13.4287Z" fill="#182E66"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8609 21.1352H19.0479L20.806 10.8652H23.6193L21.8609 21.1352Z" fill="#182E66"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9246 10.8652L14.3688 17.9288L14.0666 16.4076L14.0669 16.4082L13.1647 11.7902C13.1647 11.7902 13.0559 10.8652 11.8931 10.8652H7.66846L7.61914 11.0389C7.61914 11.0389 8.91138 11.307 10.4229 12.2133L12.7518 21.1352H15.5448L19.8096 10.8652H16.9246Z" fill="#182E66"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7144 16.3952L12.8615 11.788C12.8615 11.788 12.7586 10.8652 11.6594 10.8652H7.66574L7.61914 11.0384C7.61914 11.0384 9.53878 11.4575 11.3803 13.0263C13.1403 14.526 13.7144 16.3952 13.7144 16.3952Z" fill="#182E66"/>
</g>
<defs>
<clipPath id="clip0_5382_46849">
<rect width="48" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

4
apps/scandic-web/utils/tracking/payment.ts
View File

@@ -9,11 +9,11 @@ function isPaymentFailEvent(event: PaymentEvent): event is PaymentFailEvent {
return "errorMessage" in event
}
export function trackUpdatePaymentMethod(hotelId: string, method: string) {
export function trackUpdatePaymentMethod({ method }: { method: string }) {
trackEvent({
event: "paymentSelection",
hotelInfo: {
hotelId: hotelId,
hotelId: "", // TODO: Needs to be verified with analytics if this should even be here
},
cta: {
name: method,

25
packages/common/constants/paymentMethod.ts
View File

@@ -21,3 +21,28 @@ export enum PaymentMethodEnum {
chinaUnionPay = "chinaUnionPay",
discover = "discover",
}
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",
americanExpress: "American Express",
dankort: "Dankort",
dinersClub: "Diners Club",
jcb: "JCB",
masterCard: "Mastercard",
visa: "Visa",
maestro: "Maestro",
chinaUnionPay: "China UnionPay",
discover: "Discover",
}

10
packages/design-system/.storybook/decorators/FormDecorator.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { FormProvider, useForm } from 'react-hook-form'
export const FormDecorator = (Story: React.FC) => {
const formMethods = useForm()
return (
<FormProvider {...formMethods}>
<Story />
</FormProvider>
)
}

18
packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx Normal file
View File

@@ -0,0 +1,18 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import Checkbox from './index'
import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
const meta: Meta<typeof Checkbox> = {
title: 'Components/Form/Checkbox',
component: Checkbox,
decorators: [FormDecorator],
args: { name: 'checkbox' },
}
export default meta
type Story = StoryObj<typeof Checkbox>
export const Default: Story = {
args: {},
}

53
packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { cx } from 'class-variance-authority'
import { Label, Radio } from 'react-aria-components'
import styles from './paymentOption.module.css'
import type { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
import { PaymentMethodIcon } from '../../Payment/PaymentMethodIcon'
import { Typography } from '../../Typography'
export type PaymentOptionProps = {
value: PaymentMethodEnum
label: string
cardNumber?: string
}
export function PaymentOption({
value,
label,
cardNumber,
}: PaymentOptionProps) {
return (
<Radio
value={value}
className={({ isFocusVisible }) =>
cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
}
>
{({ isSelected }) => (
<>
<div className={styles.titleContainer}>
<span
className={cx(styles.radio, { [styles.selected]: isSelected })}
aria-hidden
/>
<Typography variant="Body/Paragraph/mdRegular">
<Label>{label}</Label>
</Typography>
</div>
{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} />
)}
</>
)}
</Radio>
)
}

46
packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx Normal file
View File

@@ -0,0 +1,46 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { expect, fn } from 'storybook/test'
import { PaymentOptionsGroup } from './PaymentOptionsGroup'
import { PaymentOption } from './PaymentOption'
import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
const meta: Meta<typeof PaymentOptionsGroup> = {
title: 'Components/Payment/PaymentOptionsGroup',
component: PaymentOptionsGroup,
decorators: [FormDecorator],
}
export default meta
type Story = StoryObj<typeof PaymentOptionsGroup>
export const Default: Story = {
args: {
label: 'Select Payment Method',
name: 'paymentMethod',
onChange: fn(),
children: (
<>
<PaymentOption label="Visa" value={PaymentMethodEnum.visa} />
<PaymentOption
label="American Express"
value={PaymentMethodEnum.americanExpress}
/>
<PaymentOption
label="MasterCard"
value={PaymentMethodEnum.masterCard}
cardNumber="1234"
/>
</>
),
},
play: async ({ canvas, userEvent, args }) => {
const visaOption = await canvas.findByRole('radio', { name: 'Visa' })
expect(visaOption).toBeInTheDocument()
expect(args.onChange).not.toHaveBeenCalled()
await userEvent.click(visaOption)
expect(args.onChange).toHaveBeenCalledWith('visa')
},
}

23
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup/index.tsx → packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx
View File

@@ -1,39 +1,38 @@
"use client"
'use client'
import { Label, RadioGroup } from "react-aria-components"
import { useController, useFormContext } from "react-hook-form"
import { Label, RadioGroup } from 'react-aria-components'
import { useController, useFormContext } from 'react-hook-form'
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackUpdatePaymentMethod } from "@/utils/tracking"
import type { ReactNode } from "react"
import type { ReactNode } from 'react'
import { Typography } from '../../../components/Typography'
interface PaymentOptionsGroupProps {
name: string
label?: string
children: ReactNode
className?: string
onChange?: (newValue: string) => void
}
export default function PaymentOptionsGroup({
export function PaymentOptionsGroup({
name,
label,
children,
className,
onChange,
}: PaymentOptionsGroupProps) {
const { control } = useFormContext()
const {
field: { value, onChange },
field: { value, onChange: formOnChange },
} = useController({
name,
control,
})
const handleChange = (newValue: string) => {
onChange(newValue)
trackUpdatePaymentMethod("", newValue)
formOnChange(newValue)
onChange?.(newValue)
}
return (

0
apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.module.css → packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css
View File

45
packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx Normal file
View File

@@ -0,0 +1,45 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { fn, expect } from 'storybook/test'
import { SelectPaymentMethod } from './index'
import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
const meta: Meta<typeof SelectPaymentMethod> = {
title: 'Components/Payment/SelectCreditCard',
component: SelectPaymentMethod,
argTypes: {},
decorators: [FormDecorator],
}
export default meta
type Story = StoryObj<typeof SelectPaymentMethod>
export const PrimaryDefault: Story = {
args: {
onChange: fn(),
paymentMethods: [
{
id: 'klarna',
alias: 'Card 1',
cardType: PaymentMethodEnum.klarna,
truncatedNumber: '1234',
},
{
id: 'applePay',
alias: 'Card 2',
cardType: PaymentMethodEnum.applePay,
truncatedNumber: '1234',
},
],
},
play: async ({ canvas, userEvent, args }) => {
const options = await canvas.findAllByRole('radio')
expect(options[0]).toBeInTheDocument()
expect(args.onChange).not.toHaveBeenCalled()
await userEvent.click(options[0])
expect(args.onChange).toHaveBeenCalledWith('klarna')
},
}

62
packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { useIntl } from 'react-intl'
import { PaymentOptionsGroup } from '../PaymentOption/PaymentOptionsGroup'
import { PaymentOption } from '../PaymentOption/PaymentOption'
import styles from './selectPaymentMethod.module.css'
import {
PAYMENT_METHOD_TITLES,
type PaymentMethodEnum,
} from '@scandic-hotels/common/constants/paymentMethod'
type PaymentMethod = {
id: string
truncatedNumber: string
alias: string
cardType: PaymentMethodEnum
}
type SelectPaymentMethodProps = {
paymentMethods: PaymentMethod[]
onChange: (value: string) => void
formName: string
}
export function SelectPaymentMethod({
paymentMethods,
onChange,
formName,
}: SelectPaymentMethodProps) {
const intl = useIntl()
const mySavedCardsLabel = intl.formatMessage({
defaultMessage: 'MY SAVED CARDS',
})
return (
<section className={styles.section}>
<PaymentOptionsGroup
name={formName}
label={mySavedCardsLabel}
className={styles.paymentOptionContainer}
onChange={onChange}
>
{paymentMethods?.map((paymentMethods) => {
const label =
PAYMENT_METHOD_TITLES[paymentMethods.cardType] ||
paymentMethods.alias ||
paymentMethods.cardType
return (
<PaymentOption
key={paymentMethods.id}
value={paymentMethods.id as PaymentMethodEnum}
label={label}
cardNumber={paymentMethods.truncatedNumber}
/>
)
})}
</PaymentOptionsGroup>
</section>
)
}

0
apps/scandic-web/components/HotelReservation/MySavedCards/mySavedCards.module.css → packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css
View File

48
packages/design-system/lib/components/Payment/Icons/AmericanExpressIcon.tsx Normal file
View File

@@ -0,0 +1,48 @@
import type { PaymentIconProps } from './IconProps'
export const AmericanExpressIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46857)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="#0690FF"
/>
<mask
id="mask0_5382_46857"
style={{ maskType: 'luminance' }}
maskUnits="userSpaceOnUse"
x="16"
y="0"
width="32"
height="32"
>
<path
d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_5382_46857)">
<path
d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<path
d="M48 32V26.9295H44.1396L42.152 24.7317L40.1544 26.9295H27.4257V16.6865H23.3175L28.4133 5.15416H33.3278L35.082 9.10496V5.15416H41.1652L42.2212 8.13132L43.2844 5.15416H48V0H16V32H48ZM44.7896 25.647H48L43.7536 21.1438L48 16.6916H44.8408L42.2184 19.5574L39.621 16.6916H36.41L40.6316 21.1694L36.41 25.647H39.5316L42.1672 22.7557L44.7896 25.647ZM45.5408 21.1475L48 23.7638V18.5531L45.5408 21.1475ZM31.2287 23.5745V22.18H36.2819V20.1586H31.2287V18.7642H36.4098L36.41 16.6916H28.785V25.647H36.41L36.4098 23.5745H31.2287ZM45.582 15.3921H48V6.43668H44.2388L42.23 12.0145L40.2344 6.43668H36.4092V15.3921H38.827V9.12332L41.13 15.3921H43.2792L45.582 9.1104V15.3921ZM33.6586 15.3921H36.4092L32.4562 6.43668H29.3089L25.3556 15.3921H28.0422L28.7844 13.601H32.9038L33.6586 15.3921ZM32.0595 11.5924H29.6286L30.8441 8.66272L32.0595 11.5924Z"
fill="#0690FF"
/>
</g>
</g>
<defs>
<clipPath id="clip0_5382_46857">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)

67
packages/design-system/lib/components/Payment/Icons/ApplePayIcon.tsx Normal file
View File

@@ -0,0 +1,67 @@
import type { PaymentIconProps } from './IconProps'
export const ApplePayIcon = (props: PaymentIconProps) => {
return (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46859)">
<mask
id="mask0_5382_46859"
style={{ maskType: 'luminance' }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="48"
height="32"
>
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_5382_46859)">
<path
d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z"
fill="white"
/>
<path
d="M22.2209 9.16162C24.4408 9.16162 25.9866 10.6918 25.9866 12.9197C25.9866 15.1555 24.409 16.6936 22.1653 16.6936H19.7074V20.6023H17.9316V9.16162H22.2209ZM19.7074 15.203H21.745C23.2911 15.203 24.171 14.3706 24.171 12.9276C24.171 11.4847 23.2911 10.6601 21.753 10.6601H19.7074V15.203Z"
fill="black"
/>
<path
d="M26.4507 18.2316C26.4507 16.7727 27.5686 15.8768 29.5508 15.7658L31.834 15.6311V14.9889C31.834 14.0613 31.2076 13.5063 30.1613 13.5063C29.17 13.5063 28.5516 13.9819 28.4011 14.7273H26.7838C26.8789 13.2208 28.1632 12.1108 30.2246 12.1108C32.2463 12.1108 33.5386 13.1812 33.5386 14.854V20.6021H31.8974V19.2305H31.8579C31.3743 20.1582 30.3198 20.7448 29.2257 20.7448C27.5924 20.7448 26.4507 19.73 26.4507 18.2316ZM31.834 17.4784V16.8204L29.7805 16.9472C28.7578 17.0186 28.1791 17.4705 28.1791 18.184C28.1791 18.9133 28.7816 19.3891 29.7013 19.3891C30.8984 19.3891 31.834 18.5645 31.834 17.4784Z"
fill="black"
/>
<path
d="M35.0882 23.6707V22.2832C35.2149 22.3148 35.5002 22.3148 35.6431 22.3148C36.4358 22.3148 36.864 21.9819 37.1256 21.1257C37.1256 21.1098 37.2763 20.6182 37.2763 20.6103L34.2637 12.2617H36.1187L38.2278 19.0484H38.2594L40.3684 12.2617H42.176L39.0521 21.0384C38.3389 23.0602 37.5143 23.7103 35.7859 23.7103C35.6431 23.7103 35.2149 23.6944 35.0882 23.6707Z"
fill="black"
/>
<path
d="M12.6941 10.2782C13.1221 9.74283 13.4126 9.02407 13.336 8.28955C12.7094 8.32071 11.9449 8.70287 11.5023 9.23863C11.1048 9.69739 10.7531 10.4463 10.8448 11.15C11.5481 11.211 12.2507 10.7984 12.6941 10.2782Z"
fill="black"
/>
<path
d="M13.328 11.2873C12.3067 11.2264 11.4383 11.867 10.9505 11.867C10.4625 11.867 9.71557 11.3179 8.90773 11.3327C7.85629 11.3482 6.88069 11.9427 6.34709 12.8882C5.24965 14.7797 6.05749 17.5855 7.12469 19.126C7.64297 19.8882 8.26757 20.7274 9.09057 20.6972C9.86817 20.6667 10.1729 20.1937 11.1181 20.1937C12.0627 20.1937 12.3372 20.6972 13.1603 20.682C14.0139 20.6667 14.5476 19.9194 15.0659 19.1566C15.6604 18.2878 15.9038 17.4488 15.9191 17.4028C15.9038 17.3875 14.2731 16.762 14.258 14.8862C14.2426 13.3155 15.5383 12.5684 15.5992 12.5221C14.8676 11.44 13.7243 11.3179 13.328 11.2873Z"
fill="black"
/>
<path
d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z"
stroke="black"
stroke-width="1.1"
/>
</g>
</g>
<defs>
<clipPath id="clip0_5382_46859">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}

103
packages/design-system/lib/components/Payment/Icons/ChinaUnionPayIcon.tsx Normal file
View File

@@ -0,0 +1,103 @@
import { PaymentIconProps } from './IconProps'
export const ChinaUnionPayIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46856)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M30.6113 5.67139C29.4968 5.70603 28.134 6.58371 27.8858 7.66599L24.1192 24.3347C23.871 25.4271 24.5462 26.316 25.6325 26.3323H33.9998C35.0695 26.2794 36.109 25.4118 36.3529 24.3418L40.1196 7.67299C40.372 6.56947 39.6804 5.67343 38.5761 5.67343L30.6113 5.67139Z"
fill="#01798A"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24.1192 24.3348L27.8858 7.66607C28.134 6.58379 29.4968 5.70611 30.5909 5.67255L27.4242 5.67051L21.7186 5.66943C20.6213 5.69187 19.2408 6.57571 18.9927 7.66607L15.225 24.3348C14.9759 25.4272 15.6521 26.3161 16.7376 26.3324H25.6325C24.5462 26.3161 23.871 25.4272 24.1192 24.3348Z"
fill="#024381"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.2249 24.3348L18.9926 7.66604C19.2407 6.57568 20.6212 5.69184 21.7185 5.6694L14.4093 5.66748C13.3059 5.66748 11.8913 6.56148 11.6391 7.66604L7.87136 24.3348C7.84844 24.4365 7.83572 24.5362 7.82812 24.6337V24.943C7.90189 25.7392 8.50996 26.3191 9.384 26.3324H16.7375C15.652 26.316 14.9758 25.4271 15.2249 24.3348Z"
fill="#DD0228"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21.8729 17.8153H22.0112C22.1384 17.8153 22.2239 17.7727 22.264 17.6882L22.6234 17.1502H23.586L23.3852 17.5041H24.5394L24.393 18.0462H23.0196C22.8615 18.2842 22.6668 18.3961 22.4327 18.3828H21.7174L21.8729 17.8153ZM21.7149 18.5924H24.2434L24.0822 19.1813H23.0654L22.9102 19.7498H23.8997L23.7385 20.3387H22.749L22.5192 21.1787C22.4622 21.3191 22.5371 21.3823 22.7424 21.368H23.5489L23.3995 21.9152H21.8512C21.5577 21.9152 21.457 21.7473 21.5491 21.4107L21.843 20.3387H21.2104L21.3711 19.7498H22.0037L22.1588 19.1813H21.5541L21.7149 18.5924ZM25.7507 17.1462L25.7109 17.4909C25.7109 17.4909 26.1878 17.1328 26.621 17.1328H28.2217L27.6096 19.349C27.5588 19.6024 27.3411 19.7284 26.9566 19.7284H25.1424L24.7174 21.2846C24.6929 21.368 24.7275 21.4107 24.819 21.4107H25.176L25.0448 21.8938H24.1372C23.7889 21.8938 23.644 21.789 23.7014 21.5786L24.9024 17.1462H25.7507ZM27.1062 17.7727H25.6775L25.5066 18.3707C25.5066 18.3707 25.7445 18.1989 26.1421 18.1927C26.5386 18.1865 26.9912 18.1927 26.9912 18.1927L27.1062 17.7727ZM26.5886 19.1599C26.6942 19.1742 26.7533 19.1324 26.7604 19.0337L26.8479 18.7185H25.417L25.297 19.1599H26.5886ZM25.6234 19.8759H26.4482L26.4329 20.2329H26.6525C26.7634 20.2329 26.8184 20.1973 26.8184 20.1272L26.8834 19.8963H27.5689L27.4774 20.2329C27.4 20.5136 27.1947 20.6601 26.8611 20.6744H26.4218L26.4197 21.2846C26.4117 21.3823 26.5 21.4321 26.682 21.4321H27.095L26.9617 21.9152H25.9712C25.6936 21.9284 25.5575 21.7961 25.5604 21.5155L25.6234 19.8759Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M29.1289 17.8399L29.3202 17.1667H30.2873L30.2455 17.4137C30.2455 17.4137 30.7397 17.1667 31.0956 17.1667H32.2915L32.1014 17.8399H31.9133L31.0112 21.0152H31.1993L31.0204 21.6458H30.8323L30.754 21.9194H29.8174L29.8955 21.6458H28.0479L28.2279 21.0152H28.413L29.316 17.8399H29.1289ZM30.1723 17.8399L29.9262 18.6993C29.9262 18.6993 30.3473 18.5377 30.7103 18.4919C30.7905 18.1918 30.8953 17.8399 30.8953 17.8399H30.1723ZM29.8122 19.1021L29.5652 20.0022C29.5652 20.0022 30.032 19.7724 30.3522 19.753C30.4448 19.4052 30.5374 19.1021 30.5374 19.1021H29.8122ZM29.9932 21.0152L30.1784 20.3623H29.4565L29.2704 21.0152H29.9932ZM32.3323 17.125H33.2415L33.28 17.4605C33.274 17.5459 33.3248 17.5867 33.4326 17.5867H33.5932L33.4307 18.1552H32.7624C32.5073 18.1684 32.376 18.0708 32.3639 17.8602L32.3323 17.125ZM35.0109 18.3444L34.838 18.9547H33.9004L33.7396 19.5221H34.6763L34.5024 20.1314H33.4591L33.2231 20.4885H33.7337L33.8517 21.2034C33.8658 21.2746 33.9289 21.3092 34.0367 21.3092H34.1953L34.0286 21.898H33.4672C33.1763 21.9123 33.0259 21.8146 33.0137 21.6042L32.8783 20.9512L32.4137 21.6458C32.3038 21.8421 32.1349 21.9337 31.9073 21.9194H31.0499L31.2167 21.3305H31.4842C31.5941 21.3305 31.6855 21.2817 31.7678 21.183L32.495 20.1314H31.5574L31.7312 19.5221H32.7482L32.9099 18.9547H31.8919L32.0659 18.3444H35.0109Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M35.9423 16.3673C35.6372 17.0161 35.3465 17.3944 35.1757 17.5704C35.0047 17.7444 34.6662 18.1492 33.8506 18.1186L33.9208 17.6233C34.6071 17.4118 34.9783 16.4587 35.1898 16.0367L34.9377 12.9285L35.4685 12.9214H35.9139L35.9618 14.8711L36.7965 12.9214H37.6417L35.9423 16.3673Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.5789 13.1559L33.2431 13.3869C32.8923 13.1123 32.572 12.9424 31.9538 13.2292C31.1117 13.6197 30.408 16.6151 32.7266 15.6285L32.8588 15.7851L33.771 15.8085L34.37 13.0868L33.5789 13.1559ZM33.0602 14.6439C32.9136 15.0762 32.5864 15.362 32.3301 15.2807C32.0738 15.2013 31.9823 14.7843 32.1308 14.351C32.2772 13.9177 32.6066 13.633 32.8608 13.7143C33.1171 13.7937 33.2096 14.2107 33.0602 14.6439Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M28.3048 11.1304H30.3834C30.7831 11.1304 31.0922 11.221 31.3047 11.3989C31.5162 11.5789 31.6221 11.8373 31.6221 12.1739V12.1841C31.6221 12.2481 31.6179 12.3203 31.6119 12.3986C31.6016 12.4759 31.5883 12.5542 31.5712 12.6356C31.4797 13.0811 31.2671 13.4391 30.9387 13.7107C30.6091 13.9812 30.2187 14.1175 29.7692 14.1175H28.6546L28.3099 15.8089H27.3447L28.3048 11.1304ZM28.8243 13.3039H29.7489C29.9898 13.3039 30.181 13.2479 30.3204 13.1371C30.4587 13.0252 30.5502 12.8544 30.601 12.6225C30.6091 12.5797 30.6141 12.5411 30.6203 12.5055C30.6234 12.472 30.6274 12.4383 30.6274 12.4059C30.6274 12.24 30.5686 12.12 30.4505 12.0447C30.3326 11.9684 30.1476 11.9319 29.8912 11.9319H29.1061L28.8243 13.3039Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24.7659 12.9204H25.4819L25.4007 13.3374L25.5022 13.2184C25.7342 12.9703 26.0169 12.8472 26.3484 12.8472C26.6495 12.8472 26.867 12.9347 27.0022 13.1106C27.1356 13.2866 27.1742 13.5296 27.109 13.8419L26.7165 15.8089H25.9802L26.3363 14.026C26.3728 13.8419 26.3627 13.7046 26.3067 13.616C26.2487 13.5276 26.1439 13.4839 25.9905 13.4839C25.8013 13.4839 25.6427 13.5428 25.5115 13.6598C25.3812 13.7778 25.2949 13.9416 25.2543 14.15L24.9248 15.8089H24.189L24.7659 12.9204Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21.3782 15.5882C21.1707 15.3899 21.0659 15.1224 21.0649 14.7828C21.0649 14.7247 21.0685 14.6587 21.0762 14.5864C21.0838 14.5132 21.0935 14.442 21.1072 14.3759C21.2012 13.907 21.4016 13.5348 21.7102 13.2602C22.0183 12.9846 22.3901 12.8462 22.8253 12.8462C23.1817 12.8462 23.4644 12.9459 23.6715 13.1452C23.8783 13.3456 23.982 13.6161 23.982 13.96C23.982 14.0189 23.9775 14.087 23.9699 14.1603C23.9607 14.2345 23.9496 14.3057 23.9367 14.3759C23.8448 14.8376 23.6451 15.2058 23.3364 15.4754C23.0277 15.747 22.657 15.8821 22.2248 15.8821C21.8669 15.8821 21.5851 15.7845 21.3782 15.5882ZM22.8899 15.0166C23.0297 14.8651 23.1299 14.6352 23.1909 14.3291C23.2001 14.2814 23.2082 14.2315 23.2132 14.1816C23.2183 14.1328 23.2203 14.087 23.2203 14.0454C23.2203 13.8674 23.1751 13.7291 23.0841 13.6314C22.9936 13.5327 22.865 13.484 22.6988 13.484C22.479 13.484 22.3001 13.5612 22.1598 13.7158C22.0183 13.8704 21.9182 14.1044 21.8551 14.4156C21.8465 14.4634 21.8394 14.5112 21.8328 14.558C21.8277 14.6058 21.8262 14.6505 21.8272 14.6912C21.8272 14.8682 21.8725 15.0045 21.9635 15.101C22.0539 15.1977 22.182 15.2455 22.3504 15.2455C22.5711 15.2455 22.7501 15.1692 22.8899 15.0166Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.8825 12.9212H20.6758L20.0544 15.8077H19.2627L19.8825 12.9212ZM20.1322 11.8696H20.9325L20.7831 12.5703H19.9828L20.1322 11.8696Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.5619 12.9204H17.2773L17.1955 13.3374L17.2982 13.2184C17.5301 12.9703 17.8118 12.8472 18.1443 12.8472C18.4453 12.8472 18.6624 12.9347 18.7987 13.1106C18.9329 13.2866 18.9695 13.5296 18.9061 13.8419L18.5119 15.8089H17.7767L18.1326 14.026C18.1693 13.8419 18.1591 13.7046 18.1026 13.616C18.0467 13.5276 17.9399 13.4839 17.7858 13.4839C17.5967 13.4839 17.4375 13.5428 17.3079 13.6598C17.1777 13.7778 17.0918 13.9416 17.0496 14.15L16.7216 15.8089H15.9849L16.5619 12.9204Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.6288 14.1937C15.517 14.742 15.2576 15.163 14.8554 15.462C14.4568 15.756 13.9427 15.9034 13.3132 15.9034C12.7209 15.9034 12.2866 15.7529 12.0095 15.4508C11.8173 15.2362 11.7217 14.9636 11.7217 14.6341C11.7217 14.4978 11.738 14.3514 11.7705 14.1937L12.4412 10.9595H13.4541L12.7926 14.1571C12.7722 14.2456 12.7641 14.328 12.7651 14.4022C12.7641 14.566 12.8047 14.7002 12.8871 14.805C13.0071 14.9606 13.2018 15.0379 13.4729 15.0379C13.7845 15.0379 14.0413 14.9616 14.2406 14.808C14.44 14.6555 14.5702 14.4389 14.6286 14.1571L15.2922 10.9595H16.3L15.6288 14.1937Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_5382_46856">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)

45
packages/design-system/lib/components/Payment/Icons/DanKortIcon.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { PaymentIconProps } from './IconProps'
export const DanKortIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46855)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
<path
d="M16.6894 5.12549C10.7022 5.12549 5.83105 10.0036 5.83105 15.9995C5.83105 21.996 10.7022 26.8746 16.6894 26.8746H31.3125C37.2989 26.8746 42.1694 21.996 42.1694 15.9995C42.1694 10.0036 37.2989 5.12549 31.3125 5.12549H16.6894Z"
fill="white"
/>
<path
d="M30.5917 21.6152L26.5498 16.499C25.8021 19.9873 23.3557 21.6146 18.7696 21.6146H9.62988C11.2833 23.6955 13.833 25.0323 16.689 25.0323H31.3122C34.1671 25.0323 36.7163 23.6961 38.3698 21.6152H30.5917Z"
fill="#E41D27"
/>
<path
d="M33.8687 15.3357L38.7313 21.1278C39.7384 19.6701 40.3297 17.9031 40.3297 15.9997C40.3297 13.9909 39.6709 12.133 38.5589 10.6313L33.8687 15.3357Z"
fill="#E41D27"
/>
<path
d="M14.1063 14.0054L12.8096 17.5764H18.0415C19.5881 17.5764 20.0561 16.9351 20.4022 15.7004C20.7448 14.4792 19.8844 14.0054 18.8274 14.0054H14.1063Z"
fill="#E41D27"
/>
<path
d="M20.0894 10.1422C23.7207 10.1422 26.4568 11.0676 26.7384 14.132L30.5601 10.1418H38.17C36.5146 8.2011 34.0545 6.96826 31.3123 6.96826H16.6892C13.9461 6.96826 11.4856 8.2011 9.83008 10.1422H20.0894Z"
fill="#E41D27"
/>
</g>
<defs>
<clipPath id="clip0_5382_46855">
<rect width="48" height="32" rx="3" fill="white" />
</clipPath>
</defs>
</svg>
)

47
packages/design-system/lib/components/Payment/Icons/DinersClubIcon.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { PaymentIconProps } from './IconProps'
export const DinersClubIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46858)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="url(#paint0_linear_5382_46858)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M26.16 25.9335C31.6086 25.9594 36.5818 21.505 36.5818 16.086C36.5818 10.16 31.6086 6.06396 26.16 6.06592H21.4708C15.9569 6.06396 11.4185 10.1613 11.4185 16.086C11.4185 21.5062 15.9569 25.9595 21.4708 25.9335H26.16Z"
fill="#3477B9"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21.474 6.86084C16.4355 6.8624 12.3527 10.9325 12.3516 15.9558C12.3527 20.9782 16.4355 25.0479 21.474 25.0495C26.5136 25.0479 30.5972 20.9782 30.598 15.9558C30.5972 10.9325 26.5136 6.8624 21.474 6.86084ZM15.6915 15.9558C15.6963 13.5011 17.2345 11.4079 19.4037 10.5761V21.3342C17.2345 20.5028 15.6962 18.4108 15.6915 15.9558ZM23.5435 21.3366V10.5758C25.7134 11.4056 27.2541 13.4999 27.258 15.9558C27.2541 18.4124 25.7134 20.5052 23.5435 21.3366Z"
fill="white"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_5382_46858"
x1="8.9407e-07"
y1="8.4"
x2="48"
y2="21.6"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3479C0" />
<stop offset="1" stop-color="#133362" />
</linearGradient>
<clipPath id="clip0_5382_46858">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)

102
packages/design-system/lib/components/Payment/Icons/DiscoverIcon.tsx Normal file
View File

@@ -0,0 +1,102 @@
import { PaymentIconProps } from './IconProps'
export const DiscoverIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46865)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.6001 32.0002H46.4009C47.2841 32.0002 48.0001 31.2846 48.0001 30.3985V19.2002C48.0001 19.2002 35.1447 28.0427 11.6001 32.0002Z"
fill="#E7792B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M45.2353 13.545C45.2353 12.2851 44.3553 11.5581 42.8213 11.5581H40.8481V18.2879H42.1773V15.5844H42.3509L44.1925 18.2879H45.8285L43.6809 15.4526C44.6833 15.2517 45.2353 14.5754 45.2353 13.545ZM42.5657 14.6565H42.1773V12.6181H42.5869C43.4153 12.6181 43.8661 12.9608 43.8661 13.6155C43.8661 14.2923 43.4153 14.6565 42.5657 14.6565Z"
fill="#1A1918"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M36.1934 18.2879H39.9668V17.1486H37.5229V15.332H39.8767V14.1921H37.5229V12.6985H39.9668V11.5581H36.1934V18.2879Z"
fill="#1A1918"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M32.3072 16.0784L30.4883 11.5581H29.0347L31.9295 18.4605H32.6453L35.5921 11.5581H34.1498L32.3072 16.0784Z"
fill="#1A1918"
/>
<path
d="M25.8471 18.6877C27.8847 18.6877 29.5366 17.058 29.5366 15.0477C29.5366 13.0374 27.8847 11.4077 25.8471 11.4077C23.8095 11.4077 22.1577 13.0374 22.1577 15.0477C22.1577 17.058 23.8095 18.6877 25.8471 18.6877Z"
fill="url(#paint0_radial_5382_46865)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.4893 14.9275C16.4893 16.9056 18.0636 18.4393 20.0896 18.4393C20.6623 18.4393 21.1527 18.3283 21.7577 18.0472V16.502C21.2257 17.0272 20.7548 17.2391 20.1515 17.2391C18.8115 17.2391 17.8604 16.2805 17.8604 14.9176C17.8604 13.6256 18.8415 12.6064 20.0896 12.6064C20.7242 12.6064 21.2046 12.8298 21.7577 13.3636V11.8192C21.1738 11.5269 20.6934 11.4058 20.121 11.4058C18.1053 11.4058 16.4893 12.9707 16.4893 14.9275Z"
fill="#1A1918"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.1073 14.1406C13.3088 13.8492 13.0745 13.6568 13.0745 13.2933C13.0745 12.8692 13.4922 12.5473 14.0657 12.5473C14.4644 12.5473 14.7919 12.7088 15.1385 13.0923L15.8347 12.193C15.2626 11.6992 14.5782 11.4468 13.8303 11.4468C12.6234 11.4468 11.7029 12.2736 11.7029 13.3752C11.7029 14.3023 12.1316 14.7769 13.381 15.2207C13.902 15.4019 14.1671 15.5225 14.301 15.6039C14.5666 15.7753 14.6997 16.0176 14.6997 16.3002C14.6997 16.8454 14.2604 17.2495 13.6667 17.2495C13.0321 17.2495 12.5211 16.9364 12.2146 16.3519L11.355 17.1686C11.968 18.0562 12.7043 18.4496 13.7167 18.4496C15.0992 18.4496 16.0693 17.5427 16.0693 16.2399C16.0693 15.1707 15.6207 14.6866 14.1073 14.1406Z"
fill="#1A1918"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.52344 11.5581H10.854V18.2879H9.52344V11.5581Z"
fill="#1A1918"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.24987 11.5581H3.29688V18.2879H5.2396C6.27264 18.2879 7.01844 18.0474 7.67332 17.5111C8.45152 16.8756 8.91164 15.918 8.91164 14.9277C8.91164 12.9415 7.40767 11.5581 5.24987 11.5581ZM6.8042 16.6135C6.38596 16.9861 5.84312 17.1486 4.98348 17.1486H4.6264V12.6985H4.98348C5.84312 12.6985 6.36463 12.85 6.8042 13.2426C7.26432 13.6469 7.54104 14.2733 7.54104 14.9178C7.54104 15.5639 7.26432 16.2095 6.8042 16.6135Z"
fill="#1A1918"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M46.0842 11.8109C46.0842 11.6931 46.0022 11.6284 45.8574 11.6284H45.665V12.2199H45.8082V11.9906L45.9758 12.2199H46.1506L45.9534 11.976C46.0378 11.9537 46.0842 11.8931 46.0842 11.8109ZM45.8322 11.8918H45.8082V11.7371H45.8338C45.9046 11.7371 45.9414 11.7623 45.9414 11.813C45.9414 11.8655 45.9042 11.8918 45.8322 11.8918Z"
fill="#1A1918"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M45.8858 11.4077C45.5946 11.4077 45.3638 11.637 45.3638 11.9233C45.3638 12.2096 45.5974 12.4392 45.8858 12.4392C46.1694 12.4392 46.4018 12.2072 46.4018 11.9233C46.4018 11.641 46.1694 11.4077 45.8858 11.4077ZM45.8838 12.3471C45.655 12.3471 45.4674 12.1589 45.4674 11.9241C45.4674 11.6885 45.6526 11.5006 45.8838 11.5006C46.1118 11.5006 46.2978 11.693 46.2978 11.9241C46.2978 12.1568 46.1118 12.3471 45.8838 12.3471Z"
fill="#1A1918"
/>
</g>
<defs>
<radialGradient
id="paint0_radial_5382_46865"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(28.6 17.5998) rotate(-142.431) scale(6.56048 6.47264)"
>
<stop stop-color="#F59900" />
<stop offset="0.210082" stop-color="#F39501" />
<stop offset="0.908163" stop-color="#CE3C0B" />
<stop offset="1" stop-color="#A4420A" />
</radialGradient>
<clipPath id="clip0_5382_46865">
<rect width="48" height="32" rx="3" fill="white" />
</clipPath>
</defs>
</svg>
)

76
packages/design-system/lib/components/Payment/Icons/GenericCardIcon.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { PaymentIconProps } from './IconProps'
export const GenericCardIcon = (props: PaymentIconProps) => {
return (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46864)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="url(#paint0_linear_5382_46864)"
/>
<path
d="M38.8104 26H33.2104"
stroke="white"
stroke-width="1.6"
stroke-linecap="round"
/>
<path
d="M30.3412 26H24.7412"
stroke="white"
stroke-width="1.6"
stroke-linecap="round"
/>
<path
d="M21.872 26H16.272"
stroke="white"
stroke-width="1.6"
stroke-linecap="round"
/>
<path
d="M13.4027 26H7.80273"
stroke="white"
stroke-width="1.6"
stroke-linecap="round"
/>
<path
d="M12.869 9.59473H7.53566C6.35746 9.59473 5.40234 10.5498 5.40234 11.728V15.4614C5.40234 16.6396 6.35746 17.5947 7.53566 17.5947H12.869C14.0472 17.5947 15.0023 16.6396 15.0023 15.4614V11.728C15.0023 10.5498 14.0472 9.59473 12.869 9.59473Z"
fill="#EDEDED"
/>
<path
d="M9.00811 9.99997V17.2M9.00811 14.8H5.80811M14.6081 14.8H11.4081M9.00811 12.4H5.80811M14.5974 12.4H11.3014V17.2213M7.53611 9.86133H12.8694C13.9004 9.86133 14.7361 10.697 14.7361 11.728V15.4613C14.7361 16.4922 13.9004 17.328 12.8694 17.328H7.53611C6.50515 17.328 5.66943 16.4922 5.66943 15.4613V11.728C5.66943 10.697 6.50515 9.86133 7.53611 9.86133Z"
stroke="black"
stroke-width="0.5332"
/>
<path
d="M42.597 6H36.9971"
stroke="#EDEDED"
stroke-width="1.6"
stroke-linecap="round"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_5382_46864"
x1="13.9733"
y1="6.18668"
x2="21.975"
y2="23.9969"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C1C1C1" />
<stop offset="1" stop-color="#9F9F9F" />
</linearGradient>
<clipPath id="clip0_5382_46864">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}

58
packages/design-system/lib/components/Payment/Icons/GooglePayIcon.tsx Normal file
View File

@@ -0,0 +1,58 @@
import { PaymentIconProps } from './IconProps'
export const GooglePayIcon = (props: PaymentIconProps) => {
return (
<svg
width="48"
height="26"
viewBox="0 0 48 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5597_436)">
<path
d="M35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z"
fill="white"
/>
<path
d="M35.234 1.053C36.8106 1.053 38.3426 1.3715 39.7851 1.9955C41.183 2.6 42.434 3.4645 43.5191 4.563C44.5979 5.6615 45.4468 6.942 46.0404 8.3655C46.6532 9.8345 46.966 11.3945 46.966 13C46.966 14.6055 46.6532 16.1655 46.0404 17.6345C45.4468 19.058 44.5979 20.332 43.5191 21.437C42.4404 22.5355 41.183 23.4 39.7851 24.0045C38.3426 24.6285 36.8106 24.947 35.234 24.947H12.766C11.1894 24.947 9.65745 24.6285 8.21489 24.0045C6.81702 23.4 5.56596 22.5355 4.48085 21.437C3.40213 20.3385 2.55319 19.058 1.95957 17.6345C1.34681 16.1655 1.03404 14.6055 1.03404 13C1.03404 11.3945 1.34681 9.8345 1.95957 8.3655C2.55319 6.942 3.40213 5.668 4.48085 4.563C5.55957 3.4645 6.81702 2.6 8.21489 1.9955C9.65745 1.3715 11.1894 1.053 12.766 1.053H35.234ZM35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z"
fill="#3C4043"
/>
<path
d="M23.0598 13.9235V17.856H21.8359V8.14502H25.0806C25.9029 8.14502 26.6041 8.42452 27.1778 8.98352C27.7642 9.54252 28.0575 10.225 28.0575 11.031C28.0575 11.8565 27.7642 12.539 27.1778 13.0915C26.6104 13.644 25.9092 13.917 25.0806 13.917H23.0598V13.9235ZM23.0598 9.34102V12.7275H25.1061C25.5905 12.7275 25.9985 12.5585 26.3172 12.227C26.6423 11.8955 26.808 11.4925 26.808 11.0375C26.808 10.589 26.6423 10.1925 26.3172 9.86102C25.9985 9.51652 25.5969 9.34752 25.1061 9.34752H23.0598V9.34102Z"
fill="#3C4043"
/>
<path
d="M31.2576 10.9912C32.1628 10.9912 32.8767 11.2382 33.3994 11.7322C33.9221 12.2262 34.1835 12.9022 34.1835 13.7602V17.8552H33.0169V16.9322H32.9659C32.4624 17.6927 31.7867 18.0697 30.9452 18.0697C30.2249 18.0697 29.6257 17.8552 29.1412 17.4197C28.6568 16.9842 28.4146 16.4447 28.4146 15.7947C28.4146 15.1057 28.6695 14.5597 29.1795 14.1567C29.6895 13.7472 30.3715 13.5457 31.2193 13.5457C31.946 13.5457 32.5452 13.6822 33.0106 13.9552V13.6692C33.0106 13.2337 32.8448 12.8697 32.507 12.5642C32.1691 12.2587 31.7739 12.1092 31.3213 12.1092C30.6393 12.1092 30.0974 12.4017 29.7022 12.9932L28.6249 12.3042C29.2177 11.4267 30.0974 10.9912 31.2576 10.9912ZM29.6767 15.8142C29.6767 16.1392 29.8106 16.4122 30.0847 16.6267C30.3524 16.8412 30.6711 16.9517 31.0345 16.9517C31.5508 16.9517 32.0098 16.7567 32.4114 16.3667C32.813 15.9767 33.0169 15.5217 33.0169 14.9952C32.6345 14.6897 32.1054 14.5337 31.4233 14.5337C30.9261 14.5337 30.5118 14.6572 30.1803 14.8977C29.8424 15.1512 29.6767 15.4567 29.6767 15.8142Z"
fill="#3C4043"
/>
<path
d="M40.8385 11.2065L36.7588 20.7745H35.4966L37.0138 17.427L34.3237 11.2065H35.656L37.5938 15.9775H37.6193L39.5062 11.2065H40.8385Z"
fill="#3C4043"
/>
<path
d="M18.1926 13.1301C18.1926 12.7232 18.1569 12.3339 18.0906 11.9595H12.9604V14.1045L15.915 14.1051C15.7952 14.8188 15.4095 15.4272 14.8186 15.8328V17.2245H16.5773C17.6043 16.2553 18.1926 14.8227 18.1926 13.1301Z"
fill="#4285F4"
/>
<path
d="M14.8184 15.8321C14.3289 16.1688 13.6984 16.3658 12.9609 16.3658C11.5362 16.3658 10.3276 15.3869 9.89475 14.0674H8.08057V15.5026C8.97937 17.3213 10.8267 18.5693 12.9609 18.5693C14.4359 18.5693 15.6751 18.0746 16.5771 17.2231L14.8184 15.8321Z"
fill="#34A853"
/>
<path
d="M9.72406 13.0025C9.72406 12.632 9.78462 12.2739 9.8949 11.9372V10.502H8.08072C7.70908 11.254 7.5 12.1029 7.5 13.0025C7.5 13.9021 7.70972 14.751 8.08072 15.5031L9.8949 14.0679C9.78462 13.7312 9.72406 13.373 9.72406 13.0025Z"
fill="#FABB05"
/>
<path
d="M12.9614 9.63953C13.7665 9.63953 14.4874 9.92229 15.0567 10.4748L16.6152 8.88684C15.6686 7.98789 14.4345 7.43604 12.9614 7.43604C10.8278 7.43604 8.97986 8.68403 8.08105 10.5027L9.89524 11.9379C10.3281 10.6184 11.5367 9.63953 12.9614 9.63953Z"
fill="#E94235"
/>
</g>
<defs>
<clipPath id="clip0_5597_436">
<rect width="48" height="26" fill="white" />
</clipPath>
</defs>
</svg>
)
}

5
packages/design-system/lib/components/Payment/Icons/IconProps.ts Normal file
View File

@@ -0,0 +1,5 @@
export type PaymentIconProps = {
className?: string
alt?: string
role: 'img'
}

115
packages/design-system/lib/components/Payment/Icons/JcbIcon.tsx Normal file
View File

@@ -0,0 +1,115 @@
import { PaymentIconProps } from './IconProps'
export const JcbIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46863)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
<path
d="M40.3598 23.5199C40.3598 26.3199 38.0796 28.5999 35.2796 28.5999H7.63965V8.4799C7.63965 5.6799 9.91965 3.3999 12.7196 3.3999H40.3598V23.5199Z"
fill="white"
/>
<path
d="M31.3599 18.3599H33.4599C33.5199 18.3599 33.6599 18.3399 33.7199 18.3399C34.1199 18.2599 34.4599 17.8999 34.4599 17.3999C34.4599 16.9199 34.1199 16.5599 33.7199 16.4599C33.6599 16.4399 33.5399 16.4399 33.4599 16.4399H31.3599V18.3599Z"
fill="url(#paint0_linear_5382_46863)"
/>
<path
d="M33.2196 5.1001C31.2196 5.1001 29.5796 6.7201 29.5796 8.7401V12.5201H34.7196C34.8396 12.5201 34.9796 12.5201 35.0796 12.5401C36.2396 12.6001 37.0996 13.2001 37.0996 14.2401C37.0996 15.0601 36.5196 15.7601 35.4396 15.9001V15.9401C36.6196 16.0201 37.5196 16.6801 37.5196 17.7001C37.5196 18.8001 36.5196 19.5201 35.1996 19.5201H29.5596V26.9201H34.8996C36.8996 26.9201 38.5396 25.3001 38.5396 23.2801V5.1001H33.2196Z"
fill="url(#paint1_linear_5382_46863)"
/>
<path
d="M34.1999 14.4801C34.1999 14.0001 33.8599 13.6801 33.4599 13.6201C33.4199 13.6201 33.3199 13.6001 33.2599 13.6001H31.3599V15.3601H33.2599C33.3199 15.3601 33.4399 15.3601 33.4599 15.3401C33.8599 15.2801 34.1999 14.9601 34.1999 14.4801Z"
fill="url(#paint2_linear_5382_46863)"
/>
<path
d="M23.1595 5.1001C21.1595 5.1001 19.5195 6.7201 19.5195 8.7401V13.5001C20.4395 12.7201 22.0395 12.2201 24.6195 12.3401C25.9995 12.4001 27.4795 12.7801 27.4795 12.7801V14.3201C26.7395 13.9401 25.8595 13.6001 24.7195 13.5201C22.7595 13.3801 21.5795 14.3401 21.5795 16.0201C21.5795 17.7201 22.7595 18.6801 24.7195 18.5201C25.8595 18.4401 26.7395 18.0801 27.4795 17.7201V19.2601C27.4795 19.2601 26.0195 19.6401 24.6195 19.7001C22.0395 19.8201 20.4395 19.3201 19.5195 18.5401V26.9401H24.8595C26.8595 26.9401 28.4995 25.3201 28.4995 23.3001V5.1001H23.1595Z"
fill="url(#paint3_linear_5382_46863)"
/>
<path
d="M13.0999 5.1001C11.0999 5.1001 9.45994 6.7201 9.45994 8.7401V17.7201C10.4799 18.2201 11.5399 18.5401 12.5999 18.5401C13.8599 18.5401 14.5399 17.7801 14.5399 16.7401V12.5001H17.6599V16.7201C17.6599 18.3601 16.6399 19.7001 13.1799 19.7001C11.0799 19.7001 9.43994 19.2401 9.43994 19.2401V26.9001H14.7799C16.7799 26.9001 18.4199 25.2801 18.4199 23.2601V5.1001H13.0999Z"
fill="url(#paint4_linear_5382_46863)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_5382_46863"
x1="24.3923"
y1="16.0328"
x2="50.4301"
y2="16.0328"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#007940" />
<stop offset="0.2285" stop-color="#00873F" />
<stop offset="0.7433" stop-color="#40A737" />
<stop offset="1" stop-color="#5CB531" />
</linearGradient>
<linearGradient
id="paint1_linear_5382_46863"
x1="29.576"
y1="16.001"
x2="38.5641"
y2="16.001"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#007940" />
<stop offset="0.2285" stop-color="#00873F" />
<stop offset="0.7433" stop-color="#40A737" />
<stop offset="1" stop-color="#5CB531" />
</linearGradient>
<linearGradient
id="paint2_linear_5382_46863"
x1="29.5759"
y1="14.4771"
x2="38.5637"
y2="14.4771"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#007940" />
<stop offset="0.2285" stop-color="#00873F" />
<stop offset="0.7433" stop-color="#40A737" />
<stop offset="1" stop-color="#5CB531" />
</linearGradient>
<linearGradient
id="paint3_linear_5382_46863"
x1="19.4676"
y1="16.001"
x2="28.3315"
y2="16.001"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#6C2C2F" />
<stop offset="0.1735" stop-color="#882730" />
<stop offset="0.5731" stop-color="#BE1833" />
<stop offset="0.8585" stop-color="#DC0436" />
<stop offset="1" stop-color="#E60039" />
</linearGradient>
<linearGradient
id="paint4_linear_5382_46863"
x1="9.45538"
y1="16.001"
x2="18.5822"
y2="16.001"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1F286F" />
<stop offset="0.4751" stop-color="#004E94" />
<stop offset="0.8261" stop-color="#0066B1" />
<stop offset="1" stop-color="#006FBC" />
</linearGradient>
<clipPath id="clip0_5382_46863">
<rect width="48" height="32" rx="3" fill="white" />
</clipPath>
</defs>
</svg>
)

30
packages/design-system/lib/components/Payment/Icons/KlarnaIcon.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { PaymentIconProps } from './IconProps'
export const KlarnaIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46853)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="#FEB3C7"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.9263 19.812H15.6224V12.0444H13.9263V19.812ZM24.6661 15.3204V14.6257H24.6448L23.1645 14.6254L23.0814 14.6257V19.812H24.6855V17.094C24.6855 16.3053 25.5972 15.9594 26.2229 16.1342C26.229 16.136 26.2353 16.1349 26.2418 16.1349V14.6258C25.585 14.6258 24.9813 14.9043 24.6661 15.3204ZM19.21 18.6108C18.3791 18.6108 17.7056 17.9876 17.7056 17.2188C17.7056 16.45 18.3791 15.8268 19.21 15.8268C20.0408 15.8268 20.7144 16.45 20.7144 17.2188C20.7144 17.9876 20.0408 18.6108 19.21 18.6108ZM20.6993 14.985C20.2417 14.6686 19.6831 14.482 19.0797 14.482C17.5306 14.482 16.2748 15.7074 16.2748 17.2188C16.2748 18.7302 17.5306 19.9556 19.0797 19.9556C19.6831 19.9556 20.2417 19.769 20.6993 19.4527V19.812H22.0848V14.6257H20.6993V14.985ZM30.2081 14.486C29.5722 14.486 28.9706 14.6785 28.5684 15.2098V14.6257H28.5471L27.0668 14.6254L26.9837 14.6257V19.812H28.5877V16.9752C28.5877 16.1865 29.1299 15.8003 29.7826 15.8003C30.482 15.8003 30.8841 16.208 30.8841 16.9644V19.812H32.4737V16.5138C32.4737 15.3066 31.4901 14.486 30.2081 14.486ZM40.5357 17.9723C39.984 17.9723 39.5368 18.4087 39.5368 18.9471C39.5368 19.4853 39.984 19.9217 40.5357 19.9217C41.0873 19.9217 41.5349 19.4853 41.5349 18.9471C41.5349 18.4087 41.0873 17.9723 40.5357 17.9723ZM35.9713 18.6108C35.1403 18.6108 34.4669 17.9876 34.4669 17.2188C34.4669 16.45 35.1403 15.8268 35.9713 15.8268C36.8021 15.8268 37.4755 16.45 37.4755 17.2188C37.4755 17.9876 36.8021 18.6108 35.9713 18.6108ZM37.4606 14.985C37.003 14.6686 36.4444 14.482 35.8409 14.482C34.2918 14.482 33.036 15.7074 33.036 17.2188C33.036 18.7302 34.2918 19.9556 35.8409 19.9556C36.4444 19.9556 37.003 19.769 37.4606 19.4527V19.812H38.8459V14.6257H37.4606V14.985ZM39.8533 14.7203H39.9306C39.9791 14.7203 39.9998 14.7434 39.9998 14.7786C39.9998 14.8138 39.9863 14.84 39.9306 14.84H39.8533V14.7203ZM39.8545 14.9034H39.9316L39.9967 15.0482H40.0741L40.0017 14.8912C40.0481 14.8712 40.0717 14.8319 40.0717 14.7786C40.0717 14.7051 40.0141 14.6559 39.9306 14.6559H39.7832V15.0472H39.8545V14.9034ZM6.46533 19.812H8.23325V12.0444H6.46533V19.812ZM12.7708 12.0451H11.0543C11.0193 13.7986 9.98109 15.3123 8.47597 16.0614L11.1134 19.812H13.267L10.8696 16.4004C12.0667 15.2546 12.7466 13.7101 12.7708 12.0451ZM39.9131 14.5573C40.0813 14.5573 40.2173 14.6922 40.2173 14.8581C40.2173 15.024 40.0813 15.1588 39.9131 15.1588C39.7452 15.1588 39.609 15.024 39.609 14.8581C39.609 14.6922 39.7452 14.5573 39.9131 14.5573ZM39.9131 15.2302C40.1213 15.2302 40.2905 15.0632 40.2905 14.8581C40.2905 14.6529 40.1213 14.486 39.9131 14.486C39.7048 14.486 39.5368 14.6529 39.5368 14.8581C39.5368 15.0632 39.7048 15.2302 39.9131 15.2302Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_5382_46853">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)

49
packages/design-system/lib/components/Payment/Icons/MaestroIcon.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { PaymentIconProps } from './IconProps'
export const MaestroIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46861)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z"
fill="#00A2E5"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z"
fill="#7375CF"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z"
fill="#00A2E5"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z"
fill="#EB001B"
/>
</g>
<defs>
<clipPath id="clip0_5382_46861">
<rect width="48" height="32" rx="3" fill="white" />
</clipPath>
</defs>
</svg>
)

49
packages/design-system/lib/components/Payment/Icons/MasterCardIcon.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { PaymentIconProps } from './IconProps'
export const MasterCardIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46852)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z"
fill="#F79E1B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z"
fill="#FF5F00"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z"
fill="#F79E1B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z"
fill="#EB001B"
/>
</g>
<defs>
<clipPath id="clip0_5382_46852">
<rect width="48" height="32" rx="3" fill="white" />
</clipPath>
</defs>
</svg>
)

135
packages/design-system/lib/components/Payment/Icons/MobilePayIcon.tsx Normal file
View File

File diff suppressed because one or more lines are too long

61
packages/design-system/lib/components/Payment/Icons/PayPalIcon.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { PaymentIconProps } from './IconProps'
export const PayPalIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46860)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M30.4927 13.8679C30.3424 14.8536 29.5892 14.8536 28.8603 14.8536H28.4457L28.7366 13.0131C28.754 12.902 28.85 12.8202 28.9627 12.8202H29.153C29.649 12.8202 30.1174 12.8202 30.3591 13.1024C30.5036 13.2713 30.5472 13.5219 30.4927 13.8679ZM30.1756 11.2959H27.4274C27.2392 11.2959 27.0794 11.4326 27.05 11.6181L25.9389 18.6598C25.9169 18.7986 26.0246 18.9243 26.1649 18.9243H27.5752C27.7066 18.9243 27.8186 18.8287 27.8391 18.6991L28.1545 16.7025C28.1835 16.517 28.3437 16.3803 28.5315 16.3803H29.401C31.2112 16.3803 32.2562 15.5051 32.529 13.7698C32.652 13.0114 32.534 12.4151 32.1786 11.9977C31.7878 11.5388 31.095 11.2959 30.1756 11.2959Z"
fill="#009CDE"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.8911 13.8679C10.7409 14.8536 9.98761 14.8536 9.25873 14.8536H8.84417L9.13509 13.0131C9.15245 12.902 9.24845 12.8202 9.36113 12.8202H9.55141C10.0475 12.8202 10.5159 12.8202 10.7575 13.1024C10.9021 13.2713 10.9457 13.5219 10.8911 13.8679ZM10.574 11.2959H7.82585C7.63769 11.2959 7.47789 11.4326 7.44849 11.6181L6.33733 18.6598C6.31537 18.7986 6.42273 18.9243 6.56337 18.9243H7.87581C8.06361 18.9243 8.22341 18.7877 8.25281 18.6025L8.55293 16.7025C8.58197 16.517 8.74213 16.3803 8.92993 16.3803H9.79945C11.6097 16.3803 12.6546 15.5051 12.9275 13.7698C13.0504 13.0114 12.9324 12.4151 12.577 11.9977C12.1862 11.5388 11.4935 11.2959 10.574 11.2959Z"
fill="#003087"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.9544 16.3959C16.8272 17.1472 16.2305 17.6518 15.4691 17.6518C15.0875 17.6518 14.7817 17.5289 14.5854 17.2966C14.3909 17.0665 14.3175 16.7383 14.3792 16.3732C14.4975 15.6283 15.1041 15.1078 15.8539 15.1078C16.2277 15.1078 16.531 15.2317 16.7312 15.4661C16.9328 15.7023 17.0122 16.0323 16.9544 16.3959ZM18.7884 13.8363H17.4724C17.3598 13.8363 17.2637 13.9181 17.246 14.0296L17.1883 14.3972L17.0965 14.264C16.8113 13.8508 16.1759 13.7124 15.5417 13.7124C14.0879 13.7124 12.846 14.8136 12.6043 16.3576C12.4785 17.1281 12.6571 17.8642 13.0944 18.378C13.4958 18.85 14.0688 19.0464 14.7516 19.0464C15.9237 19.0464 16.5735 18.2944 16.5735 18.2944L16.5147 18.6598C16.4927 18.7986 16.6001 18.9243 16.7411 18.9243H17.926C18.1141 18.9243 18.2739 18.788 18.3033 18.6024L19.0148 14.1008C19.0368 13.962 18.9291 13.8363 18.7884 13.8363Z"
fill="#003087"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M36.5555 16.3959C36.4283 17.1472 35.8316 17.6518 35.0702 17.6518C34.6885 17.6518 34.3828 17.5289 34.1864 17.2966C33.9916 17.0665 33.9186 16.7383 33.9802 16.3732C34.0986 15.6283 34.7052 15.1078 35.455 15.1078C35.8288 15.1078 36.1321 15.2317 36.3322 15.4661C36.5339 15.7023 36.6132 16.0323 36.5555 16.3959ZM38.3895 13.8363H37.0735C36.9608 13.8363 36.8648 13.9181 36.8471 14.0296L36.7894 14.3972L36.6972 14.264C36.4123 13.8508 35.777 13.7124 35.1428 13.7124C33.689 13.7124 32.4471 14.8136 32.2054 16.3576C32.0796 17.1281 32.2582 17.8642 32.6954 18.378C33.0969 18.85 33.6698 19.0464 34.3526 19.0464C35.5248 19.0464 36.1746 18.2944 36.1746 18.2944L36.1158 18.6598C36.0938 18.7986 36.2012 18.9243 36.3422 18.9243H37.527C37.7152 18.9243 37.875 18.788 37.9044 18.6024L38.6159 14.1008C38.6379 13.962 38.5302 13.8363 38.3895 13.8363Z"
fill="#009CDE"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25.7972 13.8364H24.4745C24.348 13.8364 24.2296 13.8991 24.1588 14.0039L22.334 16.6891L21.5608 14.1087C21.5123 13.9473 21.3635 13.8364 21.1948 13.8364H19.8948C19.7378 13.8364 19.6273 13.9908 19.678 14.1391L21.1342 18.4113L19.7644 20.3428C19.657 20.4943 19.7655 20.7039 19.9515 20.7039H21.2728C21.3978 20.7039 21.5151 20.6427 21.5867 20.54L25.9853 14.1958C26.0906 14.0439 25.9821 13.8364 25.7972 13.8364Z"
fill="#003087"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M39.9407 11.4897L38.8129 18.6603C38.7909 18.7991 38.8983 18.9248 39.039 18.9248H40.1737C40.3613 18.9248 40.5213 18.7881 40.5505 18.6026L41.6629 11.5609C41.6849 11.4221 41.5773 11.2964 41.4365 11.2964H40.1673C40.0541 11.2964 39.9581 11.3781 39.9407 11.4897Z"
fill="#009CDE"
/>
</g>
<defs>
<clipPath id="clip0_5382_46860">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)

112
packages/design-system/lib/components/Payment/Icons/SwishIcon.tsx Normal file
View File

@@ -0,0 +1,112 @@
import { PaymentIconProps } from './IconProps'
export const SwishIcon = (props: PaymentIconProps) => {
return (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46851)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect
x="0.5"
y="0.5"
width="47"
height="31"
rx="2.5"
stroke="#E9E8E7"
/>
<path
d="M18.8844 18.2247L18.9947 18.0685C19.1325 17.8853 19.2868 17.8638 19.5128 17.9823C19.7278 18.0954 20.075 18.2894 20.5435 18.2894C20.9403 18.2894 21.1884 18.1116 21.1884 17.8314C21.1884 17.0988 18.8955 17.3735 18.8955 15.822C18.8955 14.9385 19.6947 14.4698 20.6647 14.4698C21.2766 14.4698 21.7064 14.6638 21.949 14.7984C22.1584 14.9062 22.186 15.0894 22.0868 15.2941L21.9986 15.4557C21.8884 15.6712 21.7175 15.6927 21.4915 15.5958C21.2931 15.5096 20.9899 15.3749 20.6151 15.3749C20.2183 15.3749 19.9923 15.5365 19.9923 15.8166C19.9923 16.5601 22.2797 16.2692 22.2797 17.8099C22.2797 18.6072 21.5907 19.1998 20.5214 19.1998C19.7774 19.1998 19.2648 18.925 18.9782 18.7419C18.7687 18.6126 18.7522 18.4186 18.8844 18.2247ZM22.671 14.987C22.5994 14.7392 22.7261 14.5722 22.9852 14.5722H23.4206C23.6466 14.5722 23.7844 14.6799 23.8285 14.9008L24.5726 17.5406C24.6277 17.7776 24.6607 18.02 24.6607 18.02H24.6773C24.6773 18.02 24.7158 17.7776 24.7765 17.5406L25.5536 14.9008C25.5977 14.6907 25.741 14.583 25.9725 14.583H26.3142C26.5402 14.583 26.6725 14.6907 26.7277 14.9008L27.4993 17.5406C27.5709 17.7776 27.5985 18.02 27.5985 18.02H27.615C27.615 18.02 27.6481 17.7776 27.7142 17.5406L28.4473 14.9008C28.5024 14.6799 28.6347 14.5722 28.8607 14.5722H29.2796C29.5496 14.5722 29.6654 14.7392 29.5937 14.987L28.4087 18.7742C28.3426 18.9897 28.1993 19.0867 27.9843 19.0867H27.378C27.1521 19.0867 27.0087 18.9789 26.9536 18.7688L26.2646 16.5062C26.193 16.2692 26.1544 16.0214 26.1544 16.0214H26.1379C26.1379 16.0214 26.0938 16.2692 26.0221 16.5062L25.3276 18.7634C25.2725 18.9789 25.1348 19.0813 24.9088 19.0813H24.2804C24.0655 19.0813 23.9277 18.9843 23.867 18.7688L22.671 14.987ZM30.2827 14.9439C30.2827 14.7015 30.4094 14.5722 30.652 14.5722H31.0488C31.2913 14.5722 31.4181 14.7015 31.4181 14.9439V18.715C31.4181 18.9628 31.2913 19.0867 31.0488 19.0867H30.652C30.4094 19.0867 30.2827 18.9628 30.2827 18.715V14.9439ZM32.1842 18.2247L32.2945 18.0685C32.4268 17.8853 32.5866 17.8638 32.8126 17.9823C33.0275 18.0954 33.3748 18.2894 33.8432 18.2894C34.2401 18.2894 34.4881 18.1116 34.4881 17.8314C34.4881 17.0988 32.2008 17.3735 32.2008 15.822C32.2008 14.9385 32.9944 14.4698 33.9645 14.4698C34.5818 14.4698 35.0062 14.6638 35.2488 14.7984C35.4582 14.9062 35.4858 15.0894 35.3865 15.2941L35.2984 15.4557C35.1936 15.6712 35.0172 15.6927 34.7913 15.5958C34.5928 15.5096 34.2952 15.3749 33.9149 15.3749C33.5181 15.3749 33.2921 15.5365 33.2921 15.8166C33.2921 16.5601 35.5794 16.2692 35.5794 17.8099C35.5794 18.6072 34.8905 19.1998 33.8212 19.1998C33.0771 19.1998 32.559 18.925 32.2834 18.7419C32.0685 18.6126 32.0464 18.4186 32.1842 18.2247ZM36.2519 13.1715C36.2519 12.9345 36.3897 12.7998 36.6322 12.7998H37.018C37.2716 12.7998 37.3983 12.9291 37.3983 13.1715V14.9978C37.3983 15.2186 37.3708 15.3749 37.3708 15.3749H37.3873C37.6133 14.9439 38.192 14.4644 38.9912 14.4644C40.0162 14.4644 40.6006 14.987 40.6006 16.183V18.715C40.6006 18.9628 40.463 19.0867 40.2202 19.0867H39.829C39.5754 19.0867 39.4487 18.9628 39.4487 18.715V16.4146C39.4487 15.8651 39.3054 15.4934 38.7266 15.4934C37.9219 15.4934 37.3928 16.1345 37.3928 16.991V18.715C37.3928 18.9628 37.266 19.0867 37.0125 19.0867H36.6267C36.3842 19.0867 36.2464 18.9628 36.2464 18.715V13.1715H36.2519ZM41.8354 13.8826C41.9398 13.8826 42.0006 13.818 42.0006 13.7102C42.0006 13.6079 41.9398 13.5486 41.8354 13.5486H41.6698V13.8826H41.8354ZM41.477 13.4948C41.477 13.4355 41.5046 13.4086 41.565 13.4086H41.8738C42.0666 13.4086 42.199 13.5271 42.199 13.7156C42.199 13.8718 42.0942 13.9634 42.0118 13.985V13.9904C42.0118 13.9904 42.0226 14.0012 42.0502 14.0442L42.1934 14.3136C42.2266 14.3729 42.2046 14.416 42.1438 14.416H42.111C42.0614 14.416 42.0282 14.3998 42.0062 14.3513L41.8462 14.0227H41.6754V14.3298C41.6754 14.3836 41.6478 14.416 41.5926 14.416H41.565C41.5046 14.416 41.4826 14.389 41.4826 14.3298V13.4948H41.477ZM41.813 14.7122C42.2598 14.7122 42.5958 14.3621 42.5958 13.915C42.5958 13.4678 42.2542 13.1176 41.813 13.1176C41.3778 13.1176 41.0414 13.4678 41.0414 13.915C41.0362 14.3621 41.3778 14.7122 41.813 14.7122ZM41.813 12.9345C42.3642 12.9345 42.7998 13.3708 42.7998 13.915C42.7942 14.459 42.359 14.89 41.813 14.89C41.273 14.89 40.8378 14.4537 40.8378 13.9096C40.8378 13.3708 41.273 12.9345 41.813 12.9345Z"
fill="#4D4D4F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.38525 21.0546C10.6351 22.1307 13.4118 21.5981 15.0893 19.5994C17.0776 17.2303 16.7688 13.6986 14.3995 11.7109L12.8245 13.5876C14.6755 15.1405 14.9167 17.8997 13.3634 19.7505C12.1248 21.2263 10.0855 21.719 8.38525 21.0546Z"
fill="url(#paint0_linear_5382_46851)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.38525 21.0547C10.6351 22.1307 13.4118 21.5982 15.0893 19.5995C15.2948 19.3547 15.4756 19.0974 15.6323 18.8308C15.8972 17.1846 15.3146 15.4447 13.9442 14.295C13.5961 14.0029 13.2192 13.7676 12.8247 13.5879C14.6755 15.1407 14.9167 17.8998 13.3634 19.7505C12.1248 21.2263 10.0855 21.7191 8.38525 21.0547Z"
fill="url(#paint1_linear_5382_46851)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.2149 10.9452C10.965 9.86917 8.18827 10.4017 6.51079 12.4005C4.52251 14.7695 4.83131 18.3013 7.20055 20.2889L8.77559 18.4122C6.92463 16.8594 6.68339 14.1002 8.23671 12.2494C9.47531 10.7736 11.5146 10.2808 13.2149 10.9452Z"
fill="url(#paint2_linear_5382_46851)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.2146 10.9452C10.9648 9.86917 8.18804 10.4017 6.51056 12.4004C6.30512 12.6452 6.12428 12.9024 5.9676 13.169C5.70272 14.8152 6.28528 16.5552 7.65568 17.7049C8.00384 17.997 8.38076 18.2323 8.77512 18.412C6.9244 16.8591 6.6832 14.1001 8.23648 12.2494C9.47508 10.7736 11.5143 10.2808 13.2146 10.9452Z"
fill="url(#paint3_linear_5382_46851)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_5382_46851"
x1="12.6109"
y1="18.7386"
x2="10.2315"
y2="13.9987"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#EF3220" />
<stop offset="1" stop-color="#FCD205" />
</linearGradient>
<linearGradient
id="paint1_linear_5382_46851"
x1="14.5468"
y1="14.6636"
x2="10.3757"
y2="21.8844"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FCD205" />
<stop offset="0.263921" stop-color="#F47216" />
<stop offset="0.560797" stop-color="#B31A93" />
<stop offset="1" stop-color="#2743A0" />
</linearGradient>
<linearGradient
id="paint2_linear_5382_46851"
x1="9.03527"
y1="13.381"
x2="11.3158"
y2="18.0191"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#7FD3B9" />
<stop offset="0.265705" stop-color="#66CDE1" />
<stop offset="0.554471" stop-color="#6D8ED1" />
<stop offset="1" stop-color="#2743A0" />
</linearGradient>
<linearGradient
id="paint3_linear_5382_46851"
x1="7.07996"
y1="17.3035"
x2="11.2185"
y2="10.1074"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1E5CB2" />
<stop offset="0.246658" stop-color="#4DC4CE" />
<stop offset="0.564821" stop-color="#66C657" />
<stop offset="1" stop-color="#FCD205" />
</linearGradient>
<clipPath id="clip0_5382_46851">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}

54
packages/design-system/lib/components/Payment/Icons/VippsIcon.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { PaymentIconProps } from './IconProps'
export const VippsIcon = (props: PaymentIconProps) => {
return (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46850)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect
x="0.5"
y="0.5"
width="47"
height="31"
rx="2.5"
stroke="#E9E8E7"
/>
<path
d="M6.90907 12L8.53179 16.0452L10.1227 12H12L9.20003 18H7.80002L5 12H6.90907Z"
fill="#FF5B24"
/>
<path
d="M16.1872 17.4091C17.3542 17.4091 18.0166 16.7728 18.6475 15.8536C18.9944 15.3586 19.436 15.2526 19.7515 15.5354C20.0669 15.8182 20.0984 16.3485 19.7515 16.8435C18.8367 18.1869 17.6696 19 16.1872 19C14.5785 19 13.1591 18.0101 12.1813 16.2778C11.8974 15.8182 11.9605 15.3232 12.2759 15.0758C12.5913 14.8283 13.0645 14.9343 13.3483 15.4293C14.0423 16.596 14.9886 17.4091 16.1872 17.4091ZM18.3636 13.0606C18.3636 13.697 17.922 14.1212 17.4173 14.1212C16.9126 14.1212 16.4711 13.697 16.4711 13.0606C16.4711 12.4242 16.9126 12 17.4173 12C17.922 12 18.3636 12.4596 18.3636 13.0606Z"
fill="#FF5B24"
/>
<path
d="M22.75 12.1777V13.0658C23.2273 12.4441 23.9591 12 25.041 12C26.4091 12 28 13.0658 28 15.3454C28 17.7434 26.4727 18.898 24.8818 18.898C24.0546 18.898 23.2909 18.602 22.7182 17.8619V21H21V12.1777H22.75ZM22.75 15.4342C22.75 16.7665 23.5773 17.477 24.5001 17.477C25.3909 17.477 26.2818 16.8257 26.2818 15.4342C26.2818 14.0724 25.3909 13.4211 24.5001 13.4211C23.6091 13.4211 22.75 14.0428 22.75 15.4342Z"
fill="#FF5B24"
/>
<path
d="M30.75 12.1777V13.0658C31.2273 12.4441 31.9591 12 33.041 12C34.4091 12 36 13.0658 36 15.3454C36 17.7434 34.4727 18.898 32.8818 18.898C32.0546 18.898 31.2909 18.602 30.7182 17.8619V21H29V12.1777H30.75ZM30.75 15.4342C30.75 16.7665 31.5773 17.477 32.5001 17.477C33.3909 17.477 34.2818 16.8257 34.2818 15.4342C34.2818 14.0724 33.3909 13.4211 32.5001 13.4211C31.5773 13.4211 30.75 14.0428 30.75 15.4342Z"
fill="#FF5B24"
/>
<path
d="M39.0164 12C40.4919 12 41.5411 12.6309 42 14.1932L40.3937 14.4335C40.3606 13.6524 39.836 13.382 39.0492 13.382C38.459 13.382 38 13.6223 38 14.0129C38 14.3133 38.2295 14.6138 38.9181 14.7339L40.1314 14.9442C41.3114 15.1545 41.9674 15.8755 41.9674 16.837C41.9674 18.279 40.5572 19 39.2131 19C37.8033 19 36.2295 18.3391 36 16.7168L37.6066 16.4764C37.7049 17.3176 38.2623 17.6181 39.1803 17.6181C39.8691 17.6181 40.328 17.3777 40.328 16.9872C40.328 16.6267 40.0983 16.3562 39.3443 16.2361L38.2295 16.0558C37.0492 15.8455 36.3279 15.0944 36.3279 14.1331C36.3607 12.6309 37.8361 12 39.0164 12Z"
fill="#FF5B24"
/>
</g>
<defs>
<clipPath id="clip0_5382_46850">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}

55
packages/design-system/lib/components/Payment/Icons/VisaIcon.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { PaymentIconProps } from './IconProps'
export const VisaIcon = (props: PaymentIconProps) => (
<svg
width="48"
height="32"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_5382_46849)">
<path
d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
fill="white"
/>
<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M34.6666 17.9752L36.1294 14.0252L36.9523 17.9752H34.6666ZM40.3807 21.1352L38.3234 10.8652H35.4952C34.5409 10.8652 34.3088 11.6306 34.3088 11.6306L30.4761 21.1352H33.1546L33.6907 19.61H36.9578L37.2591 21.1352H40.3807Z"
fill="#182E66"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M30.8747 13.4287L31.2382 11.2978C31.2382 11.2978 30.1159 10.8652 28.946 10.8652C27.6813 10.8652 24.6783 11.4258 24.6783 14.1498C24.6783 16.7132 28.2029 16.7451 28.2029 18.0909C28.2029 19.4367 25.0415 19.1963 23.9983 18.3473L23.6191 20.5747C23.6191 20.5747 24.7569 21.1352 26.496 21.1352C28.2349 21.1352 30.8588 20.222 30.8588 17.7384C30.8588 15.1588 27.3022 14.9186 27.3022 13.7971C27.3022 12.6755 29.7842 12.8196 30.8747 13.4287Z"
fill="#182E66"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21.8609 21.1352H19.0479L20.806 10.8652H23.6193L21.8609 21.1352Z"
fill="#182E66"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.9246 10.8652L14.3688 17.9288L14.0666 16.4076L14.0669 16.4082L13.1647 11.7902C13.1647 11.7902 13.0559 10.8652 11.8931 10.8652H7.66846L7.61914 11.0389C7.61914 11.0389 8.91138 11.307 10.4229 12.2133L12.7518 21.1352H15.5448L19.8096 10.8652H16.9246Z"
fill="#182E66"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.7144 16.3952L12.8615 11.788C12.8615 11.788 12.7586 10.8652 11.6594 10.8652H7.66574L7.61914 11.0384C7.61914 11.0384 9.53878 11.4575 11.3803 13.0263C13.1403 14.526 13.7144 16.3952 13.7144 16.3952Z"
fill="#182E66"
/>
</g>
<defs>
<clipPath id="clip0_5382_46849">
<rect width="48" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)

81
packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx Normal file
View File

@@ -0,0 +1,81 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { PaymentMethodIcon } from './PaymentMethodIcon'
import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
import { Typography } from '../Typography'
import { expect } from 'storybook/test'
const methods = Object.values(PaymentMethodEnum).toSorted()
const meta: Meta<typeof PaymentMethodIcon> = {
title: 'Components/Payment/PaymentMethodIcon',
component: PaymentMethodIcon,
parameters: {
layout: 'centered',
},
argTypes: {
paymentMethod: {
control: { type: 'select' },
options: methods,
description: 'Payment method to display',
},
alt: {
control: { type: 'text' },
description: 'Alt text for the icon',
},
},
}
export default meta
type Story = StoryObj<typeof PaymentMethodIcon>
export const Playground: Story = {
args: {
paymentMethod: PaymentMethodEnum.visa,
alt: 'Visa payment method',
},
play: async ({ canvas, args }) => {
const img = await canvas.findByRole('img')
expect(img).toBeInTheDocument()
expect(img).toHaveAttribute('alt', args.alt)
},
}
export const All: Story = {
parameters: {
layout: 'padded',
},
render: (args) => (
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))',
gap: 16,
}}
>
{methods.map((m) => (
<div
key={m}
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 12,
padding: 8,
borderRadius: 8,
}}
>
<PaymentMethodIcon {...args} paymentMethod={m} />
<Typography variant={'Label/xsRegular'}>
<p>{m}</p>
</Typography>
</div>
))}
</div>
),
args: {
paymentMethod: PaymentMethodEnum.visa,
},
}

61
packages/design-system/lib/components/Payment/PaymentMethodIcon.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
import { GenericCardIcon } from './Icons/GenericCardIcon'
import { SwishIcon } from './Icons/SwishIcon'
import { VippsIcon } from './Icons/VippsIcon'
import { MobilePayIcon } from './Icons/MobilePayIcon'
import { ApplePayIcon } from './Icons/ApplePayIcon'
import { GooglePayIcon } from './Icons/GooglePayIcon'
import { PayPalIcon } from './Icons/PayPalIcon'
import { KlarnaIcon } from './Icons/KlarnaIcon'
import { AmericanExpressIcon } from './Icons/AmericanExpressIcon'
import { DanKortIcon } from './Icons/DanKortIcon'
import { DinersClubIcon } from './Icons/DinersClubIcon'
import { JcbIcon } from './Icons/JcbIcon'
import { MasterCardIcon } from './Icons/MasterCardIcon'
import { VisaIcon } from './Icons/VisaIcon'
import { MaestroIcon } from './Icons/MaestroIcon'
import { ChinaUnionPayIcon } from './Icons/ChinaUnionPayIcon'
import { DiscoverIcon } from './Icons/DiscoverIcon'
import { PaymentIconProps } from './Icons/IconProps'
const paymentMethods: Partial<
Record<
keyof typeof PaymentMethodEnum,
(props: PaymentIconProps) => React.ReactNode
>
> = {
swish: (props) => <SwishIcon {...props} />,
vipps: (props) => <VippsIcon {...props} />,
mobilePay: (props) => <MobilePayIcon {...props} />,
applePay: (props) => <ApplePayIcon {...props} />,
googlePay: (props) => <GooglePayIcon {...props} />,
payPal: (props) => <PayPalIcon {...props} />,
klarna: (props) => <KlarnaIcon {...props} />,
americanExpress: (props) => <AmericanExpressIcon {...props} />,
dankort: (props) => <DanKortIcon {...props} />,
dinersClub: (props) => <DinersClubIcon {...props} />,
jcb: (props) => <JcbIcon {...props} />,
masterCard: (props) => <MasterCardIcon {...props} />,
visa: (props) => <VisaIcon {...props} />,
maestro: (props) => <MaestroIcon {...props} />,
chinaUnionPay: (props) => <ChinaUnionPayIcon {...props} />,
discover: (props) => <DiscoverIcon {...props} />,
}
type PaymentMethodIconProps = {
paymentMethod: PaymentMethodEnum
className?: string
alt?: string
}
export const PaymentMethodIcon = ({
paymentMethod,
...props
}: PaymentMethodIconProps) => {
const Icon = paymentMethods[paymentMethod]
if (!Icon) {
return <GenericCardIcon {...props} role="img" />
}
return <Icon {...props} role="img" />
}

14
packages/design-system/package.json
View File

@@ -30,15 +30,18 @@
"./Form/Country": "./lib/components/Form/Country/index.tsx",
"./Form/Date": "./lib/components/Form/Date/index.tsx",
"./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
"./Form/PaymentOption": "./lib/components/Form/PaymentOption/PaymentOption.tsx",
"./Form/PaymentOptionsGroup": "./lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx",
"./Form/Phone": "./lib/components/Form/Phone/index.tsx",
"./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
"./Form/SelectPaymentMethod": "./lib/components/Form/SelectPaymentMethod/index.tsx",
"./Form/TextArea": "./lib/components/Form/TextArea/index.tsx",
"./HotelInfoCard": "./lib/components/HotelInfoCard/index.tsx",
"./HotelCard": "./lib/components/HotelCard/index.tsx",
"./HotelCard/HotelCardDialogImage": "./lib/components/HotelCard/HotelCardDialogImage/index.tsx",
"./HotelCard/HotelCardSkeleton": "./lib/components/HotelCard/HotelCardSkeleton.tsx",
"./HotelCard/HotelPointsRow": "./lib/components/HotelCard/HotelPointsRow/index.tsx",
"./HotelCard/NoPriceAvailableCard": "./lib/components/HotelCard/NoPriceAvailableCard/index.tsx",
"./HotelCard/HotelCardSkeleton": "./lib/components/HotelCard/HotelCardSkeleton.tsx",
"./HotelInfoCard": "./lib/components/HotelInfoCard/index.tsx",
"./IconButton": "./lib/components/IconButton/index.tsx",
"./IconChip": "./lib/components/IconChip/index.tsx",
"./Icons": "./lib/components/Icons/index.tsx",
@@ -129,6 +132,7 @@
"./ImageFallback": "./lib/components/ImageFallback/index.tsx",
"./ImageGallery": "./lib/components/ImageGallery/index.tsx",
"./Input": "./lib/components/Input/index.tsx",
"./JsonToHtml": "./lib/components/JsonToHtml/JsonToHtml.tsx",
"./Label": "./lib/components/Label/index.tsx",
"./Lightbox": "./lib/components/Lightbox/index.tsx",
"./Link": "./lib/components/Link/index.tsx",
@@ -145,25 +149,25 @@
"./OldDSButton": "./lib/components/OldDSButton/index.tsx",
"./OpeningHours": "./lib/components/OpeningHours/index.tsx",
"./ParkingInformation": "./lib/components/ParkingInformation/index.tsx",
"./Payment/PaymentMethodIcon": "./lib/components/Payment/PaymentMethodIcon.tsx",
"./PointsRateCard": "./lib/components/RateCard/Points/index.tsx",
"./Preamble": "./lib/components/Preamble/index.tsx",
"./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
"./Select": "./lib/components/Select/index.tsx",
"./SidePeek": "./lib/components/SidePeek/index.tsx",
"./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled/index.tsx",
"./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
"./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled/index.tsx",
"./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
"./StaticMap": "./lib/components/StaticMap/index.tsx",
"./Subtitle": "./lib/components/Subtitle/index.tsx",
"./Switch": "./lib/components/Switch/index.tsx",
"./Table": "./lib/components/Table/index.tsx",
"./Title": "./lib/components/Title/index.tsx",
"./Tooltip": "./lib/components/Tooltip/index.tsx",
"./Toast": "./lib/components/Toasts/index.tsx",
"./ToastHandler": "./lib/components/Toasts/ToastHandler.tsx",
"./Tooltip": "./lib/components/Tooltip/index.tsx",
"./TripAdvisorChip": "./lib/components/TripAdvisorChip/index.tsx",
"./Typography": "./lib/components/Typography/index.tsx",
"./JsonToHtml": "./lib/components/JsonToHtml/JsonToHtml.tsx",
"./base.css": "./lib/base.css",
"./design-system-new-deprecated.css": "./lib/design-system-new-deprecated.css",
"./downtown-camper.css": "./lib/styles/downtown-camper.css",