@pagopa/io-app-design-system 1.0.0-0

package/src/components/listitems/__test__/listitem.test.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Alert } from "react-native";
+import * as TestRenderer from "react-test-renderer";
+import ListItemInfo from "../ListItemInfo";
+import ListItemInfoCopy from "../ListItemInfoCopy";
+import ListItemNav from "../ListItemNav";
+import ListItemNavAlert from "../ListItemNavAlert";
+import ListItemAction from "../ListItemAction";
+import ListItemIDP from "../ListItemIDP";
+import { ListItemTransaction } from "../ListItemTransaction";
+import { PressableListItemBase } from "../PressableListItemsBase";
+
+const onButtonPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+
+describe("Test List Item Components", () => {
+  it("ListItemInfo Snapshot", () => {
+    const listItemInfo = TestRenderer.create(<ListItemInfo label={"label"} value={"testValue"} accessibilityLabel={"accessibilityLabel"}></ListItemInfo>).toJSON();
+    expect(listItemInfo).toMatchSnapshot();
+  });
+  it("ListItemInfoCopy Snapshot", () => {
+    const listItemInfoCopy = TestRenderer.create(<ListItemInfoCopy label={"label"} value={"testValue"} onPress={onButtonPress} accessibilityLabel={"accessibilityLabel"}></ListItemInfoCopy>).toJSON();
+    expect(listItemInfoCopy).toMatchSnapshot();
+  });
+  it("ListItemNav Snapshot", () => {
+    const listItemNav = TestRenderer.create(<ListItemNav value={"testValue"} onPress={onButtonPress} accessibilityLabel={"accessibilityLabel"} ></ListItemNav>).toJSON();
+    expect(listItemNav).toMatchSnapshot();
+  });
+  it("ListItemNavAlert Snapshot", () => {
+    const listItemNavAlert = TestRenderer.create(<ListItemNavAlert value={"testValue"} onPress={onButtonPress} accessibilityLabel={"accessibilityLabel"} ></ListItemNavAlert>).toJSON();
+    expect(listItemNavAlert).toMatchSnapshot();
+  });
+  it("ListItemAction Snapshot", () => {
+    const listItemAction = TestRenderer.create(<ListItemAction label={"label"} variant={"primary"} onPress={onButtonPress} accessibilityLabel={"accessibilityLabel"}></ListItemAction>).toJSON();
+    expect(listItemAction).toMatchSnapshot();
+  });
+  it("ListItemIDP Snapshot", () => {
+    const listItemIDP = TestRenderer.create(<ListItemIDP></ListItemIDP>).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+  it("ListItemTransaction Snapshot", () => {
+    const listItemIDP = TestRenderer.create(<ListItemTransaction
+      title="TITLE"
+      subtitle="subtitle"
+      transactionStatus="success"
+      transactionAmount="€ 1.000,00"
+      isLoading={true}
+      onPress={onButtonPress}
+    />).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+  it("PressableListItemsBase Snapshot", () => {
+    const listItemIDP = TestRenderer.create(<PressableListItemBase></PressableListItemBase>).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+});

package/src/components/listitems/hooks/useListItemSpringAnimation.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import Animated, {
+    Extrapolate,
+    interpolate,
+    interpolateColor,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withSpring
+} from "react-native-reanimated";
+import {
+    IOColors,
+    IOScaleValues, IOSpringValues,
+    hexToRgba, useIOTheme
+} from "../../../core";
+
+export const useListItemSpringAnimation = () => {
+    const theme = useIOTheme();
+
+    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+
+    const mapBackgroundStates: Record<string, string> = {
+        default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
+        pressed: IOColors[theme["listItem-pressed"]]
+    };
+
+    // Scaling transformation applied when the button is pressed
+    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
+
+    const progressPressed = useDerivedValue(() =>
+        withSpring(isPressed.value, IOSpringValues.button)
+    );
+
+    // Interpolate animation values from `isPressed` values
+    const animatedScaleStyle = useAnimatedStyle(() => {
+        const scale = interpolate(
+            progressPressed.value,
+            [0, 1],
+            [1, animationScaleValue],
+            Extrapolate.CLAMP
+        );
+
+        return {
+            transform: [{ scale }]
+        };
+    });
+
+    const animatedBackgroundStyle = useAnimatedStyle(() => {
+        const backgroundColor = interpolateColor(
+            progressPressed.value,
+            [0, 1],
+            [mapBackgroundStates.default, mapBackgroundStates.pressed]
+        );
+
+        return {
+            backgroundColor
+        };
+    });
+
+    const onPressIn = React.useCallback(() => {
+        // eslint-disable-next-line functional/immutable-data
+        isPressed.value = 1;
+    }, [isPressed]);
+    const onPressOut = React.useCallback(() => {
+        // eslint-disable-next-line functional/immutable-data
+        isPressed.value = 0;
+    }, [isPressed]);
+
+    return { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle };
+};

package/src/components/listitems/index.tsx

@@ -0,0 +1,8 @@
+export * from "./ListItemAction";
+export * from "./ListItemIDP";
+export * from "./ListItemInfo";
+export * from "./ListItemInfoCopy";
+export * from "./ListItemNav";
+export * from "./ListItemNavAlert";
+export * from "./ListItemTransaction";
+export * from "./PressableListItemsBase";

package/src/components/logos/LogoPayment.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+/* Logos */
+import LogoPaymentMaestro from "./svg/LogoPaymentMaestro";
+import LogoPaymentMastercard from "./svg/LogoPaymentMastercard";
+import LogoPaymentVisa from "./svg/LogoPaymentVisa";
+import LogoPaymentAmex from "./svg/LogoPaymentAmex";
+import LogoPaymentDiners from "./svg/LogoPaymentDiners";
+import LogoPaymentDiscover from "./svg/LogoPaymentDiscover";
+import LogoPaymentJCB from "./svg/LogoPaymentJCB";
+import LogoPaymentUnionPay from "./svg/LogoPaymentUnionPay";
+import LogoPaymentPayPal from "./svg/LogoPaymentPayPal";
+import LogoPaymentBancomatPay from "./svg/LogoPaymentBancomatPay";
+import LogoPaymentVPay from "./svg/LogoPaymentVPay";
+import LogoPaymentPagoBancomat from "./svg/LogoPaymentPagoBancomat";
+import LogoPaymentSatispay from "./svg/LogoPaymentSatispay";
+import LogoPaymentPostepay from "./svg/LogoPaymentPostepay";
+import LogoPaymentMyBank from "./svg/LogoPaymentMyBank";
+import LogoPaymentApplePay from "./svg/LogoPaymentApplePay";
+
+export const IOPaymentLogos = {
+  maestro: LogoPaymentMaestro,
+  mastercard: LogoPaymentMastercard,
+  visa: LogoPaymentVisa,
+  amex: LogoPaymentAmex,
+  diners: LogoPaymentDiners,
+  discover: LogoPaymentDiscover,
+  jcb: LogoPaymentJCB,
+  unionPay: LogoPaymentUnionPay,
+  payPal: LogoPaymentPayPal,
+  bancomatPay: LogoPaymentBancomatPay,
+  vPay: LogoPaymentVPay,
+  pagoBancomat: LogoPaymentPagoBancomat,
+  satispay: LogoPaymentSatispay,
+  postepay: LogoPaymentPostepay,
+  myBank: LogoPaymentMyBank,
+  applePay: LogoPaymentApplePay
+} as const;
+
+export type IOLogoPaymentType = keyof typeof IOPaymentLogos;
+
+type IOIconsProps = {
+  name: IOLogoPaymentType;
+  size?: number | "100%";
+};
+
+export type SVGLogoProps = {
+  size: number | "100%";
+};
+
+const LogoPayment = ({ name, size = 24, ...props }: IOIconsProps) => {
+  const LogoElement = IOPaymentLogos[name];
+  return <LogoElement {...props} size={size} />;
+};
+
+export default LogoPayment;

package/src/components/logos/LogoPaymentExt.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import LogoPaymentExtAmex from "./svg/LogoPaymentExtAmex";
+
+/* Logos */
+import LogoPaymentExtMaestro from "./svg/LogoPaymentExtMaestro";
+import LogoPaymentExtMastercard from "./svg/LogoPaymentExtMastercard";
+import LogoPaymentExtVisa from "./svg/LogoPaymentExtVisa";
+import LogoPaymentExtVisaElectron from "./svg/LogoPaymentExtVisaElectron";
+import LogoPaymentExtVPay from "./svg/LogoPaymentExtVPay";
+import LogoPaymentExtDiners from "./svg/LogoPaymentExtDiners";
+import LogoPaymentExtJCB from "./svg/LogoPaymentExtJCB";
+import LogoPaymentExtUnionPay from "./svg/LogoPaymentExtUnionPay";
+import LogoPaymentExtPayPal from "./svg/LogoPaymentExtPayPal";
+import LogoPaymentExtBancomatPay from "./svg/LogoPaymentExtBancomatPay";
+import LogoPaymentExtPostepay from "./svg/LogoPaymentExtPostepay";
+import LogoPaymentExtSatispay from "./svg/LogoPaymentExtSatispay";
+import LogoPaymentExtPagoBancomat from "./svg/LogoPaymentExtPagoBancomat";
+import LogoPaymentExtApplePay from "./svg/LogoPaymentExtApplePay";
+
+export const IOPaymentExtLogos = {
+  maestro: LogoPaymentExtMaestro,
+  mastercard: LogoPaymentExtMastercard,
+  visa: LogoPaymentExtVisa,
+  visaElectron: LogoPaymentExtVisaElectron,
+  vPay: LogoPaymentExtVPay,
+  amex: LogoPaymentExtAmex,
+  diners: LogoPaymentExtDiners,
+  jcb: LogoPaymentExtJCB,
+  unionPay: LogoPaymentExtUnionPay,
+  payPal: LogoPaymentExtPayPal,
+  bancomatPay: LogoPaymentExtBancomatPay,
+  postepay: LogoPaymentExtPostepay,
+  satispay: LogoPaymentExtSatispay,
+  pagoBancomat: LogoPaymentExtPagoBancomat,
+  applePay: LogoPaymentExtApplePay
+} as const;
+
+export type IOLogoPaymentExtType = keyof typeof IOPaymentExtLogos;
+
+type IOPaymentLogos = {
+  name: IOLogoPaymentExtType;
+  size?: number | "100%";
+};
+
+const LogoPaymentExt = ({ name, size = 24, ...props }: IOPaymentLogos) => {
+  const LogoElement = IOPaymentExtLogos[name];
+  return <LogoElement {...props} size={size} />;
+};
+
+export default LogoPaymentExt;

package/src/components/logos/README.md

@@ -0,0 +1,35 @@
+# Logos
+There are different sets:
+* **Payment Logos (default)**: logos used in the payment methods
+* **Payment Logos (extended version)**: bigger version of logos used in the payment methods
+
+## Prefixes
+- **Payment Logos**: `LogoPayment…`
+- **Payment Logos (extended)**: `LogoPaymentExt…`
+
+## Add a new logo
+First of all, follow the instructions stated in the main README (`Vector graphics` section).
+
+If you want to add a new logo in the _Payment Logos_ set, open the `LogoPayment.tsx` file and import the React component:
+```jsx
+[…]
+import LogoPaymentMaestro from "./svg/LogoPaymentMaestro";
+[…]
+```
+Add the desired key to the `IOPaymentLogos` object with the corresponding component reference:
+```jsx
+export const IOPaymentLogos = {
+  maestro: LogoPaymentMaestro,
+  …
+} as const;
+```
+You can add the recently added icon with the following declaration:
+```jsx
+// Default size: 24×24px
+<LogoPayment name="maestro">
+```
+
+## View all the available icons
+There are two ways:
+- In the app, go to the `Profile → Design System → Icons` (you must enable `Debug Mode`)
+- In the repository, go to the `svg/originals` subfolder

package/src/components/logos/index.tsx

@@ -0,0 +1,4 @@
+export { default as LogoPayment } from "./LogoPayment";
+export * from "./LogoPayment";
+export { default as LogoPaymentExt } from "./LogoPaymentExt";
+export * from "./LogoPaymentExt";

package/src/components/logos/svg/LogoPaymentAmex.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Svg, Rect, Path } from "react-native-svg";
+import { SVGLogoProps } from "../LogoPayment";
+
+const LogoPaymentAmex = ({ size }: SVGLogoProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Rect y="4" width="24" height="16" rx="2" fill="#016FD0" />
+    <Path
+      d="M13.764 17.394v-5.702l10.148.01v1.574l-1.173 1.254 1.173 1.265v1.608h-1.873l-.995-1.098-.988 1.102-6.292-.013Z"
+      fill="#FFFFFE"
+    />
+    <Path
+      d="M14.442 16.769v-4.45h3.772v1.026h-2.55v.695h2.49v1.008h-2.49v.684h2.55v1.037h-3.772Z"
+      fill="#016FD0"
+    />
+    <Path
+      d="m18.195 16.769 2.088-2.227-2.088-2.222h1.616l1.275 1.41 1.28-1.41h1.546v.035l-2.043 2.187 2.043 2.164v.063H22.35l-1.298-1.424-1.285 1.424h-1.572Z"
+      fill="#016FD0"
+    />
+    <Path
+      d="M14.237 6.632h2.446l.86 1.95v-1.95h3.02l.52 1.461.523-1.461h2.306v5.701H11.725l2.512-5.701Z"
+      fill="#FFFFFE"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.726 11.697 14.7 7.25h1.565l1.965 4.446h-1.387l-.372-.89h-2.018l-.373.89h-1.354Zm2.736-3.303-.592 1.415h1.184l-.592-1.415Z"
+      fill="#016FD0"
+    />
+    <Path
+      d="M18.212 11.696V7.25l1.903.006.98 2.733.985-2.74h1.832v4.446l-1.179.01V8.653l-1.113 3.043h-1.075l-1.136-3.054v3.054h-1.197Z"
+      fill="#016FD0"
+    />
+  </Svg>
+);
+
+export default LogoPaymentAmex;

package/src/components/logos/svg/LogoPaymentApplePay.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGLogoProps } from "../LogoPayment";
+
+const LogoPaymentApplePay = ({ size }: SVGLogoProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M21.85 5H1.904c-.07 0-.138.002-.207.004-.15.004-.303.012-.452.038a1.55 1.55 0 0 0-.429.138 1.44 1.44 0 0 0-.63.616c-.07.134-.115.271-.142.42a2.855 2.855 0 0 0-.04.44A9.714 9.714 0 0 0 0 6.858v11.284c0 .068.002.135.003.203.005.146.013.295.04.44a1.403 1.403 0 0 0 .772 1.035c.138.068.278.111.43.138.148.026.3.035.45.039A11.013 11.013 0 0 0 2.15 20h19.948l.207-.003a3.11 3.11 0 0 0 .452-.04c.15-.026.291-.069.428-.137a1.436 1.436 0 0 0 .631-.616c.07-.134.115-.271.141-.42.027-.144.036-.293.04-.44.002-.067.003-.134.003-.202l.001-.24V6.858a9.1 9.1 0 0 0-.004-.202 2.845 2.845 0 0 0-.04-.44 1.415 1.415 0 0 0-.772-1.035 1.55 1.55 0 0 0-.428-.139 3.092 3.092 0 0 0-.452-.038L22.097 5h-.246Z"
+      fill="#000"
+    />
+    <Path
+      d="M21.85 5.5h.243c.066 0 .131.002.197.003.115.003.25.01.375.031.109.02.2.049.288.092a.928.928 0 0 1 .406.397.957.957 0 0 1 .094.281c.022.121.028.253.031.365a31.082 31.082 0 0 1 .004.43V18.14l-.004.191c-.003.113-.009.244-.032.366a.909.909 0 0 1-.5.677 1.02 1.02 0 0 1-.286.092 2.67 2.67 0 0 1-.373.03l-.2.004H1.906c-.067 0-.133-.002-.196-.003a2.679 2.679 0 0 1-.375-.031c-.109-.02-.2-.048-.288-.092a.922.922 0 0 1-.5-.678 2.416 2.416 0 0 1-.032-.365 9.128 9.128 0 0 1-.003-.192V6.861l.003-.192c.003-.112.01-.243.032-.366a.903.903 0 0 1 .5-.677c.088-.043.18-.072.288-.092.125-.022.26-.028.375-.03l.196-.004h19.945"
+      fill="#fff"
+    />
+    <Path
+      d="M6.552 10.045c.205-.25.345-.588.308-.932a1.34 1.34 0 0 0-.88.445c-.191.215-.36.566-.316.896.338.028.675-.165.888-.409ZM6.856 10.518c-.49-.028-.907.272-1.141.272-.235 0-.593-.257-.981-.25a1.451 1.451 0 0 0-1.23.729c-.527.886-.139 2.202.374 2.924.249.357.548.75.944.736.373-.014.52-.236.973-.236.454 0 .585.236.98.229.41-.007.667-.357.916-.715.285-.407.402-.8.41-.822-.008-.007-.791-.3-.798-1.18-.008-.736.614-1.086.644-1.108-.352-.507-.9-.564-1.09-.579ZM11.126 9.522c1.066 0 1.808.717 1.808 1.761 0 1.049-.757 1.77-1.835 1.77H9.92v1.832h-.852V9.522h2.06ZM9.92 12.354h.979c.742 0 1.165-.39 1.165-1.067 0-.676-.423-1.063-1.162-1.063H9.92v2.13ZM13.157 13.774c0-.684.537-1.104 1.489-1.156l1.096-.063v-.301c0-.435-.301-.695-.803-.695-.476 0-.773.223-.845.572h-.777c.046-.706.662-1.226 1.652-1.226.97 0 1.591.501 1.591 1.285v2.695h-.788v-.643h-.019c-.232.435-.738.71-1.264.71-.784 0-1.332-.476-1.332-1.178Zm2.585-.353v-.309l-.986.06c-.491.033-.77.245-.77.58 0 .341.29.564.732.564.575 0 1.024-.386 1.024-.895ZM17.304 16.323v-.65c.06.014.198.014.267.014.38 0 .586-.156.711-.557 0-.007.073-.238.073-.242l-1.447-3.913h.89l1.014 3.181h.015l1.012-3.18h.868l-1.5 4.113c-.342.948-.738 1.253-1.568 1.253a3.26 3.26 0 0 1-.335-.019Z"
+      fill="#000"
+    />
+  </Svg>
+);
+
+export default LogoPaymentApplePay;

package/src/components/logos/svg/LogoPaymentBancomatPay.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Svg, Path, Rect } from "react-native-svg";
+import { SVGLogoProps } from "../LogoPayment";
+
+const LogoPaymentBancomatPay = ({ size }: SVGLogoProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Rect width="24" height="24" rx="4" fill="#3CBDEE" />
+    <Path
+      d="M18.71 17.288c-.268.45-.588.876-.828 1.34-.294.572-.68 1.087-1.007 1.637a.395.395 0 0 0-.044.165l-.165 1.29a.475.475 0 0 1-.07.222h-1.337c-.025-.222.028-.425.046-.629.028-.314.084-.627.128-.94.017-.123-.046-.227-.086-.335-.373-1.019-.747-2.036-1.122-3.053-.022-.061-.064-.12-.042-.209h1.473c.244.651.423 1.34.705 2.052l1.236-2.052H19c-.041.2-.189.346-.288.512ZM18.66 8.58a1.203 1.203 0 0 0-.386-.685c-.642-.605-1.267-1.225-1.9-1.838-1.27-1.233-2.534-2.472-3.811-3.697-.396-.379-.866-.54-1.454-.064-.18.147-.34.319-.504.478-.138.134-.974.945-1.247 1.227-.54.559-1.114 1.088-1.673 1.63L5.295 7.95a.883.883 0 0 0-.295.7c-.013.259.13.477.332.674.574.556 1.129 1.133 1.723 1.668.692.623 1.309 1.315 2.006 1.933.684.607 1.317 1.269 1.976 1.902.09.087.155.192.268.266.333.223.943.104 1.25-.197 1.617-1.592 3.252-3.165 4.882-4.746.315-.306.633-.61.961-.904a.739.739 0 0 0 .262-.665Zm-5.803 2.912c-.29.078-.59.117-.89.117H9.207a.226.226 0 0 1-.168-.041c.052-.364.067-.744.155-1.11.108-.064.214-.04.314-.04.765-.003 1.53-.016 2.294 0 .555.012.789-.184.846-.686a.655.655 0 0 1 .03-.096h1.548c.046.997-.557 1.637-1.37 1.856Zm2.488-2.34H9.351c.051-.357.066-.696.14-1.018.108-.053.206-.033.296-.033.774-.004 1.549-.003 2.323-.009a.758.758 0 0 0 .352-.082.732.732 0 0 0 .269-.235.704.704 0 0 0 .067-.677.33.33 0 0 0-.116-.148.346.346 0 0 0-.18-.063 3.245 3.245 0 0 0-.335-.014H9.651l.139-1.206c.206-.064.404-.032.598-.033.636-.005 1.272.01 1.907-.006.418-.003.835.038 1.245.122.543.1.904.47.925 1.05.014.444-.1.883-.33 1.266.885.107 1.307.492 1.21 1.086ZM9.98 17.783c-.073-.45-.357-.75-.815-.9a2.475 2.475 0 0 0-.754-.121c-.696-.01-1.394-.005-2.088-.005-.085 0-.174-.016-.246.05l-.64 5.142h1.38c.108-.512.106-1.023.227-1.53.394.012.768-.012 1.144.012.206.013.456.006.625-.104.243-.16.498-.323.68-.557.46-.595.603-1.265.487-1.987Zm-1.418 1.022c-.072.308-.258.45-.585.454-.256.005-.511 0-.78 0-.017-.243.04-.453.057-.664.018-.211.06-.411.096-.65.303 0 .586-.013.866.003.246.013.362.144.388.386a1.4 1.4 0 0 1-.042.47ZM14.102 21.825c-.155-.814-.31-1.628-.467-2.442-.12-.623-.244-1.244-.365-1.866a.943.943 0 0 0-.396-.614c-.403-.276-.864-.185-1.302-.178a1596.92 1596.92 0 0 0-1.518 3.39c-.118.262-.74 1.46-.794 1.883.413 0 .816.006 1.217-.005.126-.003.206-.102.248-.22.052-.141.092-.288.193-.415h1.651c.058.2.044.407.138.582h1.401c0-.038-.002-.077-.006-.115Zm-2.711-1.665c.2-.533.438-1.027.66-1.527l.064.004.28 1.523h-1.004Z"
+      fill="#fff"
+    />
+  </Svg>
+);
+
+export default LogoPaymentBancomatPay;

package/src/components/logos/svg/LogoPaymentDiners.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGLogoProps } from "../LogoPayment";
+
+const LogoPaymentDiners = ({ size }: SVGLogoProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M21.997 19.75H22c.956.008 1.74-.773 1.751-1.746V6.006a1.788 1.788 0 0 0-.52-1.25 1.72 1.72 0 0 0-1.233-.506H2.001a1.718 1.718 0 0 0-1.23.507c-.33.33-.517.779-.521 1.247v11.99c.004.47.191.92.52 1.25.329.328.771.51 1.233.506h19.994Z"
+      fill="#fff"
+      stroke="#5C6F82"
+      stroke-width=".5"
+    />
+    <Path
+      d="M10.002 6.052v-.016h4v.016a6 6 0 0 1 0 11.968v.016h-4v-.016a6 6 0 0 1 0-11.968Z"
+      fill="#0165AC"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.202 12.036a5.2 5.2 0 1 0 10.4 0 5.2 5.2 0 0 0-10.4 0Zm4-3.392a3.6 3.6 0 0 0 0 6.784V8.644Zm2.4 6.784a3.6 3.6 0 0 0 0-6.784v6.784Z"
+      fill="#fff"
+    />
+  </Svg>
+);
+
+export default LogoPaymentDiners;

package/src/components/logos/svg/LogoPaymentDiscover.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGLogoProps } from "../LogoPayment";
+
+const LogoPaymentDiscover = ({ size }: SVGLogoProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M21.997 19.75H22c.956.008 1.74-.773 1.751-1.746V6.006a1.788 1.788 0 0 0-.52-1.25 1.72 1.72 0 0 0-1.233-.506H2.001a1.718 1.718 0 0 0-1.23.507c-.33.33-.517.779-.521 1.247v11.99c.004.47.191.92.52 1.25.329.328.771.51 1.233.506h19.994Z"
+      fill="#fff"
+      stroke="#5C6F82"
+      stroke-width=".5"
+    />
+    <Path
+      d="M12.612 20h9.385A1.986 1.986 0 0 0 24 18.03v-2.358A38.738 38.738 0 0 1 12.612 20Z"
+      fill="#F27712"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.721 11.716c0 .935.828 1.655 1.887 1.655.29 0 .555-.05.87-.182v-.728c-.282.248-.522.347-.837.347-.703 0-1.2-.455-1.2-1.092 0-.604.505-1.084 1.167-1.084.325 0 .637.128.87.356v-.729a2.018 2.018 0 0 0-.853-.19c-1.06 0-1.904.736-1.904 1.647Zm8.185 1.663L14.4 10.143h.761l.952 2.119.96-2.119h.745l-1.523 3.236h-.389Zm4.204-3.227h-1.97v3.153h1.97v-.53h-1.274v-.852h1.225v-.538h-1.225v-.704h1.274v-.53Zm3.062 3.144h-.852l-.96-1.266h-.091v1.266h-.695v-3.144H21.6c.803 0 1.266.33 1.266.927 0 .488-.29.802-.81.902l1.116 1.315Zm-1.026-2.193c0-.306-.232-.463-.662-.463h-.215v.952h.199c.447 0 .678-.166.678-.489Zm-14.64 1.233v.004c-.001-.51-.234-.74-1.026-.988-.414-.141-.538-.232-.538-.398 0-.198.215-.347.513-.347.214 0 .419.09.563.248l.364-.414a1.68 1.68 0 0 0-1.05-.356c-.63 0-1.11.39-1.11.902 0 .44.224.662.877.87.165.046.326.107.48.182.141.082.207.19.207.33 0 .249-.223.44-.538.44-.33 0-.596-.141-.753-.423l-.455.39c.323.413.703.595 1.233.595.727 0 1.231-.42 1.233-1.03v.004-.009Zm-2.723-2.184h-.695v3.153h.695v-3.153Zm-2.937 3.153H.828v-3.153h1.026c1.125 0 1.903.645 1.903 1.572 0 .472-.231.919-.637 1.217-.348.248-.737.364-1.274.364Zm-.133-2.615c.455 0 .72.066.952.248.24.19.38.48.38.786 0 .306-.14.604-.38.803-.224.165-.505.248-.952.248h-.19V10.69h.19Z"
+      fill="#000"
+    />
+    <Path
+      d="M12.414 10.069c-.91 0-1.655.728-1.655 1.63 0 .96.711 1.68 1.655 1.68a1.64 1.64 0 0 0 1.655-1.655c0-.927-.72-1.655-1.655-1.655Z"
+      fill="#F27712"
+    />
+  </Svg>
+);
+
+export default LogoPaymentDiscover;

package/src/components/logos/svg/LogoPaymentExtAmex.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGLogoProps } from "../LogoPayment";
+
+const LogoPaymentExtAmex = ({ size }: SVGLogoProps) => (
+  <Svg width={size} height={size} viewBox="0 0 48 30">
+    <Path
+      d="M48 28.406c0 .893-.725 1.594-1.594 1.594H1.594A1.593 1.593 0 0 1 0 28.406V1.594C0 .7.725 0 1.594 0h44.812C47.299 0 48 .725 48 1.594v26.812Z"
+      fill="#006FCF"
+    />
+    <Path
+      d="M14.88 14.208v-.48l-.216.48h-1.968l-.24-.504v.504h-3.72l-.432-1.032H7.56l-.456 1.032h-1.92v-3.12L6.576 7.92h2.688l.384.888V7.92h3.288l.72 1.512.696-1.512H24.72s.552 0 .912.24v-.24h2.616v.336s.48-.336 1.176-.336h4.608l.408.912V7.92h2.952l.528.912V7.92h2.832v6.288h-2.904l-.672-1.104v1.08h-3.6l-.504-1.128h-.696l-.48 1.128h-2.184s-.816 0-1.416-.456v.456h-4.344V12.72c0-.216-.168-.192-.168-.192h-.168v1.656H14.88v.024ZM12.72 15.576h5.712l.816.936.84-.936h4.392s.408 0 .792.216v-.216h3.912c.504 0 .912.24.912.24v-.24h5.016v.24s.36-.24.84-.24h3.264v.24s.408-.24.84-.24h2.568v5.928s-.336.384-1.032.384h-3.384v-.192s-.312.192-.816.192h-9v-1.536c0-.144-.072-.168-.192-.168h-.12v1.704h-2.808v-1.704s-.312.168-.84.168h-1.008v1.536h-3.456l-.792-.96-.84.96H12.72v-6.312Z"
+      fill="#fff"
+    />
+    <Path
+      d="M30.72 16.512h3.576v.96H31.8v.84h2.424v.84H31.8v.888h2.496v.936H30.72v-4.464ZM41.208 18.264c1.344.072 1.464.744 1.464 1.464 0 .84-.696 1.296-1.416 1.296h-2.304v-.96h1.8c.312 0 .768 0 .768-.432 0-.192-.072-.336-.408-.36a9.4 9.4 0 0 0-.768-.048c-1.224-.024-1.512-.648-1.512-1.368 0-.84.6-1.296 1.296-1.296h2.304v.96h-1.68c-.384 0-.792-.048-.792.384 0 .264.216.336.456.36.12-.048.72 0 .792 0ZM37.08 18.264c1.344.072 1.464.744 1.464 1.464 0 .84-.696 1.296-1.416 1.296h-2.304v-.96h1.8c.312 0 .768 0 .768-.432 0-.192-.072-.336-.408-.36a9.4 9.4 0 0 0-.768-.048c-1.224-.024-1.488-.648-1.488-1.368 0-.84.576-1.296 1.296-1.296h2.304v.96h-1.68c-.384 0-.792-.048-.792.384 0 .264.216.336.456.36.096-.048.696 0 .768 0Z"
+      fill="#006FCF"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.256 16.536h3.84c.528 0 1.32.24 1.344 1.392 0 1.56-1.032 1.584-1.608 1.584h-1.464v1.512h-2.112l-1.296-1.488L17.64 21h-4.176v-4.464h4.32l1.224 1.392 1.248-1.392Zm-5.712 3.504h2.52l1.2-1.344-1.056-1.224h-2.664v.84h2.424v.84h-2.424v.888Zm6.72.528-1.584-1.872 1.584-1.752v3.624Zm1.104-2.016h1.368c.432 0 .6-.264.6-.576 0-.216-.144-.504-.6-.504h-1.368v1.08ZM30.144 17.736c0 .528-.168.936-.768 1.224.528.048.72.384.696 1.128l.048.912h-1.056l-.024-.816c0-.384-.144-.768-.528-.768h-1.44V21h-1.104v-4.464h2.856c.552 0 1.32.24 1.32 1.2Zm-3.072.768h1.368c.456 0 .6-.216.6-.504 0-.216-.144-.504-.6-.504h-1.368v1.008Z"
+      fill="#006FCF"
+    />
+    <Path
+      d="M26.424 8.808h1.104v4.464h-1.104V8.808ZM17.448 8.808h3.576v.96h-2.472v.84h2.4v.864h-2.4v.864h2.472v.936h-3.576V8.808Z"
+      fill="#006FCF"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M25.848 10.032c0 .528-.168.936-.768 1.224.528.048.72.384.696 1.128l.048.912h-1.056l-.024-.816c0-.384-.144-.768-.528-.768h-1.44v1.584h-1.104V8.832h2.856c.552 0 1.32.24 1.32 1.2Zm-3.072.744h1.368c.456 0 .6-.192.6-.504 0-.216-.144-.504-.6-.504h-1.368v1.008ZM13.584 11.808l1.344-3h1.752v4.464h-1.104v-3.264l-1.488 3.264H13.08L11.616 9.96v3.312H9.408l-.432-1.008H6.792l-.432 1.008H5.208l1.944-4.464h1.44l1.92 4.296V8.808h1.728l1.344 3Zm-5.736-2.04-.648 1.56h1.32l-.672-1.56ZM38.832 11.904V8.808h1.104v4.464h-1.488l-1.968-3.264v3.264h-2.16l-.432-1.008h-2.184l-.432 1.008h-1.44c-1.224 0-1.752-1.032-1.728-2.256.024-1.824 1.104-2.208 1.608-2.208h1.44v.96h-.672c-.72 0-1.296.072-1.296 1.128v.312c0 .792.408.984.672 1.032.048.024.696.024.696.024l1.512-3.456h1.44l1.872 4.2v-4.2h1.608l1.848 3.096Zm-6.096-2.136-.648 1.56h1.344l-.696-1.56Z"
+      fill="#006FCF"
+    />
+  </Svg>
+);
+
+export default LogoPaymentExtAmex;

package/src/components/logos/svg/LogoPaymentExtApplePay.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGLogoProps } from "../LogoPayment";
+
+const LogoPaymentExtApplePay = ({ size }: SVGLogoProps) => (
+  <Svg width={size} height={size} viewBox="0 0 49 30">
+    <Path
+      d="M43.701 0H3.806c-.138.002-.276.003-.414.007a6.17 6.17 0 0 0-.903.078A3.1 3.1 0 0 0 1.63.36C1.36.495 1.114.67.9.879A2.811 2.811 0 0 0 .087 2.43a5.71 5.71 0 0 0-.08.881c-.004.135-.005.27-.006.405v22.568c0 .135.002.27.006.405.008.294.026.59.08.88A2.806 2.806 0 0 0 .9 29.12c.214.21.461.386.73.52.275.136.557.223.859.276.297.052.601.07.903.077l.414.006L4.3 30H43.7l.492-.001c.139 0 .277-.003.416-.006.3-.008.604-.025.902-.077.302-.053.583-.14.858-.277a2.866 2.866 0 0 0 1.261-1.231c.14-.268.23-.543.283-.838.054-.29.071-.587.08-.881l.006-.405.001-.48V4.196l-.001-.481c0-.135-.003-.27-.007-.405a5.715 5.715 0 0 0-.079-.88A2.827 2.827 0 0 0 46.37.36a3.103 3.103 0 0 0-.858-.276 6.187 6.187 0 0 0-.903-.078 21.21 21.21 0 0 0-.415-.006L43.701 0Z"
+      fill="#000"
+    />
+    <Path
+      d="M43.701 1h.485c.131.002.263.003.395.007.23.006.498.018.749.062.217.038.4.096.575.183a1.853 1.853 0 0 1 .813.795c.089.17.148.347.187.561.045.242.057.505.064.73a62.164 62.164 0 0 1 .007.858v21.607c0 .158 0 .316-.002.477 0 .127-.002.254-.005.382a4.844 4.844 0 0 1-.064.733 1.91 1.91 0 0 1-.187.559 1.814 1.814 0 0 1-.815.795 2.042 2.042 0 0 1-.571.182 5.343 5.343 0 0 1-.747.063c-.132.003-.264.004-.4.005l-.484.001H4.292L3.811 29c-.132 0-.264-.002-.392-.005a5.342 5.342 0 0 1-.749-.062 2.044 2.044 0 0 1-.576-.184 1.834 1.834 0 0 1-1-1.356 4.832 4.832 0 0 1-.063-.73 18.246 18.246 0 0 1-.006-.383V3.723c0-.129.002-.257.006-.385.006-.224.018-.486.064-.732.039-.212.098-.39.187-.56a1.85 1.85 0 0 1 .813-.793c.175-.088.357-.146.575-.184.25-.044.52-.056.75-.062.13-.004.262-.005.392-.006L4.3 1H43.7"
+      fill="#fff"
+    />
+    <Path
+      d="M13.104 10.09c.41-.501.69-1.175.616-1.864-.602.03-1.336.388-1.76.89-.383.43-.72 1.132-.632 1.792.675.057 1.35-.33 1.776-.818ZM13.712 11.037c-.98-.058-1.814.543-2.283.543-.468 0-1.186-.515-1.961-.5a2.903 2.903 0 0 0-2.46 1.457c-1.053 1.774-.277 4.404.747 5.848.498.715 1.098 1.502 1.888 1.473.747-.028 1.04-.472 1.947-.472s1.17.472 1.961.458c.82-.014 1.332-.715 1.83-1.43.571-.815.805-1.601.82-1.644-.015-.014-1.581-.601-1.596-2.36-.014-1.472 1.23-2.172 1.288-2.216-.702-1.014-1.8-1.129-2.18-1.158ZM22.252 9.044c2.132 0 3.616 1.434 3.616 3.523 0 2.096-1.515 3.538-3.67 3.538h-2.36v3.664h-1.705V9.044h4.12Zm-2.413 5.663h1.956c1.485 0 2.33-.78 2.33-2.133 0-1.352-.845-2.125-2.322-2.125h-1.964v4.258ZM26.314 17.547c0-1.368 1.073-2.208 2.977-2.312l2.192-.126v-.602c0-.87-.601-1.39-1.606-1.39-.952 0-1.546.446-1.69 1.145h-1.553c.091-1.413 1.324-2.453 3.304-2.453 1.941 0 3.182 1.003 3.182 2.572v5.388h-1.576v-1.285h-.038c-.464.87-1.477 1.42-2.527 1.42-1.569 0-2.665-.952-2.665-2.357Zm5.17-.706v-.617l-1.972.119c-.983.067-1.538.49-1.538 1.16 0 .683.578 1.13 1.462 1.13 1.15 0 2.047-.774 2.047-1.792ZM34.608 22.646v-1.3c.122.029.396.029.533.029.761 0 1.172-.312 1.424-1.115 0-.015.144-.476.144-.483l-2.893-7.827h1.782l2.025 6.363h.03l2.026-6.363h1.736l-3 8.228c-.685 1.895-1.477 2.505-3.137 2.505a6.52 6.52 0 0 1-.67-.037Z"
+      fill="#000"
+    />
+  </Svg>
+);
+
+export default LogoPaymentExtApplePay;

package/src/components/logos/svg/LogoPaymentExtBancomatPay.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGLogoProps } from "../LogoPayment";
+
+const LogoPaymentExtBancomatPay = ({ size }: SVGLogoProps) => (
+  <Svg width={size} height={size} viewBox="0 0 49 30">
+    <Path
+      d="m21.7 13.305-9.135-8.9a1.45 1.45 0 0 0-2.013 0l-9.136 8.9a1.36 1.36 0 0 0 0 1.96l9.136 8.9a1.45 1.45 0 0 0 2.013 0l9.136-8.9a1.36 1.36 0 0 0 0-1.96Zm-6.24 3.116c-.235 1.863-1.625 2.762-3.891 2.762H6.973l.266-2.075h4.566c.584 0 .899-.343.976-.952.007-.066.01-.126.01-.186h2.704a4.933 4.933 0 0 1-.034.45h-.002Zm1.83-1.18H7.473l.237-1.875h4.433c.649-.001.852-.436.919-.965.066-.529-.028-.859-.693-.859H7.942l.267-2.155h4.528c2.58 0 3.273 1.07 3.088 2.54-.076.6-.25 1.078-.504 1.44h.265c1.031 0 1.831.878 1.705 1.876l-.002-.001Z"
+      fill="#3FBDEE"
+    />
+    <Path
+      d="M36.438 9.388c.854 0 1.587.593 1.746 1.41l1.632 8.387h-2.723l-.227-1.372-.003-.023h-2.968l-.007.017-.575 1.378h-2.639l4.377-9.796h1.387v-.001ZM34.77 15.6h1.759l-.007-.032-.494-2.712-.016-.087-.035.081-1.19 2.712-.015.036M31.636 10.227c-.505-.557-1.37-.84-2.566-.84h-4.193l-1.234 9.797h2.606l.364-2.888.003-.022h1.524c1.261 0 2.248-.352 2.932-1.044.59-.598.96-1.446 1.096-2.523.142-1.118-.032-1.93-.532-2.48Zm-2.08 2.646c-.11.866-.45 1.219-1.174 1.219h-1.49l.003-.03.305-2.42.003-.022h1.485c.331 0 .562.077.704.233.176.192.227.517.163 1.02ZM49 9.388l-4.123 6.673-.003.004v.006l-.393 3.114h-2.647l.398-3.16v-.013l-2.425-6.624h2.821l1.307 3.85.019.055.03-.051 2.295-3.854H49ZM48.64 18.879c-.209.204-.46.305-.755.305-.294 0-.545-.102-.753-.305a.991.991 0 0 1-.308-.736c0-.288.103-.53.31-.733.207-.2.457-.301.75-.301s.546.1.754.301a.984.984 0 0 1 .311.733.99.99 0 0 1-.311.736h.001Zm-1.402-1.367a.853.853 0 0 0-.267.633c0 .247.09.46.266.636a.89.89 0 0 0 .648.263c.255 0 .47-.087.648-.263a.863.863 0 0 0 .267-.636c0-.25-.09-.458-.267-.633a.89.89 0 0 0-.648-.262.89.89 0 0 0-.647.262Zm.627.059c.145 0 .252.014.32.04.12.05.18.146.18.289 0 .102-.037.177-.114.225a.435.435 0 0 1-.17.056c.091.013.159.05.2.11a.3.3 0 0 1 .064.177v.084a.873.873 0 0 0 .012.144l.008.013h-.193s-.001-.007-.003-.01l-.001-.012-.005-.038v-.09c0-.132-.037-.218-.111-.261a.516.516 0 0 0-.23-.036h-.162v.447h-.206v-1.14h.41l.002.002Zm.222.179a.55.55 0 0 0-.25-.042h-.175v.413h.187a.576.576 0 0 0 .195-.026c.08-.031.12-.09.12-.179 0-.082-.026-.138-.077-.166Z"
+      fill="#3EBEEF"
+    />
+  </Svg>
+);
+
+export default LogoPaymentExtBancomatPay;