fix(payment-widget): translation and emotion

packages/payment-widget/package.json

@@ -3,10 +3,10 @@
   "version": "0.1.1",
   "license": "BSD-3-Clause",
   "type": "module",
-  "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts"
   },
+  "main": "src/index.ts",
   "files": [
     "dist"
   ],

packages/payment-widget/src/locales/en.locale.ts

@@ -0,0 +1,11 @@
+import type { Locale } from './locale.interaces.js'
+
+export const EnLocale: Locale = {
+  'payment_widget.pay': 'Pay',
+  'payment_widget.order_price': 'Order amount',
+  'payment_widget.email': 'E-mail',
+  'payment_widget.error_required': 'Required field',
+  'payment_widget.error_amount': 'The amount must be greater than zero',
+  'payment_widget.error_email': 'Incorrect e-mail',
+  'payment_widget.error_phone': 'Incorrect phone',
+}

packages/payment-widget/src/locales/index.ts

@@ -0,0 +1,2 @@
+export * from './en.locale.js'
+export * from './ru.locale.js'

packages/payment-widget/src/locales/locale.interaces.ts

@@ -0,0 +1,9 @@
+export interface Locale {
+  'payment_widget.pay': string
+  'payment_widget.order_price': string
+  'payment_widget.email': string
+  'payment_widget.error_required': string
+  'payment_widget.error_amount': string
+  'payment_widget.error_email': string
+  'payment_widget.error_phone': string
+}

packages/payment-widget/src/locales/ru.locale.ts

@@ -0,0 +1,11 @@
+import { Locale } from './locale.interaces.js'
+
+export const RuLocale: Locale = {
+  'payment_widget.pay': 'Оплатить',
+  'payment_widget.order_price': 'Сумма заказа',
+  'payment_widget.email': 'E-mail',
+  'payment_widget.error_required': 'Обязательное поле',
+  'payment_widget.error_amount': 'Сумма должна быть больше нуля',
+  'payment_widget.error_email': 'Некорректный e-mail',
+  'payment_widget.error_phone': 'Некорректный номер',
+}

packages/payment-widget/src/ui/button/button.component.tsx

@@ -1,7 +1,7 @@
 import type { ButtonProps }  from '@atls-ui-parts/button'
 import type { FC }           from 'react'
 
-import { default as styled } from '@emotion/styled'
+import styled from '@emotion/styled'
 import { useHover }          from 'react-laag'
 import React                 from 'react'
 
@@ -10,7 +10,7 @@ import { contentStyles }     from './button.styles.js'
 import { baseStyles }        from './button.styles.js'
 import { shapeStyles }       from './button.styles.js'
 
-const ButtonElement = styled.default('button')<ButtonProps>(
+const ButtonElement = (styled.default ?? styled)('button')<ButtonProps>(
   // @ts-expect-error
   baseStyles,
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument

packages/payment-widget/src/ui/input/input.component.tsx

@@ -20,7 +20,7 @@ import { baseStyles }                        from './input.styles.js'
 import { shapeStyles }                       from './input.styles.js'
 import { transitionStyles }                  from './input.styles.js'
 
-export const InputElement = styled.default.div<any>(
+export const InputElement = (styled.default ?? styled).div<any>(
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   baseStyles,
   shapeStyles,
@@ -29,7 +29,7 @@ export const InputElement = styled.default.div<any>(
   layout
 )
 
-const Container = styled.default.div(({ type }: any) => ({
+const Container = (styled.default ?? styled).div(({ type }: any) => ({
   display: type === 'hidden' ? 'none' : 'flex',
   width: '100%',
   flexDirection: 'column',

packages/payment-widget/src/ui/widget.component.tsx

@@ -7,18 +7,18 @@ import { IntlProvider }     from 'react-intl'
 import { useMemo }          from 'react'
 import React                from 'react'
 
-import * as messagesEn      from '../locales/en.json' with { type: 'json' }
-import * as messagesRu      from '../locales/ru.json' with { type: 'json' }
 import { LanguagesType }    from '../enums/index.js'
+import { EnLocale }         from '../locales/index.js'
+import { RuLocale }         from '../locales/index.js'
 import { Form }             from './form/index.js'
 import { FormProvider }     from './form/index.js'
 import { useCustomButton }  from '../hooks/index.js'
 import { useCustomFields }  from '../hooks/index.js'
 import { getNameFields }    from '../utils/index.js'
 
 const messages = {
-  [LanguagesType.RUSSIAN]: messagesRu,
-  [LanguagesType.ENGLISH]: messagesEn,
+  [LanguagesType.RUSSIAN]: RuLocale,
+  [LanguagesType.ENGLISH]: EnLocale,
 }
 
 export const Widget = ({
@@ -47,8 +47,12 @@ export const Widget = ({
   const nameFields = getNameFields(customFields)
 
   return (
-    // @ts-expect-error types mismatch
-    <IntlProvider locale={locale} messages={messages[locale]} defaultLocale={LanguagesType.RUSSIAN}>
+    <IntlProvider
+      locale={locale ?? navigator.language}
+      // @ts-expect-error types mismatch
+      messages={messages[locale]}
+      defaultLocale={LanguagesType.RUSSIAN}
+    >
       <FormProvider
         additionalFields={additionalFields}
         nameFields={nameFields}