mirror of
https://github.com/valitydev/checkout.git
synced 2024-11-06 02:25:18 +00:00
Delete styled components (#324)
This commit is contained in:
Ildar Galeev
GitHub
parent
f5092242b6
commit
62830b3e7b
2512
package-lock.json
generated
2512
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -30,14 +30,11 @@
|
||||
"ismobilejs": "1.1.1",
|
||||
"kjua": "0.9.0",
|
||||
"libphonenumber-js": "1.10.37",
|
||||
"md5": "2.3.0",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-error-boundary": "4.0.11",
|
||||
"react-hook-form": "7.45.1",
|
||||
"react-icons": "5.2.1",
|
||||
"react-svg": "16.1.18",
|
||||
"styled-components": "6.0.4",
|
||||
"uri-template": "1.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -63,7 +60,6 @@
|
||||
"typescript": "5.1.6",
|
||||
"vite": "4.5.3",
|
||||
"vite-plugin-static-copy": "0.17.0",
|
||||
"vite-plugin-svgr": "3.2.0",
|
||||
"vite-tsconfig-paths": "4.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,11 +60,7 @@ export function App() {
|
||||
}, ON_COMPLETE_TIMEOUT_MS),
|
||||
}}
|
||||
>
|
||||
<AppLayout
|
||||
colorMode={theme.initialColorMode}
|
||||
initParams={state.data[1]}
|
||||
styledComponentsTheme={theme?.__styledComponents}
|
||||
/>
|
||||
<AppLayout colorMode={theme.initialColorMode} initParams={state.data[1]} />
|
||||
</CompletePaymentContext.Provider>
|
||||
</ChakraBaseProvider>
|
||||
)}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ChevronLeftIcon } from '@chakra-ui/icons';
|
||||
import { Flex, IconButton } from '@chakra-ui/react';
|
||||
import { HiChevronLeft } from 'react-icons/hi';
|
||||
|
||||
export type BackwardButtonProps = {
|
||||
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
||||
@ -11,7 +11,7 @@ export function BackwardBox({ onClick }: BackwardButtonProps) {
|
||||
<IconButton
|
||||
aria-label="Back"
|
||||
fontSize={24}
|
||||
icon={<ChevronLeftIcon />}
|
||||
icon={<HiChevronLeft />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onClick}
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
import plantation from './plantation';
|
||||
import rhino from './rhino';
|
||||
import { Theme } from './types';
|
||||
|
||||
const themes = [plantation, rhino];
|
||||
|
||||
export const DEFAULT_THEME = plantation;
|
||||
|
||||
export interface WithThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
export function getTheme(themeName: string): Theme {
|
||||
return themes.find(({ name }) => name === themeName) || DEFAULT_THEME;
|
||||
}
|
||||
|
||||
export type { Theme, ThemeName } from './types';
|
||||
@ -1,83 +0,0 @@
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import { ThemeName, Theme } from './types';
|
||||
|
||||
const palette = {
|
||||
Mustard: '#FFDB57',
|
||||
Aztec: '#081514',
|
||||
GableGreen: '#163735',
|
||||
William: '#386460',
|
||||
LightningYellow: '#ffc81e',
|
||||
Flamenco: '#ff7808',
|
||||
AthensGray: '#F9FAFB',
|
||||
Zeus: '#110E0B',
|
||||
Loblolly: '#C3CED6',
|
||||
RegentGray: '#87939B',
|
||||
CopperRose: '#A17171',
|
||||
Cinnabar: '#E75542',
|
||||
SeaNymph: '#71A19D',
|
||||
BlueRibbon: '#0038FF',
|
||||
Candlelight: '#ffe05c',
|
||||
Silver: '#979797',
|
||||
Orange: '#ffe484',
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: ThemeName.plantation,
|
||||
font: {
|
||||
family: "'Roboto', sans-serif",
|
||||
primaryColor: palette.Zeus,
|
||||
},
|
||||
background: {
|
||||
gradient: css`linear-gradient(30deg, ${palette.Aztec} 0%, ${palette.GableGreen} 50%, ${palette.William} 100%)`,
|
||||
loader: [
|
||||
[palette.Flamenco, '0%'],
|
||||
[palette.Mustard, '100%'],
|
||||
],
|
||||
},
|
||||
form: {
|
||||
background: palette.AthensGray,
|
||||
border: palette.Loblolly,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: 'none',
|
||||
border: palette.Loblolly,
|
||||
color: '#000000',
|
||||
placeholder: palette.RegentGray,
|
||||
error: palette.Cinnabar,
|
||||
focus: palette.Zeus,
|
||||
},
|
||||
icons: {
|
||||
success: palette.SeaNymph,
|
||||
error: palette.CopperRose,
|
||||
warn: palette.Candlelight,
|
||||
checkmark: palette.SeaNymph,
|
||||
},
|
||||
divider: palette.Loblolly,
|
||||
externalLink: palette.BlueRibbon,
|
||||
paymentMethodItem: {
|
||||
border: palette.Loblolly,
|
||||
hover: palette.Zeus,
|
||||
color: palette.Zeus,
|
||||
error: palette.Cinnabar,
|
||||
},
|
||||
chevronButton: {
|
||||
color: palette.Zeus,
|
||||
disabled: palette.Silver,
|
||||
},
|
||||
button: {
|
||||
primaryText: palette.Zeus,
|
||||
outlineText: palette.Zeus,
|
||||
color: palette.Mustard,
|
||||
hover: palette.LightningYellow,
|
||||
},
|
||||
linkButton: {
|
||||
color: palette.Zeus,
|
||||
hover: palette.Zeus,
|
||||
},
|
||||
alert: {
|
||||
background: palette.Orange,
|
||||
},
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@ -1,83 +0,0 @@
|
||||
import { css } from 'styled-components';
|
||||
|
||||
import { Theme, ThemeName } from './types';
|
||||
|
||||
const palette = {
|
||||
CodGray: '#110E0B',
|
||||
FlushOrange: '#FF7E00',
|
||||
Alabaster: '#F8F8F8',
|
||||
SilverChalice: '#AEAEAE',
|
||||
RegentGray: '#87939B',
|
||||
Cinnabar: '#E75542',
|
||||
SeaNymph: '#71A19D',
|
||||
CopperRose: '#A17171',
|
||||
Candlelight: '#ffe05c',
|
||||
BlueRibbon: '#0038FF',
|
||||
White: '#FFFFFF',
|
||||
Clementine: '#ef7000',
|
||||
Gorse: '#fdec4a',
|
||||
Rhino: '#33436B',
|
||||
BlueCharcoal: '#000C1F',
|
||||
Silver: '#979797',
|
||||
Orange: '#ffe484',
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: ThemeName.rhino,
|
||||
font: {
|
||||
family: "'Roboto', sans-serif",
|
||||
primaryColor: palette.CodGray,
|
||||
},
|
||||
background: {
|
||||
gradient: css`radial-gradient(75.93% 95.05% at 46.36% 43.35%, ${palette.Rhino} 0%, ${palette.BlueCharcoal} 100%)`,
|
||||
loader: [
|
||||
[palette.Gorse, '0%'],
|
||||
[palette.FlushOrange, '100%'],
|
||||
],
|
||||
},
|
||||
form: {
|
||||
background: palette.Alabaster,
|
||||
border: palette.SilverChalice,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: 'none',
|
||||
border: palette.SilverChalice,
|
||||
color: '#000000',
|
||||
placeholder: palette.RegentGray,
|
||||
error: palette.Cinnabar,
|
||||
focus: palette.CodGray,
|
||||
},
|
||||
icons: {
|
||||
success: palette.SeaNymph,
|
||||
error: palette.CopperRose,
|
||||
warn: palette.Candlelight,
|
||||
checkmark: palette.SeaNymph,
|
||||
},
|
||||
divider: palette.SilverChalice,
|
||||
externalLink: palette.BlueRibbon,
|
||||
paymentMethodItem: {
|
||||
border: palette.SilverChalice,
|
||||
hover: palette.CodGray,
|
||||
color: palette.CodGray,
|
||||
error: palette.Cinnabar,
|
||||
},
|
||||
chevronButton: {
|
||||
color: palette.CodGray,
|
||||
disabled: palette.Silver,
|
||||
},
|
||||
button: {
|
||||
primaryText: palette.White,
|
||||
outlineText: palette.FlushOrange,
|
||||
color: palette.FlushOrange,
|
||||
hover: palette.Clementine,
|
||||
},
|
||||
linkButton: {
|
||||
color: palette.CodGray,
|
||||
hover: palette.CodGray,
|
||||
},
|
||||
alert: {
|
||||
background: palette.Orange,
|
||||
},
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@ -1,61 +0,0 @@
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export enum ThemeName {
|
||||
plantation = 'plantation',
|
||||
rhino = 'rhino',
|
||||
}
|
||||
|
||||
export type Theme = {
|
||||
name: ThemeName;
|
||||
font: {
|
||||
family: string;
|
||||
primaryColor: string;
|
||||
};
|
||||
background: {
|
||||
gradient: ReturnType<typeof css>;
|
||||
loader: string[][];
|
||||
};
|
||||
form: {
|
||||
background: string;
|
||||
border: string;
|
||||
};
|
||||
input: {
|
||||
backgroundColor: string;
|
||||
border: string;
|
||||
color: string;
|
||||
placeholder: string;
|
||||
error: string;
|
||||
focus: string;
|
||||
};
|
||||
icons: {
|
||||
success: string;
|
||||
error: string;
|
||||
warn: string;
|
||||
checkmark: string;
|
||||
};
|
||||
divider: string;
|
||||
externalLink: string;
|
||||
paymentMethodItem: {
|
||||
border: string;
|
||||
hover: string;
|
||||
color: string;
|
||||
error: string;
|
||||
};
|
||||
chevronButton: {
|
||||
color: string;
|
||||
disabled: string;
|
||||
};
|
||||
button: {
|
||||
primaryText: string;
|
||||
outlineText: string;
|
||||
color: string;
|
||||
hover: string;
|
||||
};
|
||||
linkButton: {
|
||||
color: string;
|
||||
hover: string;
|
||||
};
|
||||
alert: {
|
||||
background: string;
|
||||
};
|
||||
};
|
||||
@ -1,12 +1,10 @@
|
||||
import { Flex, useColorMode } from '@chakra-ui/react';
|
||||
import { lazy, useEffect } from 'react';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
|
||||
import { ErrorAlert, GlobalSpinner } from 'checkout/components';
|
||||
import { CustomizationContext, LocaleContext } from 'checkout/contexts';
|
||||
import { InitParams } from 'checkout/init';
|
||||
import { getTheme } from 'checkout/theme';
|
||||
import { extractError } from 'checkout/utils';
|
||||
|
||||
import { useInitModels } from './useInitModels';
|
||||
@ -15,7 +13,6 @@ import { toCustomizationContext } from './utils';
|
||||
|
||||
type AppLayoutProps = {
|
||||
initParams: InitParams;
|
||||
styledComponentsTheme?: Record<string, any>;
|
||||
colorMode: string;
|
||||
};
|
||||
|
||||
@ -37,9 +34,8 @@ const ModalContainer = ({ children }: { children: React.ReactNode }) => (
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export function AppLayout({ initParams, styledComponentsTheme, colorMode }: AppLayoutProps) {
|
||||
export function AppLayout({ initParams, colorMode }: AppLayoutProps) {
|
||||
const { setColorMode } = useColorMode();
|
||||
const theme = styledComponentsTheme || getTheme(initParams.appConfig.fixedTheme);
|
||||
const { modelsState, init } = useInitModels();
|
||||
const customizationContextValue = toCustomizationContext(initParams.initConfig);
|
||||
const initLocaleCode = customizationContextValue.initLocaleCode;
|
||||
@ -57,37 +53,35 @@ export function AppLayout({ initParams, styledComponentsTheme, colorMode }: AppL
|
||||
}, [colorMode]);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<LocaleContext.Provider value={{ l, localeCode, changeLocale }}>
|
||||
<ModalContainer>
|
||||
{modelsState.status === 'PROCESSING' && <GlobalSpinner l={l} />}
|
||||
{modelsState.status === 'INITIALIZED' && (
|
||||
<CustomizationContext.Provider value={customizationContextValue}>
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<ErrorAlert
|
||||
description="Try reloading"
|
||||
isReloading={true}
|
||||
title="Something went wrong"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<GlobalContainer
|
||||
initConditions={modelsState.data.conditions}
|
||||
paymentModel={modelsState.data.paymentModel}
|
||||
<LocaleContext.Provider value={{ l, localeCode, changeLocale }}>
|
||||
<ModalContainer>
|
||||
{modelsState.status === 'PROCESSING' && <GlobalSpinner l={l} />}
|
||||
{modelsState.status === 'INITIALIZED' && (
|
||||
<CustomizationContext.Provider value={customizationContextValue}>
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<ErrorAlert
|
||||
description="Try reloading"
|
||||
isReloading={true}
|
||||
title="Something went wrong"
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</CustomizationContext.Provider>
|
||||
)}
|
||||
{modelsState.status === 'FAILURE' && (
|
||||
<ErrorAlert
|
||||
description={extractError(modelsState.error)}
|
||||
isReloading={false}
|
||||
title="Initialization failure"
|
||||
/>
|
||||
)}
|
||||
</ModalContainer>
|
||||
</LocaleContext.Provider>
|
||||
</ThemeProvider>
|
||||
}
|
||||
>
|
||||
<GlobalContainer
|
||||
initConditions={modelsState.data.conditions}
|
||||
paymentModel={modelsState.data.paymentModel}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</CustomizationContext.Provider>
|
||||
)}
|
||||
{modelsState.status === 'FAILURE' && (
|
||||
<ErrorAlert
|
||||
description={extractError(modelsState.error)}
|
||||
isReloading={false}
|
||||
title="Initialization failure"
|
||||
/>
|
||||
)}
|
||||
</ModalContainer>
|
||||
</LocaleContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { VStack, Text, Flex, Spacer, Divider, useClipboard, useToast, IconButton, createIcon } from '@chakra-ui/react';
|
||||
import { VStack, Text, Flex, Spacer, Divider, useClipboard, useToast, IconButton } from '@chakra-ui/react';
|
||||
import { ReactElement, cloneElement, useContext, useEffect, useMemo, useState } from 'react';
|
||||
import { HiOutlineDuplicate } from 'react-icons/hi';
|
||||
|
||||
import { LocaleContext } from 'checkout/contexts';
|
||||
import { isNil } from 'checkout/utils';
|
||||
@ -13,14 +14,6 @@ export type InfoItemProps = {
|
||||
formatter?: (value: string) => Promise<string>;
|
||||
};
|
||||
|
||||
export const CopyIcon = createIcon({
|
||||
displayName: 'CopyIcon',
|
||||
viewBox: '0 0 16 16',
|
||||
path: (
|
||||
<path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z" />
|
||||
),
|
||||
});
|
||||
|
||||
export function InfoItem({ label, value, isCopyable, formatter, icon, isDivider }: InfoItemProps) {
|
||||
const { l } = useContext(LocaleContext);
|
||||
const { onCopy, hasCopied } = useClipboard(value);
|
||||
@ -69,7 +62,16 @@ export function InfoItem({ label, value, isCopyable, formatter, icon, isDivider
|
||||
<Text fontWeight="medium" textAlign="end">
|
||||
{displayValue}
|
||||
</Text>
|
||||
{isCopyable && <IconButton aria-label="Copy" icon={<CopyIcon />} size="xs" onClick={onCopy} />}
|
||||
{isCopyable && (
|
||||
<IconButton
|
||||
aria-label="Copy"
|
||||
colorScheme="gray"
|
||||
fontSize="18px"
|
||||
icon={<HiOutlineDuplicate />}
|
||||
size="xs"
|
||||
onClick={onCopy}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
{isDividerVisible && <Divider />}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { SberbankIcon, TinkoffIcon, RaiffeisenIcon, SBPIcon } from '../icons';
|
||||
|
||||
export const getGatewayIcon = (gatewayName: string, defaultIcon?: JSX.Element): JSX.Element => {
|
||||
switch (gatewayName) {
|
||||
switch (gatewayName.toLowerCase()) {
|
||||
case 'sberbank':
|
||||
return <SberbankIcon />;
|
||||
case 'tinkoff':
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { ChevronUpIcon } from '@chakra-ui/icons';
|
||||
import {
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
@ -9,6 +8,7 @@ import {
|
||||
VStack,
|
||||
Text,
|
||||
} from '@chakra-ui/react';
|
||||
import { HiChevronUp } from 'react-icons/hi';
|
||||
|
||||
import { truncate } from 'checkout/utils';
|
||||
|
||||
@ -23,7 +23,7 @@ export function DetailsDrawer({ isOpen, onClose, name, description }: DetailsDra
|
||||
return (
|
||||
<Drawer isOpen={isOpen} placement="top" size="sm" onClose={onClose}>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent background="viewContainerBg">
|
||||
<DrawerContent>
|
||||
<DrawerBody>
|
||||
<VStack align="stretch">
|
||||
{name && (
|
||||
@ -35,7 +35,7 @@ export function DetailsDrawer({ isOpen, onClose, name, description }: DetailsDra
|
||||
</VStack>
|
||||
</DrawerBody>
|
||||
<DrawerFooter>
|
||||
<IconButton aria-label="close" colorScheme="gray" icon={<ChevronUpIcon />} onClick={onClose} />
|
||||
<IconButton aria-label="close" colorScheme="gray" icon={<HiChevronUp />} onClick={onClose} />
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { ChevronDownIcon, ChevronLeftIcon } from '@chakra-ui/icons';
|
||||
import { Button, Flex, Text, VStack, useDisclosure, useMediaQuery } from '@chakra-ui/react';
|
||||
import { useContext } from 'react';
|
||||
import { HiChevronDown, HiChevronLeft } from 'react-icons/hi';
|
||||
|
||||
import { CustomizationContext, LocaleContext } from 'checkout/contexts';
|
||||
import { truncate } from 'checkout/utils';
|
||||
@ -24,7 +24,7 @@ export function InfoContainer({ viewAmount }: InfoProps) {
|
||||
<VStack align="start">
|
||||
<Button
|
||||
colorScheme="gray"
|
||||
leftIcon={<ChevronLeftIcon />}
|
||||
leftIcon={<HiChevronLeft />}
|
||||
variant="link"
|
||||
onClick={() => window.history.back()}
|
||||
>
|
||||
@ -38,7 +38,7 @@ export function InfoContainer({ viewAmount }: InfoProps) {
|
||||
{viewAmount}
|
||||
</Text>
|
||||
{!isLargerThan768 && (name || description) && (
|
||||
<Button colorScheme="gray" rightIcon={<ChevronDownIcon />} onClick={onOpen}>
|
||||
<Button colorScheme="gray" rightIcon={<HiChevronDown />} onClick={onOpen}>
|
||||
{l['info.details']}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { ChevronDownIcon } from '@chakra-ui/icons';
|
||||
import { Flex, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { HiChevronDown } from 'react-icons/hi';
|
||||
|
||||
import { isEmojiSupported } from 'checkout/utils';
|
||||
|
||||
@ -73,7 +73,7 @@ export function LocaleSelector({ initLocaleCode, onLocaleChange }: LocaleSelecto
|
||||
<Text color="white" fontSize="md" fontWeight="bold">
|
||||
{localeInfo[activeLocaleCode]?.short || activeLocaleCode}
|
||||
</Text>
|
||||
<ChevronDownIcon />
|
||||
<HiChevronDown />
|
||||
</Flex>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
import { useTheme } from '@chakra-ui/react';
|
||||
import { Center, useTheme } from '@chakra-ui/react';
|
||||
import kjua from 'kjua';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
export type QRCodeProps = {
|
||||
text: string;
|
||||
@ -16,7 +10,7 @@ export function QRCode({ text }: QRCodeProps) {
|
||||
QRCode: { back, fill },
|
||||
} = useTheme();
|
||||
return (
|
||||
<Wrapper
|
||||
<Center
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: kjua({
|
||||
size: 224,
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import { Divider, useClipboard, useToast, VStack, Text, Button, LightMode } from '@chakra-ui/react';
|
||||
import { Divider, useClipboard, useToast, VStack, Text, Button, LightMode, Input } from '@chakra-ui/react';
|
||||
import isMobile from 'ismobilejs';
|
||||
import { useContext, useEffect, useRef } from 'react';
|
||||
import { useContext, useEffect } from 'react';
|
||||
|
||||
import { QrCodeFormMetadata } from 'checkout/backend/payments';
|
||||
import { LocaleContext, PaymentConditionsContext, PaymentContext, PaymentModelContext } from 'checkout/contexts';
|
||||
import { PaymentInteractionRequested, PaymentStarted } from 'checkout/paymentCondition';
|
||||
import { isNil } from 'checkout/utils';
|
||||
import { findMetadata } from 'checkout/utils/findMetadata';
|
||||
|
||||
import { QRCode } from './QrCode';
|
||||
import { QrCodeFormMetadata } from '../../../common/backend/payments';
|
||||
import { Input } from '../../../components/legacy';
|
||||
|
||||
const isQrCodeRedirect = (formMetadata: QrCodeFormMetadata) =>
|
||||
!isNil(formMetadata) &&
|
||||
@ -17,7 +16,6 @@ const isQrCodeRedirect = (formMetadata: QrCodeFormMetadata) =>
|
||||
formMetadata.qrCodeRedirect === 'mobile';
|
||||
|
||||
export function QrCodeView() {
|
||||
const qrCodeInputRef = useRef(null);
|
||||
const { l } = useContext(LocaleContext);
|
||||
const { conditions } = useContext(PaymentConditionsContext);
|
||||
const {
|
||||
@ -54,12 +52,7 @@ export function QrCodeView() {
|
||||
<>
|
||||
{qrCodeForm.isCopyCodeBlock && (
|
||||
<>
|
||||
<Input
|
||||
ref={qrCodeInputRef}
|
||||
defaultValue={interaction.qrCode}
|
||||
id="qr-code-input"
|
||||
readOnly={true}
|
||||
></Input>
|
||||
<Input defaultValue={interaction.qrCode} id="qr-code-input" readOnly={true}></Input>
|
||||
<LightMode>
|
||||
<Button borderRadius="lg" colorScheme="brand" size="lg" onClick={onCopy}>
|
||||
{l['form.button.copy.label']}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
|
||||
import { Text, IconButton, Flex } from '@chakra-ui/react';
|
||||
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi';
|
||||
|
||||
export type PageNavigationProps = {
|
||||
page: number;
|
||||
@ -17,7 +17,7 @@ export function PageNavigation({ previous, next, page, totalPages, isNext, isPre
|
||||
aria-label="Previous"
|
||||
colorScheme="gray"
|
||||
fontSize={24}
|
||||
icon={<ChevronLeftIcon />}
|
||||
icon={<HiChevronLeft />}
|
||||
isDisabled={!isPrevious}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
@ -30,7 +30,7 @@ export function PageNavigation({ previous, next, page, totalPages, isNext, isPre
|
||||
aria-label="Next"
|
||||
colorScheme="gray"
|
||||
fontSize={24}
|
||||
icon={<ChevronRightIcon />}
|
||||
icon={<HiChevronRight />}
|
||||
isDisabled={!isNext}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
type ButtonType = 'primary' | 'default';
|
||||
|
||||
export const Button = styled.button<{ color?: ButtonType }>`
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
|
||||
${({ theme, color }) =>
|
||||
color === 'primary'
|
||||
? css`
|
||||
border-radius: 32px;
|
||||
color: ${theme.button.primaryText};
|
||||
border: 2px solid ${({ theme }) => theme.button.color};
|
||||
background: ${theme.button.color};
|
||||
|
||||
&:hover {
|
||||
background: ${theme.button.hover};
|
||||
border-color: ${theme.button.hover};
|
||||
}
|
||||
`
|
||||
: css`
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: ${theme.button.outlineText};
|
||||
border: 2px solid ${({ theme }) => theme.button.color};
|
||||
|
||||
:hover {
|
||||
border-color: ${theme.button.hover};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
@ -1,57 +0,0 @@
|
||||
import { number } from 'card-validator';
|
||||
import * as React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
|
||||
import { ReactComponent as Maestro } from './icon/card/maestro.svg';
|
||||
import { ReactComponent as Mastercard } from './icon/card/mastercard.svg';
|
||||
import { ReactComponent as Mir } from './icon/card/mir.svg';
|
||||
import { ReactComponent as Unionpay } from './icon/card/unionpay.svg';
|
||||
import { ReactComponent as Visa } from './icon/card/visa.svg';
|
||||
|
||||
const growth = keyframes`
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
`;
|
||||
|
||||
const getIconInstance = (cardNumber: string) => {
|
||||
const { card } = number(cardNumber);
|
||||
if (!card) {
|
||||
return null;
|
||||
}
|
||||
switch (card.type) {
|
||||
case 'mir':
|
||||
return Mir;
|
||||
case 'unionpay':
|
||||
return Unionpay;
|
||||
case 'maestro':
|
||||
return Maestro;
|
||||
case 'mastercard':
|
||||
return Mastercard;
|
||||
case 'visa':
|
||||
return Visa;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
type CardTypeIconProps = React.FC<{
|
||||
cardNumber: string;
|
||||
className?: string;
|
||||
}>;
|
||||
|
||||
export const CardTypeIcon = styled<CardTypeIconProps>(({ cardNumber, className }) => {
|
||||
const Icon = getIconInstance(cardNumber);
|
||||
return Icon ? <Icon className={className} /> : null;
|
||||
})`
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 31px;
|
||||
height: 19px;
|
||||
animation: ${growth} 0.5s;
|
||||
background: #fff;
|
||||
`;
|
||||
@ -1,44 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { styled, css } from 'styled-components';
|
||||
|
||||
import { ReactComponent as ChevronLeftIcon } from './icon/chevron-left.svg';
|
||||
import { ReactComponent as ChevronRightIcon } from './icon/chevron-right.svg';
|
||||
|
||||
const Button = styled.button<{ disabled?: boolean }>`
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
path {
|
||||
fill: ${({ theme }) => theme.chevronButton.color};
|
||||
}
|
||||
}
|
||||
|
||||
${({ disabled }) =>
|
||||
disabled &&
|
||||
css`
|
||||
cursor: default;
|
||||
svg {
|
||||
path {
|
||||
fill: ${({ theme }) => theme.chevronButton.disabled};
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export type ChevronButtonProps = {
|
||||
type: 'left' | 'right';
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
id?: string;
|
||||
};
|
||||
|
||||
export const ChevronButton: React.FC<ChevronButtonProps> = ({ id, onClick, type, disabled }) => (
|
||||
<Button aria-disabled={disabled} disabled={disabled} id={id} onClick={onClick}>
|
||||
{type === 'left' && <ChevronLeftIcon />} {type === 'right' && <ChevronRightIcon />}
|
||||
</Button>
|
||||
);
|
||||
@ -1,35 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { Button } from './Button';
|
||||
import { Locale } from '../../common/contexts';
|
||||
|
||||
export const CopyToClipboardButton: React.FC<{
|
||||
onClick: () => void;
|
||||
timeout?: number;
|
||||
l: Locale;
|
||||
}> = ({ timeout = 3000, onClick, l }) => {
|
||||
const [label, setLabel] = useState(l['form.button.copy.label']);
|
||||
|
||||
useEffect(() => {
|
||||
setLabel(l['form.button.copy.label']);
|
||||
}, [l]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setLabel(l['form.button.copy.label']);
|
||||
}, timeout);
|
||||
return () => clearTimeout(timer);
|
||||
}, [label]);
|
||||
|
||||
const handleOnClick = () => {
|
||||
onClick();
|
||||
setLabel(l['form.button.copied.label']);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button id="copy-to-clipboard-btn" onClick={() => handleOnClick()}>
|
||||
{label}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
@ -1,30 +0,0 @@
|
||||
import { FieldError, FieldErrorsImpl, Merge, UseFormRegister } from 'react-hook-form';
|
||||
|
||||
import { Input } from './Input';
|
||||
import { Locale } from '../../common/contexts';
|
||||
import { isNil, formatEmail, validateEmail } from '../../common/utils';
|
||||
|
||||
export type EmailProps = {
|
||||
registerName: string;
|
||||
register: UseFormRegister<any>;
|
||||
locale: Locale;
|
||||
fieldError: FieldError | Merge<FieldError, FieldErrorsImpl<any>>;
|
||||
isDirty: boolean;
|
||||
};
|
||||
|
||||
export const Email = ({ registerName, register, locale, fieldError, isDirty }: EmailProps) => (
|
||||
<Input
|
||||
{...register(registerName, {
|
||||
required: true,
|
||||
validate: (value) => !validateEmail(value) || 'Email is invalid',
|
||||
})}
|
||||
autoComplete="email"
|
||||
dirty={isDirty}
|
||||
error={!isNil(fieldError)}
|
||||
id="email-input"
|
||||
mark={true}
|
||||
placeholder={locale['form.input.email.placeholder']}
|
||||
type="email"
|
||||
onInput={formatEmail}
|
||||
/>
|
||||
);
|
||||
@ -1,12 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const FormGroup = styled.div<{
|
||||
direction?: 'column' | 'row';
|
||||
$gap?: number;
|
||||
}>`
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: ${({ direction }) => direction || 'row'};
|
||||
margin-bottom: 10px;
|
||||
gap: ${({ $gap }) => `${$gap}px` || 0};
|
||||
`;
|
||||
@ -1,11 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const HeaderWrapper = styled.div`
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 20px;
|
||||
`;
|
||||
@ -1,7 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Hr = styled.hr`
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-top: 1px solid ${({ theme }) => theme.divider};
|
||||
`;
|
||||
@ -1,96 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
import { styled, css } from 'styled-components';
|
||||
|
||||
import { Marks } from './Marks';
|
||||
|
||||
const CONTENT_OFFSET = 15;
|
||||
const TEXT_ICON_OFFSET = 8;
|
||||
const ICON_SIZE = 18;
|
||||
|
||||
const Icon = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: ${CONTENT_OFFSET}px 0 ${CONTENT_OFFSET}px ${CONTENT_OFFSET}px;
|
||||
width: ${ICON_SIZE}px;
|
||||
height: ${ICON_SIZE}px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input<{ $hasIcon?: boolean }>`
|
||||
background-color: ${({ theme }) => theme.input.backgroundColor};
|
||||
color: ${({ theme }) => theme.input.color};
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
border: 1px solid ${({ theme }) => theme.input.border};
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
padding-left: ${({ $hasIcon }) => `${$hasIcon ? CONTENT_OFFSET + ICON_SIZE + TEXT_ICON_OFFSET : CONTENT_OFFSET}px`};
|
||||
padding-right: ${CONTENT_OFFSET}px;
|
||||
appearance: none;
|
||||
/* transition: border-color 0.3s; */
|
||||
|
||||
::placeholder {
|
||||
color: ${({ theme }) => theme.input.placeholder};
|
||||
/* opacity: 1; */
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border-color: ${({ theme }) => theme.input.focus};
|
||||
border-width: 1px;
|
||||
box-shadow: 0 0 0 1px ${({ theme }) => theme.input.focus};
|
||||
outline: transparent solid 2px;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
`;
|
||||
|
||||
const InputWrapper = styled.div<{ $error?: any; $mark?: boolean }>`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
${({ $error, theme }) =>
|
||||
$error &&
|
||||
css`
|
||||
${StyledInput} {
|
||||
border-color: ${theme.input.error};
|
||||
box-shadow: 0 0 0 1px ${({ theme }) => theme.input.error};
|
||||
}
|
||||
`};
|
||||
|
||||
${({ $mark }) =>
|
||||
$mark &&
|
||||
css`
|
||||
${StyledInput} {
|
||||
padding-right: 30px;
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
export type InputProps = JSX.IntrinsicElements['input'] & {
|
||||
icon?: React.ReactNode;
|
||||
mark?: boolean;
|
||||
error?: boolean;
|
||||
dirty?: boolean;
|
||||
autoComplete?: string;
|
||||
};
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, error, dirty, mark, icon, ...props }, ref) => (
|
||||
<InputWrapper {...{ className, $error: error, $mark: mark }}>
|
||||
{icon && <Icon>{icon}</Icon>}
|
||||
<StyledInput {...props} ref={ref} $hasIcon={!!icon} />
|
||||
{mark && dirty && !error && <Marks />}
|
||||
</InputWrapper>
|
||||
),
|
||||
);
|
||||
|
||||
Input.displayName = 'Input';
|
||||
@ -1,16 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Link = styled.a`
|
||||
font-weight: 900;
|
||||
font-size: 11px;
|
||||
color: ${({ theme }) => theme.linkButton.color};
|
||||
letter-spacing: 2px;
|
||||
line-height: 15px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: ${({ theme }) => theme.linkButton.hover};
|
||||
}
|
||||
`;
|
||||
@ -1,36 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import styled, { keyframes, withTheme } from 'styled-components';
|
||||
|
||||
import { WithThemeProps } from '../../common/theme';
|
||||
|
||||
export const spin = keyframes`
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
`;
|
||||
|
||||
const LoaderWrapper = styled.svg`
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
animation: ${spin} 1s linear infinite;
|
||||
`;
|
||||
|
||||
const LoaderDef: React.FC<WithThemeProps> = ({ theme }) => (
|
||||
<LoaderWrapper height="64px" viewBox="0 0 57 57" width="64px">
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="100%" x2="0%" y1="0%" y2="100%">
|
||||
{theme.background.loader.map((color, idx) => (
|
||||
<stop key={idx} offset={color[1]} stopColor={color[0]} />
|
||||
))}
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
|
||||
<g stroke={`url(#gradient)`} strokeWidth="4" transform="translate(-655.000000, -383.000000)">
|
||||
<circle cx="683.5" cy="411.5" r="26.5" />
|
||||
</g>
|
||||
</g>
|
||||
</LoaderWrapper>
|
||||
);
|
||||
|
||||
export const Loader = withTheme(LoaderDef);
|
||||
@ -1,36 +0,0 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { ReactComponent as Checkmark } from './icon/checkmark.svg';
|
||||
|
||||
const fadeIn = {
|
||||
hidden: { opacity: 0 },
|
||||
show: { opacity: 1, transition: { duration: 0.3 } },
|
||||
exit: { opacity: 0, transition: { duration: 0.3 } },
|
||||
};
|
||||
|
||||
const iconStyle = css`
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const CheckmarkIcon = styled(Checkmark)`
|
||||
${iconStyle};
|
||||
height: 9px;
|
||||
width: 13px;
|
||||
margin: 19px 15px 0 19px;
|
||||
g {
|
||||
stroke: ${({ theme }) => theme.icons.checkmark};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Marks = () => (
|
||||
<motion.div animate="show" exit="exit" initial="hidden" variants={fadeIn}>
|
||||
<CheckmarkIcon />
|
||||
</motion.div>
|
||||
);
|
||||
@ -1,17 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Method = styled.li`
|
||||
border-radius: 8px;
|
||||
border: 1px solid ${({ theme }) => theme.paymentMethodItem.border};
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border-color: ${({ theme }) => theme.paymentMethodItem.hover};
|
||||
}
|
||||
`;
|
||||
@ -1,20 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Button } from './Button';
|
||||
import { Locale } from '../../common/contexts';
|
||||
import { ViewAmount } from '../ViewContainer';
|
||||
|
||||
const PayButtonWrapper = styled(Button)`
|
||||
margin-top: 24px;
|
||||
`;
|
||||
|
||||
export type PayButtonProps = {
|
||||
l: Locale;
|
||||
viewAmount: ViewAmount;
|
||||
};
|
||||
|
||||
export const PayButton = ({ l, viewAmount }: PayButtonProps) => (
|
||||
<PayButtonWrapper color="primary" id="pay-btn" type="submit">
|
||||
{l['form.button.pay.label']} {viewAmount}
|
||||
</PayButtonWrapper>
|
||||
);
|
||||
@ -1,34 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { ReactComponent as BankCard } from './bank-card.svg';
|
||||
import { ReactComponent as OnlineBanking } from './online-banking.svg';
|
||||
import { ReactComponent as Terminals } from './terminals.svg';
|
||||
import { ReactComponent as Wallets } from './wallets.svg';
|
||||
|
||||
const IconClasses = {
|
||||
'bank-card': BankCard,
|
||||
terminals: Terminals,
|
||||
wallets: Wallets,
|
||||
'online-banking': OnlineBanking,
|
||||
};
|
||||
|
||||
type name = keyof typeof IconClasses;
|
||||
|
||||
export const PaymentMethodIcon = styled<React.FC<{ name: name; className?: string }>>((props) => {
|
||||
const IconClass: any = IconClasses[props.name];
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<IconClass />
|
||||
</div>
|
||||
);
|
||||
})`
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-right: 15px;
|
||||
|
||||
path {
|
||||
fill: ${({ theme }) => theme.paymentMethodItem.color};
|
||||
}
|
||||
`;
|
||||
@ -1,7 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 10C0 7.23858 2.23858 5 5 5H35C37.7614 5 40 7.23858 40 10V12.5H0V10Z" fill="#2596A1" />
|
||||
<path
|
||||
d="M0 17.5V30C0 32.7614 2.23858 35 5 35H35C37.7614 35 40 32.7614 40 30V17.5H0ZM7.5 22.5H10C11.3807 22.5 12.5 23.6193 12.5 25V27.5C12.5 28.8807 11.3807 30 10 30H7.5C6.11929 30 5 28.8807 5 27.5V25C5 23.6193 6.11929 22.5 7.5 22.5Z"
|
||||
fill="#2596A1"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 483 B |
@ -1 +0,0 @@
|
||||
export { PaymentMethodIcon } from './PaymentMethodIcon';
|
||||
@ -1,10 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20.6935 0.209937C20.2736 -0.069979 19.7266 -0.069979 19.3067 0.209937L0.556722 12.7099C0.0984004 13.0155 -0.105891 13.585 0.0537321 14.1122C0.213355 14.6394 0.699263 15 1.2501 15H5.9376V32.5H3.7501C3.05974 32.5 2.5001 33.0596 2.5001 33.75C2.5001 34.4404 3.05974 35 3.7501 35H36.2501C36.9405 35 37.5001 34.4404 37.5001 33.75C37.5001 33.0596 36.9405 32.5 36.2501 32.5H34.0626V15H38.7501C39.3009 15 39.7868 14.6394 39.9465 14.1122C40.1061 13.585 39.9018 13.0155 39.4435 12.7099L20.6935 0.209937ZM30.9376 15V32.5H27.8126V15H30.9376ZM24.6876 15V32.5H21.5626V15H24.6876ZM18.4376 15V32.5H15.3126V15H18.4376ZM12.1876 15V32.5H9.0626V15H12.1876ZM20 10C18.6193 10 17.5 8.88071 17.5 7.5C17.5 6.11929 18.6193 5 20 5C21.3807 5 22.5 6.11929 22.5 7.5C22.5 8.88071 21.3807 10 20 10Z"
|
||||
fill="#2596A1"
|
||||
/>
|
||||
<path
|
||||
d="M1.2501 37.5C0.559741 37.5 9.71877e-05 38.0596 9.71877e-05 38.75C9.71877e-05 39.4404 0.559741 40 1.2501 40H38.7501C39.4405 40 40.0001 39.4404 40.0001 38.75C40.0001 38.0596 39.4405 37.5 38.7501 37.5H1.2501Z"
|
||||
fill="#2596A1"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,9 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path
|
||||
fill="#685BFF"
|
||||
transform="translate(-4, -9)"
|
||||
d="M33.05,10h-26a3,3,0,0,0-3,3V27a3,3,0,0,0,3,3h26a3,3,0,0,0,3-3V13A3,3,0,0,0,33.05,10Zm-23,18h-3a1,1,0,0,1-1-1V24a1,1,0,0,1,2,0v2h2a1,1,0,0,1,0,2Zm0-14h-2v2a1,1,0,0,1-2,0V13a1,1,0,0,1,1-1h3a1,1,0,0,1,0,2Zm10.5,11a4.5,4.5,0,1,1,4.5-4.5A4.5,4.5,0,0,1,20.55,25Zm13.5,2a1,1,0,0,1-1,1h-3a1,1,0,1,1,0-2h2V24a1,1,0,0,1,2,0Zm0-11a1,1,0,0,1-2,0V14h-2a1,1,0,1,1,0-2h3a1,1,0,0,1,1,1Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 589 B |
@ -1,6 +0,0 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M36.0312 10H6.25C5.55937 10 5 9.44063 5 8.75C5 8.05937 5.55937 7.5 6.25 7.5H36.25C36.9406 7.5 37.5 6.94063 37.5 6.25C37.5 4.17891 35.8211 2.5 33.75 2.5H5C2.23828 2.5 0 4.73828 0 7.5V32.5C0 35.2617 2.23828 37.5 5 37.5H36.0312C38.2203 37.5 40 35.818 40 33.75V13.75C40 11.682 38.2203 10 36.0312 10ZM32.5 26.25C31.1195 26.25 30 25.1305 30 23.75C30 22.3695 31.1195 21.25 32.5 21.25C33.8805 21.25 35 22.3695 35 23.75C35 25.1305 33.8805 26.25 32.5 26.25Z"
|
||||
fill="#2596A1"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 603 B |
@ -1,18 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const PaymentMethodItemContainer = styled.li`
|
||||
border-radius: 8px;
|
||||
border: 1px solid ${({ theme }) => theme.paymentMethodItem.border};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
height: 80px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
border-color: ${({ theme }) => theme.paymentMethodItem.hover};
|
||||
}
|
||||
`;
|
||||
@ -1,13 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const PaymentMethodTitle = styled.div`
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
color: ${({ theme }) => theme.paymentMethodItem.color};
|
||||
letter-spacing: 2px;
|
||||
line-height: 15px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-table;
|
||||
`;
|
||||
@ -1,31 +0,0 @@
|
||||
import { FieldError, FieldErrorsImpl, Merge, UseFormRegister } from 'react-hook-form';
|
||||
|
||||
import { Input } from './Input';
|
||||
import { Locale } from '../../common/contexts';
|
||||
import { isNil, formatPhoneNumber, validatePhone } from '../../common/utils';
|
||||
|
||||
export interface PhoneProps {
|
||||
registerName: string;
|
||||
register: UseFormRegister<any>;
|
||||
locale: Locale;
|
||||
fieldError: FieldError | Merge<FieldError, FieldErrorsImpl<any>>;
|
||||
isDirty: boolean;
|
||||
}
|
||||
|
||||
export const Phone = ({ registerName, register, locale, fieldError, isDirty }: PhoneProps) => (
|
||||
<Input
|
||||
{...register(registerName, {
|
||||
required: true,
|
||||
validate: (value) => !validatePhone(value) || 'Phone number is invalid',
|
||||
})}
|
||||
autoComplete="tel"
|
||||
dirty={isDirty}
|
||||
error={!isNil(fieldError)}
|
||||
id="phone-input"
|
||||
mark={true}
|
||||
placeholder={locale['form.input.phone.placeholder']}
|
||||
type="tel"
|
||||
onFocus={formatPhoneNumber}
|
||||
onInput={formatPhoneNumber}
|
||||
/>
|
||||
);
|
||||
@ -1,56 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
import { styled, css } from 'styled-components';
|
||||
|
||||
import { Marks } from './Marks';
|
||||
|
||||
const StyledSelect = styled.select<{ $isError: boolean }>`
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
border: 1px solid ${({ theme }) => theme.input.border};
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0;
|
||||
transition: border-color 0.3s;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 0 15px;
|
||||
${({ $isError }) => {
|
||||
if ($isError) {
|
||||
return css`
|
||||
border-color: ${({ theme }) => theme.input.error};
|
||||
box-shadow: 0 0 0 1px ${({ theme }) => theme.input.error};
|
||||
`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
|
||||
const SelectWrapper = styled.div`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export type SelectProps = {
|
||||
children: React.ReactNode;
|
||||
error: boolean;
|
||||
dirty: boolean;
|
||||
onChange?: React.FormEventHandler;
|
||||
};
|
||||
|
||||
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
({ children, error, dirty, onChange, ...props }, ref) => (
|
||||
<SelectWrapper onChange={onChange}>
|
||||
<StyledSelect $isError={error} {...props} ref={ref}>
|
||||
{children}
|
||||
</StyledSelect>
|
||||
{!error && dirty && <Marks />}
|
||||
</SelectWrapper>
|
||||
),
|
||||
);
|
||||
|
||||
Select.displayName = 'Select';
|
||||
@ -1,11 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Title = styled.div`
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: ${({ theme }) => theme.font.primaryColor};
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
`;
|
||||
@ -1,18 +0,0 @@
|
||||
<svg width="17" height="15" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon" transform="translate(-1 -2)" fill="none" fill-rule="evenodd">
|
||||
<path d="M.5 0h18v18H.5z" />
|
||||
<g fill="#000" fill-rule="nonzero">
|
||||
<path
|
||||
d="M16.27 5.67V3.98C16.27 2.9 15.34 2 14.2 2H3.54C2.24 2 1.2 3 1.2 4.26v9.97c0 1.28 1.1 2.33 2.42 2.33h11.77a2.37 2.37 0 0 0 2.42-2.33V7.85a2.32 2.32 0 0 0-1.54-2.18zM3.54 3h10.65c.58 0 1.04.46 1.04.98v1.54H3.54c-.73 0-1.3-.58-1.3-1.26 0-.7.57-1.26 1.3-1.26zm11.88 12.56H3.62c-.76 0-1.38-.6-1.38-1.33V6.14c.36.25.83.38 1.3.38H15.42c.75 0 1.37.6 1.37 1.33v1.56h-2.15c-1.1 0-2 .85-2 1.88 0 1.03.9 1.88 2 1.88h2.15v1.06c0 .73-.62 1.33-1.37 1.33z"
|
||||
/>
|
||||
<path d="M3.21 3.93h10.55v1H3.21z" />
|
||||
</g>
|
||||
<path
|
||||
d="M15.42 15.56H3.62c-.76 0-1.38-.6-1.38-1.33V6.14c.36.25.83.38 1.3.38H15.42c.75 0 1.37.6 1.37 1.33v1.56h-2.15c-1.1 0-2 .85-2 1.88 0 1.03.9 1.88 2 1.88h2.15v1.06c0 .73-.62 1.33-1.37 1.33z"
|
||||
stroke="#000"
|
||||
stroke-width="1.6"
|
||||
/>
|
||||
<path d="M16.5 10v2.54h-2.42c-.58 0-1.08-.58-1.08-1.27 0-.69.5-1.27 1.08-1.27h2.42z" fill="#FFF" />
|
||||
<circle fill="#000" fill-rule="nonzero" cx="14.94" cy="11.29" r=".7" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,8 +0,0 @@
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20.6935 0.209937C20.2736 -0.069979 19.7266 -0.069979 19.3067 0.209937L0.556722 12.7099C0.0984004 13.0155 -0.105891 13.585 0.0537321 14.1122C0.213355 14.6394 0.699263 15 1.2501 15H5.9376V32.5H3.7501C3.05974 32.5 2.5001 33.0596 2.5001 33.75C2.5001 34.4404 3.05974 35 3.7501 35H36.2501C36.9405 35 37.5001 34.4404 37.5001 33.75C37.5001 33.0596 36.9405 32.5 36.2501 32.5H34.0626V15H38.7501C39.3009 15 39.7868 14.6394 39.9465 14.1122C40.1061 13.585 39.9018 13.0155 39.4435 12.7099L20.6935 0.209937ZM30.9376 15V32.5H27.8126V15H30.9376ZM24.6876 15V32.5H21.5626V15H24.6876ZM18.4376 15V32.5H15.3126V15H18.4376ZM12.1876 15V32.5H9.0626V15H12.1876ZM20 10C18.6193 10 17.5 8.88071 17.5 7.5C17.5 6.11929 18.6193 5 20 5C21.3807 5 22.5 6.11929 22.5 7.5C22.5 8.88071 21.3807 10 20 10Z"
|
||||
/>
|
||||
<path
|
||||
d="M1.2501 37.5C0.559741 37.5 9.71877e-05 38.0596 9.71877e-05 38.75C9.71877e-05 39.4404 0.559741 40 1.2501 40H38.7501C39.4405 40 40.0001 39.4404 40.0001 38.75C40.0001 38.0596 39.4405 37.5 38.7501 37.5H1.2501Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,12 +0,0 @@
|
||||
<svg width="19" height="18" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon" fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M.5 0h18v18H.5z" />
|
||||
<path d="M3 8.5h13" stroke="#181818" />
|
||||
<path
|
||||
d="M5 5h9a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2z"
|
||||
stroke="#181818"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path d="M5.5 2v3M13.5 5V2" stroke="#181818" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 452 B |
@ -1,7 +0,0 @@
|
||||
<svg width="19" height="18" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon" fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M.5 0h18v18H.5z" />
|
||||
<rect stroke="#181818" stroke-width="2" x="2" y="4" width="15" height="10" rx="2" />
|
||||
<path fill="#181818" d="M1 7h16v1H1zM5 10h4v1H5z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 333 B |
@ -1,6 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 471">
|
||||
<path
|
||||
fill="#2557D6"
|
||||
d="M554.594 130.608l-14.521 35.039h29.121l-14.6-35.039zM387.03 152.321c2.738-1.422 4.349-4.515 4.349-8.356 0-3.764-1.693-6.49-4.431-7.771-2.492-1.42-6.328-1.584-10.006-1.584h-25.978v19.523h25.63c4.106.001 7.537-.059 10.436-1.812zM54.142 130.608l-14.357 35.039h28.8l-14.443-35.039zM722.565 355.08h-40.742v-18.852h40.578c4.023 0 6.84-.525 8.537-2.177a7.706 7.706 0 0 0 2.494-5.733c0-2.562-1.023-4.596-2.578-5.813-1.529-1.342-3.76-1.953-7.434-1.953-19.81-.67-44.523.609-44.523-27.211 0-12.75 8.131-26.172 30.27-26.172h42.025v-17.492h-39.045c-11.783 0-20.344 2.81-26.406 7.181v-7.181h-57.752c-9.233 0-20.074 2.279-25.201 7.181v-7.181H499.655v7.181c-8.207-5.898-22.057-7.181-28.447-7.181H403.18v7.181c-6.492-6.262-20.935-7.181-29.734-7.181h-76.134l-17.42 18.775-16.318-18.775H149.847v122.675h111.586l17.95-19.076 16.91 19.076 68.78.059v-28.859h6.764c9.125.145 19.889-.223 29.387-4.311v33.107h56.731v-31.976h2.736c3.492 0 3.838.146 3.838 3.621v28.348h172.344c10.941 0 22.38-2.786 28.712-7.853v7.853h54.668c11.375 0 22.485-1.588 30.938-5.653v-22.853c-5.122 7.462-15.112 11.245-28.626 11.245zm-349.831-28.967h-26.325v29.488h-41.006L279.425 326.5l-26.997 29.102h-83.569v-87.914h84.855l25.955 28.818 26.835-28.818h67.414c16.743 0 35.555 4.617 35.555 28.963 0 24.421-18.297 29.462-36.739 29.462zm126.589-3.986c2.98 4.291 3.41 8.297 3.496 16.047v17.428h-21.182v-10.998c0-5.289.512-13.121-3.41-17.209-3.08-3.149-7.781-3.901-15.48-3.901h-22.545v32.108h-21.198v-87.914h48.706c10.685 0 18.462.472 25.386 4.148 6.658 4.006 10.848 9.494 10.848 19.523-.002 14.031-9.399 21.19-14.953 23.389 4.693 1.725 8.531 4.818 10.332 7.379zm87.15-36.258h-49.404v15.982h48.197v17.938h-48.197v17.492l49.404.078v18.242h-70.414v-87.914h70.414v18.182zm54.213 69.731h-41.09v-18.852h40.926c4.002 0 6.84-.527 8.619-2.178 1.449-1.359 2.492-3.336 2.492-5.73 0-2.564-1.129-4.598-2.574-5.818-1.615-1.34-3.842-1.948-7.514-1.948-19.73-.673-44.439.606-44.439-27.212 0-12.752 8.047-26.174 30.164-26.174h42.297v18.709h-38.703c-3.836 0-6.33.146-8.451 1.592-2.313 1.423-3.17 3.535-3.17 6.322 0 3.316 1.963 5.574 4.615 6.549 2.228.771 4.617.996 8.211.996l11.359.308c11.449.274 19.313 2.25 24.092 7.069 4.105 4.232 6.311 9.578 6.311 18.625-.002 18.913-11.868 27.742-33.145 27.742zm110.506-11.762zm-274.131-56.551c-2.549-1.508-6.311-1.588-10.066-1.588h-25.979v19.744h25.631c4.104 0 7.594-.144 10.414-1.812 2.734-1.646 4.371-4.678 4.371-8.438 0-3.759-1.637-6.482-4.371-7.906zm235.723-1.59c-3.838 0-6.389.145-8.537 1.588-2.227 1.426-3.081 3.537-3.081 6.326 0 3.315 1.879 5.572 4.612 6.549 2.228.771 4.615.996 8.129.996l11.437.303c11.537.285 19.242 2.262 23.938 7.08.855.668 1.369 1.42 1.957 2.174v-25.014h-38.453l-.002-.002zm-339.314 0h-27.509v22.391h27.265c8.105 0 13.146-4.006 13.149-11.611-.003-7.688-5.289-10.78-12.905-10.78zm-183.598 0v15.984h46.315v17.938h-46.315v17.49h51.87l24.1-25.791-23.076-25.621h-52.894zm135.449 61.479v-70.482l-32.391 34.673 32.391 35.809zM191.649 206.025v15.148h176.263l-.082-32.046h3.411c2.39.083 3.084.302 3.084 4.229v27.818h91.164v-7.461c7.353 3.924 18.789 7.461 33.838 7.461h38.353l8.209-19.522h18.197l8.026 19.522h73.906V202.63l11.189 18.543h59.227V98.59h-58.611v14.477l-8.207-14.477h-60.143v14.477l-7.537-14.477h-81.24c-13.6 0-25.551 1.89-35.207 7.158V98.59h-56.063v7.158c-6.146-5.43-14.519-7.158-23.826-7.158H180.784l-13.742 31.662-14.114-31.662H88.417v14.477L81.329 98.59H26.312L.763 156.874v46.621l37.779-87.894h31.346l35.88 83.217v-83.217h34.435l27.61 59.625 25.365-59.625h35.126v87.894h-21.625l-.079-68.837-30.593 68.837h-18.524l-30.671-68.898v68.898H83.899l-8.106-19.605H31.865l-8.19 19.605H.762v17.682h36.049l8.128-19.523h18.198l8.106 19.523h70.925V206.25l6.33 14.989h36.819l6.332-15.214zm277.752-80.176c6.818-7.015 17.5-10.25 32.039-10.25h20.424v18.833h-19.996c-7.696 0-12.047 1.14-16.233 5.208-3.599 3.7-6.066 10.696-6.066 19.908 0 9.417 1.881 16.206 5.801 20.641 3.248 3.478 9.152 4.533 14.705 4.533h9.478l29.733-69.12h31.611l35.719 83.134v-83.133h32.123l37.086 61.213v-61.213h21.611v87.891h-29.898l-39.989-65.968v65.968h-42.968l-8.209-19.605h-43.827l-7.966 19.605h-24.688c-10.254 0-23.238-2.258-30.59-9.722-7.416-7.462-11.271-17.571-11.271-33.553-.004-13.037 2.299-24.953 11.371-34.37zM426.006 115.6h21.526v87.894h-21.526V115.6zm-97.055 0h48.525c10.779 0 18.727.285 25.547 4.21 6.674 3.926 10.676 9.658 10.676 19.46 0 14.015-9.393 21.254-14.864 23.429 4.614 1.75 8.559 4.841 10.438 7.401 2.979 4.372 3.492 8.277 3.492 16.126v17.267h-21.279l-.08-11.084c0-5.29.508-12.896-3.33-17.122-3.082-3.09-7.782-3.763-15.379-3.763H350.05v31.97h-21.098l-.001-87.894zm-85.049 0h70.479v18.303h-49.379v15.843h48.193v18.017h-48.193v17.553h49.379v18.177h-70.479V115.6z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.6 KiB |
@ -1,14 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 471">
|
||||
<path
|
||||
fill="#0079BE"
|
||||
d="M584.934 236.947c0-99.416-82.98-168.133-173.896-168.1h-78.241c-92.003-.033-167.73 68.705-167.73 168.1 0 90.931 75.729 165.641 167.73 165.203h78.241c90.913.437 173.896-74.293 173.896-165.203z"
|
||||
/>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M333.281 82.932c-84.069.026-152.193 68.308-152.215 152.58.021 84.258 68.145 152.532 152.215 152.559 84.088-.026 152.229-68.301 152.239-152.559-.012-84.274-68.151-152.554-152.239-152.58z"
|
||||
/>
|
||||
<path
|
||||
fill="#0079BE"
|
||||
d="M237.066 235.098c.08-41.18 25.747-76.296 61.94-90.25v180.479c-36.193-13.946-61.861-49.044-61.94-90.229zm131 90.275V144.848c36.208 13.921 61.915 49.057 61.981 90.256-.066 41.212-25.773 76.322-61.981 90.269z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 806 B |
@ -1,9 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 501">
|
||||
<path
|
||||
fill="#F47216"
|
||||
d="M409.412 197.758c30.938 0 56.02 23.58 56.02 52.709v.033c0 29.129-25.082 52.742-56.02 52.742-30.941 0-56.022-23.613-56.022-52.742v-.033c0-29.129 25.081-52.709 56.022-52.709z"
|
||||
/>
|
||||
<path
|
||||
d="M321.433 198.438c8.836 0 16.247 1.785 25.269 6.09v22.752c-8.544-7.863-15.955-11.154-25.757-11.154-19.265 0-34.413 15.015-34.413 34.051 0 20.074 14.681 34.195 35.368 34.195 9.313 0 16.586-3.12 24.802-10.856v22.764c-9.343 4.141-16.912 5.775-25.757 5.775-31.277 0-55.581-22.597-55.581-51.737-.001-28.828 24.95-51.88 56.069-51.88zM224.32 199.064c11.546 0 22.109 3.721 30.942 10.994l-10.748 13.248c-5.351-5.646-10.411-8.027-16.563-8.027-8.854 0-15.301 4.745-15.301 10.988 0 5.354 3.618 8.188 15.944 12.482 23.364 8.043 30.289 15.176 30.289 30.926 0 19.193-14.976 32.554-36.319 32.554-15.631 0-26.993-5.795-36.457-18.871l13.268-12.031c4.73 8.609 12.622 13.223 22.42 13.223 9.163 0 15.947-5.951 15.947-13.984 0-4.164-2.056-7.733-6.158-10.258-2.066-1.195-6.158-2.977-14.199-5.646-19.292-6.538-25.91-13.527-25.91-27.186-.001-16.226 14.213-28.412 32.845-28.412zM459.043 200.793h22.436l28.084 66.592 28.447-66.592h22.266l-45.493 101.686h-11.054zM157.83 200.945h20.541v99.143H157.83zM569.563 200.945h58.252v16.799H590.09v22.006h36.336v16.791H590.09v26.762h37.725v16.785h-58.252zM685.156 258.322c15.471-2.965 23.984-12.926 23.984-28.105 0-18.562-13.576-29.271-37.266-29.271H641.42v99.143h20.516V260.26h2.68l28.43 39.828h25.26l-33.15-41.766zm-17.218-11.736h-6.002v-30.025h6.326c12.791 0 19.744 5.049 19.744 14.697.002 9.966-6.951 15.328-20.068 15.328zM91.845 200.945H61.696v99.143h29.992c15.946 0 27.465-3.543 37.573-11.445 12.014-9.36 19.117-23.467 19.117-38.057.001-29.259-23.221-49.641-56.533-49.641zm23.997 74.479c-6.454 5.484-14.837 7.879-28.108 7.879H82.22v-65.559h5.513c13.271 0 21.323 2.238 28.108 8.018 7.104 5.956 11.377 15.183 11.377 24.682.001 9.513-4.273 19.024-11.376 24.98z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
@ -1,17 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 638 234">
|
||||
<path
|
||||
d="M95.7 51.6c6.8-2.3 14.1-3.5 21.7-3.5 33.2 0 60.9 23.6 67.2 54.9l47-9.6C220.8 40.2 173.8.1 117.4.1c-12.9 0-25.3 2.1-36.9 6l15.2 45.5z"
|
||||
fill="#FFF100"
|
||||
/>
|
||||
<path
|
||||
d="M40.2 204L72 168c-14.2-12.6-23.1-30.9-23.1-51.4 0-20.4 8.9-38.8 23.1-51.3L40.2 29.4C16.1 50.8.9 81.9.9 116.7c0 34.7 15.2 65.9 39.3 87.3z"
|
||||
fill="#00A3DF"
|
||||
/>
|
||||
<path
|
||||
d="M184.6 130.4c-6.4 31.3-34 54.8-67.2 54.8-7.6 0-14.9-1.2-21.8-3.5l-15.2 45.5c11.6 3.9 24.1 6 37 6 56.4 0 103.4-40 114.2-93.2l-47-9.6z"
|
||||
fill="#EE4023"
|
||||
/>
|
||||
<path
|
||||
d="M388.2 162.6c-7.8 7.6-18.3 12.2-29.9 12-8-.1-15.4-2.5-21.6-6.5l-15.6 24.8c10.7 6.7 23.2 10.7 36.8 10.9 19.7.3 37.7-7.5 50.8-20.2l-20.5-21zM360 61.5c-39.2-.6-71.6 30.8-72.2 70-.2 14.7 4 28.5 11.5 39.9l128.8-55.1c-7.2-30.9-34.8-54.2-68.1-54.8zm-42.7 75.6c-.2-1.6-.3-3.3-.3-5 .4-23.1 19.4-41.6 42.5-41.2 12.6.2 23.8 5.9 31.3 14.9l-73.5 31.3zM468.6 29.5v137.3l23.8 9.9-11.3 27.1-23.6-9.8c-5.3-2.3-8.9-5.8-11.6-9.8-2.6-4-4.6-9.6-4.6-17V29.5h27.3zM554.5 93c4.2-1.4 8.6-2.1 13.3-2.1 20.3 0 37.1 14.4 41 33.5l28.7-5.9c-6.6-32.5-35.3-56.9-69.7-56.9-7.9 0-15.5 1.3-22.5 3.6l9.2 27.8zm-33.9 92.9L540 164c-8.7-7.7-14.1-18.9-14.1-31.4s5.5-23.7 14.1-31.3l-19.4-21.9c-14.7 13-24 32.1-24 53.3 0 21.2 9.3 40.2 24 53.2zm88.2-44.8c-3.9 19.1-20.8 33.5-41 33.5-4.6 0-9.1-.8-13.3-2.2l-9.3 27.8c7.1 2.4 14.7 3.7 22.6 3.7 34.4 0 63.1-24.4 69.7-56.9l-28.7-5.9z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB |
@ -1,54 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 471">
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M617.242 346.766c0 41.615-33.729 75.36-75.357 75.36H132.759V124.245c0-41.626 33.73-75.371 75.364-75.371h409.12v297.892h-.001z"
|
||||
/>
|
||||
<linearGradient
|
||||
id="a"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="824.742"
|
||||
y1="333.781"
|
||||
x2="825.742"
|
||||
y2="333.781"
|
||||
gradientTransform="matrix(132.8743 0 0 -323.0226 -109129.531 108054.602)"
|
||||
>
|
||||
<stop offset="0" stop-color="#007b40" />
|
||||
<stop offset="1" stop-color="#55b330" />
|
||||
</linearGradient>
|
||||
<path
|
||||
fill="url(#a)"
|
||||
d="M483.86 242.045c11.686.254 23.439-.516 35.078.4 11.787 2.199 14.627 20.043 4.156 25.887-7.145 3.85-15.633 1.434-23.379 2.113H483.86v-28.4zm41.834-32.145c2.596 9.164-6.238 17.392-15.064 16.13h-26.77c.188-8.642-.367-18.022.273-26.209 10.723.302 21.547-.616 32.209.48 4.58 1.151 8.414 4.917 9.352 9.599zm64.425-135.903c.498 17.501.072 35.927.215 53.783-.033 72.596.07 145.195-.057 217.789-.469 27.207-24.582 50.847-51.6 51.39-27.045.11-54.094.017-81.143.047v-109.75c29.471-.153 58.957.308 88.416-.231 13.666-.858 28.635-9.875 29.271-24.914 1.609-15.103-12.631-25.551-26.152-27.201-5.197-.135-5.045-1.515 0-2.117 12.895-2.787 23.021-16.133 19.227-29.499-3.234-14.058-18.771-19.499-31.695-19.472-26.352-.179-52.709-.025-79.063-.077.17-20.489-.355-41 .283-61.474 2.088-26.716 26.807-48.748 53.447-48.27 26.287-.003 52.57-.003 78.851-.004z"
|
||||
/>
|
||||
<linearGradient
|
||||
id="b"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="824.755"
|
||||
y1="333.782"
|
||||
x2="825.748"
|
||||
y2="333.782"
|
||||
gradientTransform="matrix(133.4307 0 0 -323.0203 -109887.688 108053.82)"
|
||||
>
|
||||
<stop offset="0" stop-color="#1d2970" />
|
||||
<stop offset="1" stop-color="#006dba" />
|
||||
</linearGradient>
|
||||
<path
|
||||
fill="url(#b)"
|
||||
d="M159.742 125.041c.673-27.164 24.888-50.611 51.872-51.008 26.945-.083 53.894-.012 80.839-.036-.074 90.885.146 181.776-.111 272.657-1.038 26.834-24.989 49.834-51.679 50.309-26.996.098-53.995.014-80.992.041V283.551c26.223 6.195 53.722 8.832 80.474 4.723 15.991-2.574 33.487-10.426 38.901-27.016 3.984-14.191 1.741-29.126 2.334-43.691v-33.825h-46.297c-.208 22.371.426 44.781-.335 67.125-1.248 13.734-14.849 22.46-27.802 21.994-16.064.17-47.897-11.641-47.897-11.641-.08-41.915.466-94.406.693-136.179z"
|
||||
/>
|
||||
<linearGradient
|
||||
id="c"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="824.742"
|
||||
y1="333.781"
|
||||
x2="825.741"
|
||||
y2="333.781"
|
||||
gradientTransform="matrix(132.9583 0 0 -323.0276 -109347.922 108056.266)"
|
||||
>
|
||||
<stop offset="0" stop-color="#6e2b2f" />
|
||||
<stop offset="1" stop-color="#e30138" />
|
||||
</linearGradient>
|
||||
<path
|
||||
fill="url(#c)"
|
||||
d="M309.721 197.39c-2.437.517-.491-8.301-1.114-11.646.166-21.15-.346-42.323.284-63.458 2.082-26.829 26.991-48.916 53.738-48.288h78.767c-.074 90.885.145 181.775-.111 272.657-1.039 26.834-24.992 49.833-51.682 50.309-26.998.101-53.998.015-80.997.042V272.707c18.44 15.129 43.5 17.484 66.472 17.525 17.318-.006 34.535-2.676 51.353-6.67V260.79c-18.953 9.446-41.234 15.446-62.244 10.019-14.656-3.649-25.294-17.813-25.057-32.937-1.698-15.729 7.522-32.335 22.979-37.011 19.192-6.008 40.108-1.413 58.096 6.398 3.855 2.018 7.766 4.521 6.225-1.921v-17.899c-30.086-7.158-62.104-9.792-92.33-2.005-8.748 2.468-17.272 6.211-24.379 11.956z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
@ -1,12 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 310">
|
||||
<path fill="#7673c0" d="M176.05 31.89h130.5V266.4h-130.5z" />
|
||||
<path
|
||||
data-name="<Path>"
|
||||
d="M184.34 149.14a148.88 148.88 0 0 1 57-117.26 149.14 149.14 0 1 0 0 234.51 148.88 148.88 0 0 1-57-117.25z"
|
||||
fill="#eb001b"
|
||||
/>
|
||||
<path
|
||||
d="M482.6 149.14A149.14 149.14 0 0 1 241.3 266.4a149.16 149.16 0 0 0 0-234.51 149.14 149.14 0 0 1 241.3 117.25z"
|
||||
fill="#00a1df"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 487 B |
@ -1,11 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 310">
|
||||
<path fill="#ff5f00" d="M169.81 31.89h143.72v234.42H169.81z" />
|
||||
<path
|
||||
d="M184.31 149.1a149.5 149.5 0 0 1 56.74-117.21 149.1 149.1 0 1 0 0 234.42 149.5 149.5 0 0 1-56.74-117.21z"
|
||||
fill="#eb001b"
|
||||
/>
|
||||
<path
|
||||
d="M482.52 149.1a148.95 148.95 0 0 1-241 117.21 149.43 149.43 0 0 0 0-234.42 148.95 148.95 0 0 1 241 117.21z"
|
||||
fill="#f79e1b"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 452 B |
@ -1,20 +0,0 @@
|
||||
<svg width="31" height="19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2.867 5.002c.277-.002 1.1-.081 1.448 1.171.235.844.61 2.226 1.123 4.146h.209c.55-2.025.928-3.406 1.134-4.146.353-1.265 1.233-1.171 1.585-1.171h2.718V14h-2.77V8.697h-.186L6.584 14H4.5L2.956 8.693H2.77V14H0V5.002h2.867zm12.195 0v5.306h.221l1.879-4.363c.364-.869 1.141-.943 1.141-.943h2.681V14h-2.828V8.693h-.221l-1.841 4.364c-.365.864-1.18.943-1.18.943h-2.68V5.002h2.828zM30.76 9.278c-.395 1.19-1.634 2.041-3.005 2.041h-2.966V14H22.1V9.278h8.66z"
|
||||
fill="#0F754E"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M27.884 5.003h-5.926c.141 2.004 1.762 3.719 3.44 3.719h5.548c.32-1.665-.782-3.719-3.062-3.719z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="31" y1="7.342" x2="21.958" y2="7.342" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1F5CD7" />
|
||||
<stop offset="1" stop-color="#02AEFF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,37 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 471">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect width="750" height="471" rx="40" />
|
||||
<path
|
||||
fill="#D10429"
|
||||
d="M201.81 55h142.393c19.87 0 32.287 16.406 27.63 36.47L305.5 378.948c-4.656 20.064-24.629 36.47-44.498 36.47H118.61c-19.87 0-32.287-16.406-27.63-36.47L157.311 91.47C161.968 71.302 181.837 55 201.706 55h.104z"
|
||||
/>
|
||||
<path
|
||||
fill="#022E64"
|
||||
d="M331.75 55h163.815c19.869 0 10.866 16.406 6.209 36.47L435.44 378.948c-4.657 20.064-3.208 36.47-23.077 36.47H248.549c-19.972 0-32.287-16.406-27.527-36.47L287.356 91.47C292.012 71.302 311.88 55 331.854 55h-.104z"
|
||||
/>
|
||||
<path
|
||||
fill="#076F74"
|
||||
d="M489.815 55h142.394c19.869 0 32.287 16.406 27.63 36.47l-66.333 287.478c-4.657 20.064-24.63 36.47-44.498 36.47H406.614c-19.972 0-32.287-16.406-27.63-36.47L445.317 91.47C449.974 71.302 469.843 55 489.711 55h.104z"
|
||||
/>
|
||||
<path
|
||||
fill="#FEFEFE"
|
||||
d="M465.905 326.015h13.453l3.829-13.063h-13.35l-3.932 13.063zm10.762-35.948l-4.657 15.466s5.071-2.613 7.865-3.449c2.794-.627 6.933-1.15 6.933-1.15l3.208-10.763h-13.452l.103-.104zm6.727-22.154l-4.45 14.839s4.967-2.3 7.761-3.03c2.794-.732 6.933-.941 6.933-.941l3.208-10.764h-13.349l-.103-.104zm29.7 0l-17.386 57.997h4.657l-3.622 12.017h-4.657l-1.138 3.658H474.39l1.139-3.658H442l3.311-11.076h3.415l17.593-58.938L469.837 256h16.868l-1.76 5.956s4.45-3.239 8.797-4.389c4.243-1.149 28.665-1.567 28.665-1.567l-3.622 11.808h-5.795l.103.105z"
|
||||
/>
|
||||
<path
|
||||
fill="#FEFEFE"
|
||||
d="M520 256h18.006l.207 6.792c-.103 1.15.828 1.672 3.001 1.672h3.622l-3.311 11.182h-9.728c-8.382.627-11.59-3.03-11.383-7.106l-.31-12.436L520 256zm2.216 53.2h-17.178l2.897-9.927h19.662l2.794-9.092H511.04L514.351 279h53.812l-3.311 11.181h-18.11l-2.794 9.092h18.11l-3.002 9.927h-19.558l-3.518 4.18h7.968l1.966 12.54c.207 1.254.207 2.09.62 2.613.415.418 2.795.627 4.14.627h2.38l-3.725 12.226h-6.106c-.93 0-2.38-.104-4.346-.104-1.863-.21-3.104-1.254-4.346-1.881-1.139-.523-2.794-1.881-3.208-4.285l-1.863-12.54-8.9 12.331c-2.794 3.867-6.622 6.897-13.142 6.897H495l3.311-10.868h4.76c1.346 0 2.588-.522 3.52-1.045.93-.418 1.758-.836 2.586-2.194l13.04-18.497zM334.314 282h45.429l-3.312 10.972h-18.11l-2.793 9.3h18.627l-3.415 11.287h-18.524l-4.553 15.152c-.517 1.672 4.45 1.881 6.209 1.881l9.314-1.254-3.726 12.54h-20.904c-1.655 0-2.897-.209-4.76-.627-1.76-.418-2.587-1.254-3.311-2.403-.725-1.254-1.967-2.195-1.139-4.912l6.002-20.064H325l3.415-11.495h10.348l2.794-9.3H331.21l3.312-10.973-.207-.104zm31.387-19.835h18.627l-3.415 11.39h-25.457l-2.794 2.404c-1.242 1.15-1.552.732-3.105 1.568-1.448.731-4.45 2.194-8.382 2.194H333l3.311-10.972h2.484c2.07 0 3.519-.21 4.243-.627.828-.523 1.76-1.672 2.69-3.553l4.657-8.569h18.524l-3.208 6.27v-.105zm35.108 18.81s5.07-4.702 13.763-6.165c1.966-.418 14.384-.21 14.384-.21l1.863-6.27h-26.181l-3.83 12.75v-.105zm24.629 4.807h-25.975l-1.552 5.33h22.56c2.69-.314 3.208.104 3.415-.105l1.655-5.225h-.103zm-33.736-29.678h15.833l-2.276 8.047s4.967-4.076 8.485-5.539c3.519-1.254 11.383-2.508 11.383-2.508l25.664-.104-8.796 29.469c-1.449 5.016-3.208 8.255-4.243 9.823-.93 1.463-2.07 2.821-4.346 4.075-2.173 1.15-4.14 1.881-6.002 1.986-1.656.104-4.346.209-7.865.209h-24.732l-6.934 23.303c-.62 2.299-.931 3.448-.517 4.075.31.523 1.242 1.15 2.38 1.15l10.866-1.045-3.726 12.749h-12.21c-3.933 0-6.727-.105-8.693-.21-1.863-.208-3.83 0-5.175-1.044-1.138-1.045-2.897-2.404-2.794-3.762.104-1.254.621-3.344 1.45-6.27l22.248-74.404z"
|
||||
/>
|
||||
<path
|
||||
fill="#FEFEFE"
|
||||
d="M437.84 303l-1.449 7.106c-.62 2.194-1.138 3.866-2.794 5.33-1.759 1.462-3.725 3.03-8.485 3.03l-8.796.418-.104 7.942c-.103 2.194.518 1.985.828 2.403.414.418.724.523 1.138.732l2.794-.21 8.383-.417-3.519 11.704h-9.624c-6.726 0-11.797-.21-13.35-1.463-1.655-1.045-1.862-2.3-1.862-4.598l.62-31.141h15.42l-.207 6.374h3.725c1.242 0 2.174-.104 2.691-.418.517-.313.828-.836 1.035-1.567l1.552-5.016h12.108l-.104-.209zM218.47 147c-.517 2.508-10.451 48.592-10.451 48.592-2.174 9.3-3.726 15.989-8.9 20.273-3.001 2.508-6.52 3.657-10.555 3.657-6.52 0-10.245-3.239-10.866-9.404l-.104-2.09s1.966-12.436 1.966-12.54c0 0 10.349-42.009 12.212-47.548.103-.313.103-.522.103-.627-20.18.21-23.801 0-24.008-.313-.104.418-.621 3.03-.621 3.03L156.69 197.37l-.932 3.97L154 214.508c0 3.866.724 7.105 2.277 9.718 4.863 8.569 18.627 9.823 26.388 9.823 10.038 0 19.455-2.195 25.767-6.061 11.073-6.584 13.97-16.929 16.454-26.02l1.242-4.703s10.659-43.576 12.522-49.219c.103-.314.103-.523.207-.627-14.695.104-18.938 0-20.387-.314V147zm59.03 86.623c-7.141-.105-9.728-.105-18.11.313l-.311-.627c.724-3.24 1.552-6.374 2.173-9.614l1.035-4.389c1.552-6.792 3.001-14.839 3.208-17.242.207-1.463.62-5.12-3.519-5.12-1.759 0-3.518.835-5.38 1.671-1.036 3.658-3.002 13.899-4.037 18.497-2.07 9.823-2.173 10.972-3.104 15.78l-.621.626c-7.347-.104-9.934-.104-18.42.314L230 233.1c1.449-5.852 2.794-11.704 4.14-17.556 3.518-15.78 4.45-21.84 5.38-29.887l.725-.418c8.279-1.149 10.245-1.463 19.248-3.239l.724.836-1.345 5.016c1.552-.94 3.001-1.881 4.553-2.613 4.243-2.09 8.9-2.717 11.487-2.717 3.932 0 8.279 1.15 10.038 5.748 1.656 4.075.62 9.091-1.656 19.019l-1.138 5.016c-2.277 11.077-2.69 13.062-3.933 20.586l-.827.627.103.105zm29.058.027c-4.346 0-7.14-.104-9.83 0-2.691 0-5.278.21-9.314.314l-.207-.314-.207-.418c1.138-4.18 1.656-5.643 2.277-7.106.517-1.463 1.034-2.926 2.07-7.21 1.241-5.539 2.069-9.405 2.586-12.854.621-3.24.932-6.06 1.346-9.3l.31-.209.31-.314c4.347-.627 7.038-1.045 9.832-1.463 2.794-.418 5.691-.94 10.141-1.776l.207.418.103.418-2.483 10.345c-.828 3.449-1.656 6.897-2.38 10.346-1.553 7.315-2.277 10.032-2.587 12.017-.414 1.881-.518 2.822-1.139 6.584l-.414.313-.414.314-.207-.105zm45.941-25.675c-.31 1.881-1.966 8.883-4.139 11.809-1.552 2.194-3.312 3.553-5.381 3.553-.621 0-4.14 0-4.243-5.33 0-2.612.517-5.33 1.138-8.255 1.863-8.465 4.14-15.466 9.831-15.466 4.45 0 4.76 5.225 2.794 13.69zm18.73.836c2.484-11.077.518-16.302-1.862-19.437-3.725-4.807-10.348-6.374-17.178-6.374-4.14 0-13.867.418-21.525 7.524-5.484 5.12-8.071 12.122-9.52 18.81-1.553 6.792-3.312 19.019 7.865 23.617 3.414 1.463 8.382 1.88 11.59 1.88 8.175 0 16.557-2.298 22.87-8.986 4.863-5.434 7.036-13.585 7.864-17.034h-.103zm174.433 26.08c-8.693-.104-11.176-.104-19.145.314l-.517-.627c2.173-8.256 4.346-16.616 6.313-24.976 2.483-10.868 3.104-15.466 3.932-21.84l.62-.523c8.59-1.254 10.97-1.567 19.973-3.239l.207.731c-1.656 6.897-3.208 13.69-4.864 20.482-3.311 14.317-4.45 21.632-5.691 29.156l-.828.627v-.105z"
|
||||
/>
|
||||
<path
|
||||
fill="#FEFEFE"
|
||||
d="M533.16 209.374c-.414 1.776-2.07 8.882-4.243 11.808-1.449 2.09-4.967 3.449-6.933 3.449-.621 0-4.036 0-4.243-5.225 0-2.613.517-5.33 1.138-8.256 1.863-8.255 4.14-15.257 9.831-15.257 4.45 0 6.416 5.12 4.45 13.585v-.104zm17.075.836c2.483-11.077-7.658-.94-9.21-4.598-2.484-5.748-.932-17.243-10.866-21.109-3.829-1.568-12.832.418-20.49 7.524-5.381 5.016-8.072 12.017-9.52 18.705-1.553 6.688-3.312 19.02 7.76 23.304 3.52 1.567 6.727 1.985 9.935 1.776 11.177-.627 19.662-17.66 25.975-24.348 4.863-5.33 5.691 1.985 6.416-1.254zm-129.943 23.413c-7.14-.105-9.624-.105-18.006.313l-.31-.627c.724-3.24 1.552-6.374 2.276-9.614l.931-4.389c1.553-6.792 3.105-14.839 3.208-17.242.207-1.463.621-5.12-3.415-5.12-1.759 0-3.621.835-5.38 1.671-.932 3.658-3.002 13.899-4.037 18.497-1.966 9.823-2.173 10.972-3.104 15.78l-.621.626c-7.347-.104-9.934-.104-18.42.314L373 233.1c1.449-5.852 2.794-11.704 4.14-17.556 3.518-15.78 4.346-21.84 5.38-29.887l.621-.418c8.28-1.149 10.349-1.463 19.248-3.239l.725.836-1.242 5.016c1.449-.94 3.001-1.881 4.45-2.613 4.243-2.09 8.9-2.717 11.486-2.717 3.933 0 8.176 1.15 10.038 5.748 1.656 4.075.518 9.091-1.759 19.019l-1.138 5.016c-2.38 11.077-2.69 13.062-3.933 20.586l-.827.627.103.105zm62.001-86.519l-6.002.105c-15.523.209-21.732.104-24.215-.209-.207 1.15-.621 3.135-.621 3.135s-5.588 25.916-5.588 26.02c0 0-13.246 55.176-13.867 57.788 13.556-.209 19.041-.209 21.421.105.518-2.613 3.622-17.974 3.726-17.974 0 0 2.69-11.286 2.794-11.704 0 0 .827-1.15 1.655-1.672h1.242c11.694 0 24.836 0 35.185-7.628 7.037-5.225 11.797-13.063 13.97-22.468.517-2.299.931-5.016.931-7.837 0-3.658-.724-7.21-2.794-10.032-5.277-7.42-15.73-7.524-27.837-7.629zm7.761 27.066c-1.241 5.747-4.967 10.659-9.727 12.958-3.932 1.985-8.693 2.194-13.66 2.194h-3.208l.207-1.254s5.899-25.916 5.899-25.811l.207-1.359.103-1.045 2.38.21s12.211 1.044 12.418 1.044c4.76 1.881 6.83 6.688 5.381 13.063zm127.207 8.666l-.724-.836c-8.796 1.776-10.452 2.09-18.524 3.24l-.62.626c0 .105-.104.21-.104.418v-.104c-6.002 14.107-5.899 11.077-10.762 22.154 0-.523 0-.836-.104-1.359l-1.242-24.035-.724-.836c-9.314 1.777-9.52 2.09-18.006 3.24l-.621.627c-.104.313-.104.627-.104.94l.104.105c1.035 5.538.828 4.284 1.863 12.958.517 4.284 1.138 8.569 1.655 12.749.828 7.106 1.346 10.554 2.38 21.318-5.795 9.614-7.14 13.271-12.728 21.735l.31.836c8.383-.313 10.245-.313 16.454-.313l1.346-1.568c4.656-10.136 40.255-71.79 40.255-71.79l-.104-.105zm-302.717 6.922c4.76-3.344 5.38-7.942 1.345-10.345-4.036-2.404-11.176-1.672-15.937 1.672-4.76 3.24-5.277 7.837-1.241 10.345 3.932 2.3 11.072 1.672 15.833-1.672z"
|
||||
/>
|
||||
<path
|
||||
fill="#FEFEFE"
|
||||
d="M575.735 256.104l-6.934 12.018c-2.173 4.075-6.312 7.21-12.728 7.21L545 275.123l3.208-10.868h2.173c1.138 0 1.966-.104 2.587-.418.621-.209.932-.627 1.449-1.254l4.14-6.583h17.281l-.103.104z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 9.3 KiB |
@ -1,10 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="750" height="471" viewBox="0 0 750 471">
|
||||
<path
|
||||
fill="#0E4595"
|
||||
d="M278.198 334.228l33.36-195.763h53.358l-33.384 195.763h-53.334zM524.307 142.687c-10.57-3.966-27.135-8.222-47.822-8.222-52.725 0-89.863 26.551-90.18 64.604-.297 28.129 26.514 43.821 46.754 53.185 20.77 9.597 27.752 15.716 27.652 24.283-.133 13.123-16.586 19.116-31.924 19.116-21.355 0-32.701-2.967-50.225-10.274l-6.877-3.112-7.488 43.823c12.463 5.466 35.508 10.199 59.438 10.445 56.09 0 92.502-26.248 92.916-66.884.199-22.27-14.016-39.216-44.801-53.188-18.65-9.056-30.072-15.099-29.951-24.269 0-8.137 9.668-16.838 30.559-16.838 17.447-.271 30.088 3.534 39.936 7.5l4.781 2.259 7.232-42.428M661.615 138.464h-41.23c-12.773 0-22.332 3.486-27.941 16.234L513.2 334.1h56.031s9.16-24.121 11.232-29.418c6.123 0 60.555.084 68.336.084 1.596 6.854 6.492 29.334 6.492 29.334h49.512l-43.188-195.636zm-65.417 126.408c4.414-11.279 21.26-54.724 21.26-54.724-.314.521 4.381-11.334 7.074-18.684l3.607 16.878s10.217 46.729 12.352 56.527h-44.293v.003z"
|
||||
/>
|
||||
<path
|
||||
d="M45.879 138.465l-.682 4.072c21.093 5.106 39.932 12.496 56.426 21.69l47.346 169.687 56.455-.062 84.004-195.387h-56.526L180.664 271.96l-5.564-27.13a87.94 87.94 0 0 0-.834-2.52l-18.16-87.319c-3.23-12.396-12.597-16.095-24.186-16.527H45.879z"
|
||||
fill="#0e4595"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1,5 +0,0 @@
|
||||
<svg width="13" height="9" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon" stroke-width="2" stroke="#D1658E" fill="none" fill-rule="evenodd">
|
||||
<path d="M11.65 1.35L5.1 7.9M1.46 3.5L6.4 7.77 1.46 3.5z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 232 B |
@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
||||
<path
|
||||
d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 267 B |
@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
||||
<path
|
||||
d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 269 B |
@ -1,12 +0,0 @@
|
||||
<svg width="18" height="19" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon" fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M.5.5h18v18H.5z" />
|
||||
<path d="M6.3 6.5V4.7c0-1.7 1.4-3.2 3.2-3.2 1.8 0 3.2 1.5 3.2 3.2v1.8H6.3z" stroke="#181818" />
|
||||
<path
|
||||
d="M6 7h7a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2z"
|
||||
stroke="#181818"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path fill="#181818" d="M9 10h1v4H9z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 521 B |
@ -1,12 +0,0 @@
|
||||
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon" fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M0 0h18v18H0z" />
|
||||
<path
|
||||
d="M15 12c0-2.2-2.7-4-6-4s-6 1.8-6 4M9 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
|
||||
stroke="#181818"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path d="M3 12v2c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2v-2" stroke="#181818" stroke-width="2" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 474 B |
@ -1,19 +0,0 @@
|
||||
export { PayButton } from './PayButton';
|
||||
export { HeaderWrapper } from './HeaderWrapper';
|
||||
export { Title } from './Title';
|
||||
export { FormGroup } from './FormGroup';
|
||||
export { Input } from './Input';
|
||||
export { CardTypeIcon } from './CardTypeIcon';
|
||||
export { Button } from './Button';
|
||||
export { MetadataField, MetadataLogo, MetadataSelect, MetadataTitle, obscurePassword, sortByIndex } from './metadata';
|
||||
export { Email } from './Email';
|
||||
export { Phone } from './Phone';
|
||||
export { Select } from './Select';
|
||||
export { CopyToClipboardButton } from './CopyToClipboardButton';
|
||||
export { Hr } from './Hr';
|
||||
export { Link } from './Link';
|
||||
export { Method } from './Method';
|
||||
export { PaymentMethodIcon } from './PaymentMethodIcon';
|
||||
export { PaymentMethodTitle } from './PaymentMethodTitle';
|
||||
export { PaymentMethodItemContainer } from './PaymentMethodItemContainer';
|
||||
export { ChevronButton } from './ChevronButton';
|
||||
@ -1,111 +0,0 @@
|
||||
import { useMemo } from 'react';
|
||||
import { FieldError, UseFormRegister } from 'react-hook-form';
|
||||
|
||||
import { getInputTypeFormatter, getMetadataFieldFormatter } from './formatters';
|
||||
import {
|
||||
MetadataFieldFormatter,
|
||||
MetadataTextLocalization,
|
||||
ServiceProviderMetadataField,
|
||||
} from '../../../../common/backend/payments';
|
||||
import {
|
||||
createRegExpForMetaPattern,
|
||||
formatOnFocus,
|
||||
formatPhoneNumber,
|
||||
isNil,
|
||||
partialRight,
|
||||
validateEmail,
|
||||
validatePhone,
|
||||
} from '../../../../common/utils';
|
||||
import { Input } from '../../Input';
|
||||
|
||||
const getAutocomplete = (type: JSX.IntrinsicElements['input']['type']): string | null => {
|
||||
switch (type) {
|
||||
case 'email':
|
||||
return 'email';
|
||||
case 'tel':
|
||||
return 'tel';
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getOnInputHandler = (type: JSX.IntrinsicElements['input']['type'], formatter?: MetadataFieldFormatter) => {
|
||||
if (!isNil(formatter)) {
|
||||
return getMetadataFieldFormatter(formatter);
|
||||
}
|
||||
return getInputTypeFormatter(type);
|
||||
};
|
||||
|
||||
const getOnFocusHandler = (type: JSX.IntrinsicElements['input']['type']) => {
|
||||
switch (type) {
|
||||
case 'tel':
|
||||
return partialRight(formatPhoneNumber, formatOnFocus);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getPlaceholder = (localeCode: string, localization: MetadataTextLocalization) => {
|
||||
if (isNil(localization)) {
|
||||
console.error('Metadata localization is not defined');
|
||||
return '';
|
||||
}
|
||||
return localization[localeCode] || localization['en'];
|
||||
};
|
||||
|
||||
const createValidator =
|
||||
(type: JSX.IntrinsicElements['input']['type'], required: boolean, pattern?: string) => (value) => {
|
||||
if (!required && isNil(value)) {
|
||||
return undefined;
|
||||
}
|
||||
if (type === 'email') {
|
||||
return validateEmail(value);
|
||||
}
|
||||
if (type === 'tel') {
|
||||
return validatePhone(value);
|
||||
}
|
||||
if (pattern) {
|
||||
return !createRegExpForMetaPattern(pattern).test(value);
|
||||
}
|
||||
if (required) {
|
||||
return !value || !value.trim();
|
||||
}
|
||||
};
|
||||
|
||||
export interface MetadataFieldProps {
|
||||
metadata: ServiceProviderMetadataField;
|
||||
localeCode?: string;
|
||||
wrappedName?: string;
|
||||
register: UseFormRegister<any>;
|
||||
fieldError: FieldError;
|
||||
isDirty: boolean;
|
||||
}
|
||||
|
||||
export const MetadataField = ({
|
||||
metadata: { name, type, required, pattern, localization, formatter, inputMode },
|
||||
localeCode,
|
||||
wrappedName,
|
||||
register,
|
||||
fieldError,
|
||||
isDirty,
|
||||
}: MetadataFieldProps) => {
|
||||
const validate = useMemo(() => createValidator(type, required, pattern), [name]);
|
||||
const registerName = wrappedName ? `${wrappedName}.${name}` : name;
|
||||
return (
|
||||
<Input
|
||||
{...register(registerName, {
|
||||
required: true,
|
||||
validate: (value) => !validate(value) || `${name} field is invalid`,
|
||||
})}
|
||||
autoComplete={getAutocomplete(type)}
|
||||
dirty={isDirty}
|
||||
error={!isNil(fieldError)}
|
||||
inputMode={inputMode}
|
||||
mark={true}
|
||||
placeholder={getPlaceholder(localeCode, localization)}
|
||||
type={type}
|
||||
onFocus={getOnFocusHandler(type)}
|
||||
onInput={getOnInputHandler(type, formatter)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
import { FormEvent } from 'react';
|
||||
|
||||
import { MetadataFieldFormatter } from '../../../../../common/backend/payments';
|
||||
import { safeVal, isNil } from '../../../../../common/utils';
|
||||
|
||||
export const formatNumbersOnly =
|
||||
({ maxLength }: MetadataFieldFormatter) =>
|
||||
(e: FormEvent<HTMLInputElement>) => {
|
||||
const target = e.currentTarget;
|
||||
let value = target.value;
|
||||
value = value.replace(/\D/g, '');
|
||||
if (!isNil(maxLength)) {
|
||||
value = value.slice(0, maxLength);
|
||||
}
|
||||
return safeVal(value, target);
|
||||
};
|
||||
@ -1,12 +0,0 @@
|
||||
import { formatEmail, formatPhoneNumber } from '../../../../../common/utils';
|
||||
|
||||
export const getInputTypeFormatter = (type: JSX.IntrinsicElements['input']['type']) => {
|
||||
switch (type) {
|
||||
case 'email':
|
||||
return formatEmail;
|
||||
case 'tel':
|
||||
return formatPhoneNumber;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
import { formatNumbersOnly } from './formatNumbersOnly';
|
||||
import { MetadataFieldFormatter } from '../../../../../common/backend/payments';
|
||||
import { assertUnreachable } from '../../../../../common/utils';
|
||||
|
||||
export const getMetadataFieldFormatter = (formatter: MetadataFieldFormatter) => {
|
||||
switch (formatter.type) {
|
||||
case 'numbersOnly':
|
||||
return formatNumbersOnly(formatter);
|
||||
default:
|
||||
assertUnreachable(formatter.type);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@ -1,2 +0,0 @@
|
||||
export { getInputTypeFormatter } from './getInputTypeFormatter';
|
||||
export { getMetadataFieldFormatter } from './getMetadataFieldFormatter';
|
||||
@ -1 +0,0 @@
|
||||
export * from './MetadataField';
|
||||
@ -1,13 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { ServiceProviderIconMetadata } from '../../../common/backend/payments';
|
||||
|
||||
const MetadataImage = styled.img<{ height: string; width: string }>`
|
||||
height: ${({ height }) => height};
|
||||
width: ${({ width }) => width};
|
||||
`;
|
||||
|
||||
export const MetadataLogo: React.FC<{
|
||||
metadata: ServiceProviderIconMetadata;
|
||||
}> = ({ metadata: { height, width, src } }) => <MetadataImage height={height} src={src} width={width} />;
|
||||
@ -1,65 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { FieldError, UseFormRegister } from 'react-hook-form';
|
||||
|
||||
import { MetadataTextLocalization, ServiceProviderMetadataSelect } from '../../../common/backend/payments';
|
||||
import { isNil, countries, Country, CountrySubdivision } from '../../../common/utils';
|
||||
import { Select } from '../Select';
|
||||
|
||||
export interface MetadataSelectProps {
|
||||
metadata: ServiceProviderMetadataSelect;
|
||||
localeCode: string;
|
||||
wrappedName: string;
|
||||
register: UseFormRegister<any>;
|
||||
fieldError: FieldError;
|
||||
isDirty: boolean;
|
||||
}
|
||||
|
||||
const findCountry = (countryCode: string) => (country: Country) => country.code === countryCode;
|
||||
|
||||
const toOptions = ({ name, code }: CountrySubdivision) => ({
|
||||
label: name,
|
||||
value: code,
|
||||
});
|
||||
|
||||
const getDefOptionLabel = (localeCode: string, localization: MetadataTextLocalization) =>
|
||||
localization[localeCode] || localization['en'];
|
||||
|
||||
const createValidator = (required: boolean) => (value) => {
|
||||
if (!required) {
|
||||
return undefined;
|
||||
}
|
||||
if (required) {
|
||||
return isNil(value);
|
||||
}
|
||||
};
|
||||
|
||||
export const MetadataSelect = ({
|
||||
wrappedName,
|
||||
metadata: { name, src, localization, required },
|
||||
register,
|
||||
localeCode,
|
||||
fieldError,
|
||||
isDirty,
|
||||
}: MetadataSelectProps) => {
|
||||
const registerName = wrappedName ? `${wrappedName}.${name}` : name;
|
||||
const subdivisions = countries.find(findCountry(src.countryCode)).sub;
|
||||
const options = subdivisions.map(toOptions);
|
||||
const validate = React.useMemo(() => createValidator(required), [name]);
|
||||
return (
|
||||
<Select
|
||||
{...register(registerName, {
|
||||
required,
|
||||
validate: (value) => !validate(value) || `${name} field is invalid`,
|
||||
})}
|
||||
dirty={isDirty}
|
||||
error={!isNil(fieldError)}
|
||||
>
|
||||
<option value="">{getDefOptionLabel(localeCode, localization)}</option>
|
||||
{options.map(({ value, label }, i) => (
|
||||
<option key={i} value={value}>
|
||||
{value} - {label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
@ -1,28 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { MetadataTextLocalization, ServiceProviderTitleMetadata } from '../../../common/backend/payments';
|
||||
import { PaymentMethodIcon } from '../PaymentMethodIcon';
|
||||
import { PaymentMethodTitle } from '../PaymentMethodTitle';
|
||||
|
||||
const getText = (localeCode: string, localization: MetadataTextLocalization) =>
|
||||
localization[localeCode] || localization['en'];
|
||||
|
||||
export const Container = styled.div`
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const MetadataTitle: React.FC<{
|
||||
localeCode: string;
|
||||
metadata: ServiceProviderTitleMetadata;
|
||||
}> = ({ localeCode, metadata: { icon, localization } }) => (
|
||||
<Container>
|
||||
<PaymentMethodIcon name={icon} />
|
||||
<PaymentMethodTitle>{getText(localeCode, localization)}</PaymentMethodTitle>
|
||||
</Container>
|
||||
);
|
||||
@ -1,5 +0,0 @@
|
||||
export { MetadataField } from './MetadataField';
|
||||
export { MetadataTitle } from './MetadataTitle';
|
||||
export { MetadataSelect } from './MetadataSelect';
|
||||
export { MetadataLogo } from './MetadataLogo';
|
||||
export { obscurePassword, sortByIndex } from './utils';
|
||||
@ -1,2 +0,0 @@
|
||||
export { sortByIndex } from './sortByIndex';
|
||||
export { obscurePassword } from './obscurePassword';
|
||||
@ -1,13 +0,0 @@
|
||||
import * as md5 from 'md5';
|
||||
|
||||
import { ServiceProviderMetadataField } from '../../../../common/backend/payments';
|
||||
|
||||
export const obscurePassword = <T>(formMetadata: ServiceProviderMetadataField[], formValues: T): T => {
|
||||
const found = formMetadata.find((field) => field.type === 'password');
|
||||
return found
|
||||
? {
|
||||
...formValues,
|
||||
[found.name]: md5(formValues[found.name]),
|
||||
}
|
||||
: formValues;
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
import { ServiceProviderMetadataField } from '../../../../common/backend/payments';
|
||||
|
||||
export const sortByIndex = (a: ServiceProviderMetadataField, b: ServiceProviderMetadataField) => a?.index - b?.index;
|
||||
@ -2,7 +2,6 @@ import react from '@vitejs/plugin-react';
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
import { defineConfig } from 'vite';
|
||||
import { viteStaticCopy } from 'vite-plugin-static-copy';
|
||||
import svgr from 'vite-plugin-svgr';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
|
||||
export default defineConfig({
|
||||
@ -17,7 +16,6 @@ export default defineConfig({
|
||||
},
|
||||
plugins: [
|
||||
react(),
|
||||
svgr(),
|
||||
tsconfigPaths(),
|
||||
viteStaticCopy({
|
||||
targets: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user