/* @flow */
/** @jsx node */
import { COUNTRY, type LocaleType } from "@paypal/sdk-constants/src";
import {
node,
type ElementNode,
type ComponentNode,
} from "@krakenjs/jsx-pragmatic/src";
import {
getLogoCDNUrl,
getLogoColors,
SVGLogo,
type SVGLogoProps,
} from "../../lib";
import { LOGO_COLOR, LOGO } from "../../constants";
import type { LogoColors, LogoColorMap } from "../../types";
export const CREDIT_LOGO_COLORS: LogoColorMap = {
[LOGO_COLOR.DEFAULT]: {
primary: "#003087",
},
[LOGO_COLOR.BLUE]: {
primary: "#003087",
},
[LOGO_COLOR.WHITE]: {
primary: "#ffffff",
},
[LOGO_COLOR.BLACK]: {
primary: "#333030",
},
};
export const getCreditSVG = ({ country, primary }: LogoColors): ElementNode => {
switch (country) {
case COUNTRY.DE:
return (
);
default:
return (
);
}
};
export function CreditLogoExternalImage({
logoColor,
locale,
...props
}: {|
logoColor?: $Values,
locale: LocaleType,
|}): ComponentNode {
const { country } = locale;
const cdnUrl = getLogoCDNUrl(
LOGO.CREDIT,
CREDIT_LOGO_COLORS,
// $FlowFixMe
country === COUNTRY.DE ? `${COUNTRY.DE}-${logoColor}` : logoColor
);
return (
);
}
export function CreditLogoInlineSVG({
logoColor,
locale,
...props
}: {|
logoColor?: $Values,
locale: LocaleType,
|}): ComponentNode {
const { country } = locale;
// $FlowFixMe
const svg = getCreditSVG({
country,
...getLogoColors(LOGO.CREDIT, CREDIT_LOGO_COLORS, logoColor),
});
return (
{
return svg;
}}
/>
);
}
export const CreditLogo = CreditLogoInlineSVG;