TD-99: Make customizable (#2)

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,71 +0,0 @@
-<!--
-Название ветки:
-fr-0/<name>
-(fr-0/bump-angular-to-12)
-
-Название PR'a:
-FR-0: <НАЗВАНИЕ>
-FR-0,FR-1: <ОБЩЕЕ НАЗВАНИЕ> или <НАЗВАНИЕ 1>; <НАЗВАНИЕ 2>
--->
-
-## ⛵ JIRA
-
--   [ ] [FR-0](https://rbkmoney.atlassian.net/browse/FR-0)
-
-## 📑 Изменения
-
-```
-✍️(^◡^)
-```
-
-### 📦 Новые NPM пакеты
-
--   [ ] Добавлены новые NPM пакеты
-
-<!-- Описание NPM пакета и возможно стоит добавить в Guidelin'ы
--   [NPM](https://www.npmjs.com/)
--->
-
-### 📚 Обновлен Guideline
-
--   [ ] Добавлено описание в [wiki](https://github.com/rbkmoney/dashboard/wiki)
-
-<!-- Ссылка и возможно коротко об изменениях
--   [Wiki](https://github.com/rbkmoney/dashboard/wiki)
--->
-
-## 🖥️ Изменения в интерфейсе
-
--   [ ] Да
--   [ ] Выглядит отлично на мобильных устройствах
-
-### 🔗 Страницы с изменениями либо как их воспроизвести
-
--   http://localhost:7050/
-
-### 🖼 Скриншоты
-
-<!--
-<details>
-<summary>Скриншоты</summary>
-
-</details>
--->
-
-<!--
-- На измененные поля нужно ставить "x", для понимания что это было отредактировано.
-
-JIRA:
-- Если несколько, то нужно добавить каждый
-
-Описание изменений:
-- Например: Обновление Angular до 12 версии
-
-Страницы с изменениями:
-- Например: http://localhost:8000/invoices или диалог на http://localhost:8000/payments
-
-Скриншоты:
-- Можно просто скопировать и вставить изображение (CTRL-V)
-- Шаблон для изображения: ![Название](URL)
-- Если есть скриншоты которые занимаю много места, то их нужно вложить в details
--->

.github/actions/init/action.yaml

@@ -0,0 +1,14 @@
+name: Init
+description: Init
+runs:
+    using: composite
+    steps:
+        - name: Init NodeJS
+          uses: actions/setup-node@v2
+          with:
+              node-version: '16.13.2'
+              cache: 'npm'
+
+        - name: Install Packages
+          run: npm ci
+          shell: bash

.github/workflows/master.yaml

@@ -0,0 +1,30 @@
+name: Master
+on:
+    push:
+        branches:
+            - 'master'
+            - 'main'
+env:
+    REGISTRY: ghcr.io
+    IMAGE_NAME: ${{ github.repository }}
+jobs:
+    build:
+        name: Build
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+              with:
+                  submodules: recursive
+            - name: Init
+              uses: ./.github/actions/init
+            - name: Build
+              run: npm run build
+            - name: Deploy image
+              uses: valitydev/action-deploy-docker@v1.0.16
+              with:
+                  registry-username: ${{ github.actor }}
+                  registry-access-token: ${{ secrets.GITHUB_TOKEN }}
+                  dockerfile-path: .
+              env:
+                  ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}

.github/workflows/pr.yaml

@@ -1,12 +1,55 @@
-name: 'PR Title Checker'
+name: PR
 on:
-  pull_request:
+    pull_request:
-    types: [edited, opened, synchronize, reopened]
+        branches: ['*']
-
 jobs:
-  title-check:
+    init:
-    runs-on: ubuntu-latest
+        name: Init
-    steps:
+        runs-on: ubuntu-latest
-      - uses: naveenk1223/action-pr-title@master
+        steps:
-        with:
+            - name: Checkout
-          regex: '([A-Z]+-[0-9]+,?)+: [A-Z0-9].*'
+              uses: actions/checkout@v2
+            - name: Init
+              uses: ./.github/actions/init
+            - name: Cache
+              uses: actions/cache@v2
+              id: cache
+              with:
+                  path: ./*
+                  key: ${{ github.sha }}
+    check:
+        name: Check
+        runs-on: ubuntu-latest
+        needs: [init]
+        steps:
+            - name: Cache
+              uses: actions/cache@v2
+              id: cache
+              with:
+                  path: ./*
+                  key: ${{ github.sha }}
+            - name: Init NodeJS
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '16.13.2'
+                  cache: 'npm'
+            - name: Check
+              run: npm run check
+    build:
+        name: Build
+        runs-on: ubuntu-latest
+        needs: [init]
+        steps:
+            - name: Cache
+              uses: actions/cache@v2
+              id: cache
+              with:
+                  path: ./*
+                  key: ${{ github.sha }}
+            - name: Init NodeJS
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '16.13.2'
+                  cache: 'npm'
+            - name: Build
+              run: npm run build

.gitignore

@@ -1,4 +1,3 @@
-.idea
 /node_modules/
 /dist/
 Dockerfile

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "build_utils"]
-	path = build_utils
-	url = git+ssh://git@github.com/rbkmoney/build_utils

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/checkout.iml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/.cache-loader" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/codeStyles/Project.xml

@@ -0,0 +1,58 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+      <option name="HTML_ENFORCE_QUOTES" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="TsLint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/checkout.iml" filepath="$PROJECT_DIR$/.idea/checkout.iml" />
+    </modules>
+  </component>
+</project>

.idea/prettier.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myRunOnSave" value="true" />
+    <option name="myRunOnReformat" value="true" />
+    <option name="myFilesPattern" value="{**/*,*}.{js,ts,jsx,tsx,json}" />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.npmrc

@@ -1 +0,0 @@
-save-prefix='~'

.prettierignore

@@ -28,5 +28,9 @@ package.json
 node_modules
 dist
 .cache-loader
-build_utils
+
+# VS Code
 .vscode
+
+# IDEA
+.idea

Dockerfile

@@ -0,0 +1,3 @@
+FROM nginx:1.21
+COPY dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/vhosts.d/checkout.conf

Dockerfile.sh

@@ -1,23 +0,0 @@
-#!/bin/bash
-cat <<EOF
-FROM $BASE_IMAGE
-MAINTAINER Ildar Galeev <i.galeev@rbkmoney.com>
-COPY dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/vhosts.d/payform.conf
-EXPOSE 8080
-LABEL base_image_tag=$BASE_IMAGE_TAG
-LABEL build_image_tag=$BUILD_IMAGE_TAG
-# A bit of magic to get a proper branch name
-# even when the HEAD is detached (Hey Jenkins!
-# BRANCH_NAME is available in Jenkins env).
-LABEL branch=$( \
-  if [ "HEAD" != $(git rev-parse --abbrev-ref HEAD) ]; then \
-    echo $(git rev-parse --abbrev-ref HEAD); \
-  elif [ -n "$BRANCH_NAME" ]; then \
-    echo $BRANCH_NAME; \
-  else \
-    echo $(git name-rev --name-only HEAD); \
-  fi)
-LABEL commit=$(git rev-parse HEAD)
-LABEL commit_number=$(git rev-list --count HEAD)
-EOF

Jenkinsfile

@@ -1,55 +0,0 @@
-#!groovy
-
-build('payform', 'docker-host') {
-  checkoutRepo()
-  loadBuildUtils()
-
-  def pipeDefault
-  def withWsCache
-  runStage('load pipeline') {
-    env.JENKINS_LIB = "build_utils/jenkins_lib"
-    pipeDefault = load("${env.JENKINS_LIB}/pipeDefault.groovy")
-    withWsCache = load("${env.JENKINS_LIB}/withWsCache.groovy")
-  }
-
-  def pipeline = {
-    runStage('init') {
-      withGithubSshCredentials {
-        sh 'make wc_init'
-      }
-    }
-    runStage('check') {
-      sh 'make wc_check'
-    }
-    runStage('test') {
-      sh 'make wc_test'
-    }
-    if (env.BRANCH_NAME == 'master') {
-      runStage('build') {
-        withCredentials([string(credentialsId: 'SENTRY_AUTH_TOKEN', variable: 'SENTRY_AUTH_TOKEN')]) {
-          sh 'make wc_build'
-        }
-      }
-    } else {
-      runStage('build') {
-        sh "make wc_cmd WC_CMD='make build_pr'"
-      }
-    }
-    runStage('build image') {
-      sh 'make build_image'
-    }
-    runFESecurityTools()
-    try {
-      if (env.BRANCH_NAME == 'master' || env.BRANCH_NAME.startsWith('epic')) {
-        runStage('push image') {
-          sh 'make push_image'
-        }
-      }
-    } finally {
-      runStage('rm local image') {
-        sh 'make rm_local_image'
-      }
-    }
-  }
-  pipeDefault(pipeline)
-}

LICENSE

@@ -1,176 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS

Makefile

@@ -1,56 +0,0 @@
-SUBMODULES = build_utils
-SUBTARGETS = $(patsubst %,%/.git,$(SUBMODULES))
-
-UTILS_PATH := build_utils
-TEMPLATES_PATH := .
-
-# Name of the service
-SERVICE_NAME := payform
-# Service image default tag
-SERVICE_IMAGE_TAG ?= $(shell git rev-parse HEAD)
-# The tag for service image to be pushed with
-SERVICE_IMAGE_PUSH_TAG ?= $(SERVICE_IMAGE_TAG)
-
-REGISTRY ?= dr2.rbkmoney.com
-
-# Base image for the service
-BASE_IMAGE_NAME := service-fe
-BASE_IMAGE_TAG := 647d66a59ba89ea42b326ca5156f5d1e1395febc
-
-BUILD_IMAGE_TAG := 25c031edd46040a8745334570940a0f0b2154c5c
-
-GIT_SSH_COMMAND :=
-DOCKER_RUN_OPTS = -e GIT_SSH_COMMAND='$(GIT_SSH_COMMAND)' -e NPM_TOKEN='$(GITHUB_TOKEN)' -e SENTRY_AUTH_TOKEN='$(SENTRY_AUTH_TOKEN)'
-
-CALL_W_CONTAINER := init check test build clean submodules
-
-.PHONY: $(CALL_W_CONTAINER)
-
-all: build
-
--include $(UTILS_PATH)/make_lib/utils_image.mk
--include $(UTILS_PATH)/make_lib/utils_container.mk
-
-$(SUBTARGETS): %/.git: %
-	git submodule update --init $<
-	touch $@
-
-submodules: $(SUBTARGETS)
-
-init:
-	npm i
-
-check:
-	npm run check
-
-test:
-	npm test
-
-build:
-	SENTRY_AUTH_TOKEN=$(SENTRY_AUTH_TOKEN) npm run build
-
-build_pr:
-	npm run build
-
-clean:
-	rm -rf dist

README.md

@@ -1,6 +1,4 @@
-# Payform
+# Checkout
-
-[![Build Status](http://ci.rbkmoney.com/buildStatus/icon?job=rbkmoney_private/payform/master)](http://ci.rbkmoney.com/job/rbkmoney_private/job/payform/job/master)
 
 ## Настройка
 
@@ -10,4 +8,6 @@
 
 Например в случае с nginx `appConfig.json` нужно положить в `/usr/share/nginx/html`
 
-### [Описание вариантов интеграции](https://rbkmoney.github.io/docs/docs/payments/checkout/)
+## Логотип
+
+Заменяется в `dist/assets/logo.svg`.

build_utils

@@ -1 +0,0 @@
-Subproject commit a7655bc60c877a65cdfe3d9b668021d970d88a76

config/checkout-config.js

@@ -39,7 +39,8 @@ module.exports = {
             [
                 { from: './src/app/finish-interaction.html' },
                 { from: './src/appConfig.json', to: '..' },
-                { from: './src/locale/*.json', to: './locale', flatten: true }
+                { from: './src/locale/*.json', to: './locale', flatten: true },
+                { from: './src/assets', to: '../assets' }
             ],
             { logLevel: 'warn' }
         )

config/webpack.prod.js

@@ -31,8 +31,8 @@ const commonProdConfig = {
             ? [
                   new SentryWebpackPlugin({
                       authToken: process.env.SENTRY_AUTH_TOKEN,
-                      org: 'rbkmoney-fd',
+                      org: 'vality',
-                      project: 'payform',
+                      project: 'checkout',
                       include: './dist',
                       ignore: ['node_modules', 'webpack.config.js']
                   })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "checkout",
-  "version": "1.0.0",
+  "version": "0.1.0",
-  "description": "",
+  "private": true,
   "scripts": {
     "clear": "rimraf dist && rimraf .cache-loader",
     "build": "npm run clear && webpack --mode production --colors --progress --config config/webpack.prod.js",
@@ -13,13 +13,7 @@
     "prettier:check": "prettier \"**\" --list-different",
     "lint:fix": "tslint \"src/**/*.@(ts|tsx)\" -e \"**/*.d.ts\""
   },
-  "repository": {
+  "license": "Apache-2.0",
-    "type": "git",
-    "url": "git+https://github.com/rbkmoney/payform.git"
-  },
-  "author": "rbkmoney",
-  "license": "",
-  "private": true,
   "dependencies": {
     "@sentry/react": "~6.13.2",
     "@sentry/tracing": "~6.13.2",
@@ -32,15 +26,16 @@
     "kjua": "^0.9.0",
     "libphonenumber-js": "1.9.6",
     "lodash-es": "~4.17.15",
-    "react": "~16.6.3",
+    "react": "17.0.2",
-    "react-dom": "~16.6.3",
+    "react-dom": "17.0.2",
-    "react-redux": "~5.1.1",
+    "react-redux": "7.2.6",
+    "react-svg": "14.1.8",
     "react-transition-group": "1.2.1",
-    "redux": "~3.7.2",
+    "redux": "4.1.2",
-    "redux-form": "~7.2.3",
+    "redux-form": "8.3.8",
-    "redux-saga": "~0.16.0",
+    "redux-saga": "1.1.3",
     "reselect": "~4.0.0",
-    "styled-components": "~4.1.1",
+    "styled-components": "5.3.3",
     "ts-polyfill": "~3.8.2",
     "uri-template": "~1.0.1",
     "url-polyfill": "~1.0.11",
@@ -48,6 +43,7 @@
     "whatwg-fetch": "~2.0.3"
   },
   "devDependencies": {
+    "@redux-saga/testing-utils": "^1.1.3",
     "@sentry/webpack-plugin": "~1.17.1",
     "@types/card-validator": "~4.1.0",
     "@types/credit-card-type": "~7.0.0",
@@ -57,14 +53,14 @@
     "@types/jest": "~23.3.14",
     "@types/lodash-es": "~4.17.0",
     "@types/node": "^11.13.18",
-    "@types/react": "~16.7.6",
+    "@types/react": "17.0.38",
-    "@types/react-dom": "~16.0.9",
+    "@types/react-dom": "17.0.11",
-    "@types/react-redux": "~5.0.21",
+    "@types/react-redux": "7.1.22",
-    "@types/react-test-renderer": "~16.0.1",
+    "@types/react-test-renderer": "17.0.1",
     "@types/react-transition-group": "1.1.5",
-    "@types/redux-form": "~7.2.6",
+    "@types/redux-form": "8.3.3",
     "@types/reselect": "~2.2.0",
-    "@types/styled-components": "~4.1.0",
+    "@types/styled-components": "5.1.20",
     "@types/url-parse": "~1.1.0",
     "@types/uuid": "~8.3.0",
     "babel-jest": "~22.4.1",
@@ -72,8 +68,9 @@
     "babel-preset-env": "~1.7.0",
     "cache-loader": "~2.0.1",
     "compression-webpack-plugin": "~3.1.0",
+    "concurrently": "~6.5.1",
     "copy-webpack-plugin": "~5.1.1",
-    "cross-origin-communicator": "git+ssh://git@github.com/rbkmoney/cross-origin-communicator.git#dc3209dab12fb5d745c21b72d10ebe567270a836",
+    "cross-origin-communicator": "github:valitydev/cross-origin-communicator#bd13edd80e2d55cffa45c6b7b9ee3744475c5d0d",
     "css-loader": "~1.0.1",
     "file-loader": "~2.0.0",
     "fork-ts-checker-webpack-plugin": "~4.1.1",
@@ -82,8 +79,8 @@
     "jest": "~23.6.0",
     "mini-css-extract-plugin": "~0.4.5",
     "prettier": "~1.19.1",
-    "react-test-renderer": "~16.2.0",
+    "react-test-renderer": "17.0.2",
-    "redux-devtools-extension": "~2.13.2",
+    "redux-devtools-extension": "2.13.9",
     "rimraf": "~2.6.2",
     "style-loader": "~0.23.1",
     "svg-react-loader": "~0.4.6",
@@ -95,7 +92,7 @@
     "tslint-immutable": "~4.5.1",
     "tslint-loader": "~3.5.4",
     "tslint-react": "~3.6.0",
-    "typescript": "~3.5.3",
+    "typescript": "4.5.4",
     "typescript-plugin-styled-components": "~1.0.0",
     "webpack": "~4.29.0",
     "webpack-bundle-analyzer": "~3.6.0",

renovate.json

@@ -0,0 +1,11 @@
+{
+    "extends": ["config:base"],
+    "packageRules": [
+        {
+            "matchPackagePatterns": ["*"],
+            "matchUpdateTypes": ["minor", "patch"],
+            "groupName": "all non-major dependencies",
+            "groupSlug": "all-minor-patch"
+        }
+    ]
+}

src/app/backend/app-config.ts

@@ -4,12 +4,21 @@ export class AppConfig {
     capiEndpoint: string;
     wrapperEndpoint: string;
     applePayMerchantID: string;
-    googlePayMerchantID: string;
-    googlePayGatewayMerchantID: string;
     samsungPayMerchantName: string;
     samsungPayServiceID: string;
-    yandexPayMerchantID: string;
+    yandexPay: {
-    yandexPayGatewayMerchantID: string;
+        merchantName: string;
+        merchantID: string;
+        gatewayMerchantID: string;
+    };
+    googlePay: {
+        merchantName: string;
+        merchantID: string;
+        gateway: string;
+        gatewayMerchantID: string;
+        merchantOrigin: string;
+    };
     brandless: boolean;
     fixedTheme: ThemeName;
+    brandName: string;
 }

src/app/backend/create-payment-resource.ts

@@ -8,6 +8,15 @@ function getFingerprintFromComponents(components: Fingerprint2.Component[]) {
     return Fingerprint2.x64hash128(values.join(''), 31);
 }
 
+const getClientInfoUrl = (): { url: string } | undefined => {
+    const url = (document.referrer || '').slice(
+        0,
+        // URL max length (API constraint)
+        599
+    );
+    return url ? { url } : undefined;
+};
+
 export const createPaymentResource = (
     capiEndpoint: string,
     accessToken: string,
@@ -22,11 +31,7 @@ export const createPaymentResource = (
                 paymentTool,
                 clientInfo: {
                     fingerprint: getFingerprintFromComponents(fingerprintComponents),
-                    url: (document.referrer || '').slice(
+                    ...getClientInfoUrl()
-                        0,
-                        // URL max length (API constraint)
-                        599
-                    )
                 }
             }
         })

src/app/components/app/app.tsx

@@ -43,7 +43,7 @@ const mapStateToProps = (state: State) => ({
     initializeApp: state.initializeApp
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<State>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     initApp: bindActionCreators(initializeApp, dispatch)
 });
 

src/app/components/app/modal-container/footer/footer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { ReactSVG } from 'react-svg';
 
 import { State } from 'checkout/state';
 import { Locale } from 'checkout/locale';
@@ -8,7 +9,6 @@ import SecureIcon from './secure-icon.svg';
 import VisaIcon from './visa-icon.svg';
 import McIcon from './mc-icon.svg';
 import PciDssIcon from './pci-dss-icon.svg';
-import Logo from './logo.svg';
 import MirAcceptIcon from './mir-accept.svg';
 import { device } from 'checkout/utils/device';
 import styled, { css } from 'checkout/styled-components';
@@ -121,7 +121,12 @@ const FooterDef: React.FC<FooterProps> = (props) => (
                     <StyledSecureIcon />
                     <Label>{props.locale['footer.pay.label']}</Label>
                     <LogoWrapper>
-                        <Logo />
+                        <ReactSVG
+                            src="/assets/logo.svg"
+                            beforeInjection={(svg) => {
+                                svg.setAttribute('style', 'height: 24px; width: auto');
+                            }}
+                        />
                     </LogoWrapper>
                 </SafePayment>
             )}

src/app/components/app/modal-container/footer/logo.svg

@@ -1,26 +0,0 @@
-<svg width="125" height="20" viewBox="0 0 365 60">
-    <g fill-rule="evenodd">
-        <path
-            d="M71.3 43.97s1.56-5 6.26-5h16.18c6 0 6.8-1.35 6.8-5.47 0-3.57-.6-5.25-6.4-5.25H77.18c-3.75 0-5.89 2.78-5.89 6.09v9.63zm0-19.57s1.66-4.45 5.72-4.45h17.12c3.04 0 4.59-2.35 4.59-5.45 0-2.83-1.55-4.65-4.65-4.65H76.7c-3.27 0-5.42 2.5-5.42 4.84v9.71zM70.9 1.02h22.9c10.38 0 16.1 3.1 16.1 11.72 0 7.55-2.02 9.17-5.8 10.38 4.66 1.56 7.63 3.58 7.63 10.92 0 10.05-5.06 13.75-15.64 13.75h-36V10.2c0-6.23 4.44-9.17 10.81-9.17z"
-        />
-        <g transform="translate(119 .29)">
-            <path
-                d="M12.08 23.58l6.6-5.4L35.54 3.8C37.28 2.3 40.33.73 45.2.73h7.03l-23.9 21.9L53.3 47.51h-5.5c-8 0-12.31-4.66-12.31-4.66L22.48 30.81c-4.04-3.77-10.4-3.32-10.4-3.32v12.39c0 3.57-1.85 7.63-7.7 7.63H.9V8.4C.9-.02 12.1.74 12.1.74v22.85z"
-            />
-        </g>
-        <g transform="translate(0 .29)">
-            <path
-                d="M34.56 24.32H16.28c-2 0-4.06.87-5.11 4V15.17c0-2.58 2.1-5.13 5.52-5.13h17.87c4.99 0 6.4 2.23 6.4 7.14 0 5.06-1.62 7.15-6.4 7.15m7.74 7.61c6.02-1.69 9.85-7.61 9.85-14.76C52.15 3.9 45.21.73 35.5.73H8.1C1.15.73 0 7.26 0 10v37.5h3.67c5.89 0 7.5-3.47 7.5-7.94v-5.95h17.5c3.39 0 5.21 1.57 6.43 3.48l3.6 5.62c1.62 2.52 4.33 4.79 10.06 4.79h4.2S44.87 35.59 42.3 31.93"
-            />
-        </g>
-        <path
-            d="M231.36 25.66h-5.01c-.4 0-.77.01-1.12.03l-.1.01c-4.77.3-6.36 2.38-7.2 4.16-.86-1.78-2.44-3.85-7.2-4.16h-.1c-.36-.03-.74-.04-1.13-.04h-5.02c-6.27 0-9.67 3.58-9.67 7.7V47.8s3.22.28 3.22-2.63V33.99c0-3.58 2.6-5.64 7.26-5.64h3.32c1.96 0 3.6.32 4.85.97a5.2 5.2 0 0 1 2.68 3.48c0 .05.03.1.04.16l.01.1c.08.43.12.89.12 1.38v13.35s3.23.33 3.23-2.55v-10.8c0-.49.04-.95.12-1.37l.01-.11.04-.16a5.2 5.2 0 0 1 2.68-3.48c1.25-.65 2.89-.97 4.85-.97H230.56c4.66 0 7.26 2.06 7.26 5.64v13.8s3.22.33 3.22-2.55V33.37c0-4.13-3.4-7.71-9.68-7.71M255.01 45.1h8.38c4.03 0 6.72-1.7 6.72-6v-4.84c0-3.85-2.38-6-6.68-6h-8.42c-4.39 0-6.68 1.7-6.68 6v4.84c0 4.03 2.29 6 6.68 6m-.22-19.53h8.87c7.34 0 9.67 4.08 9.67 8.7v4.83c0 4.66-2.55 8.7-9.72 8.7h-8.82c-6.54 0-9.68-3.05-9.68-8.7v-4.84c0-4.88 2.69-8.69 9.68-8.69M296 25.66h-8.51c-7.26 0-9.68 4.3-9.68 9.23v12.9s3.22.2 3.22-2.7V34.45c0-3.85 2.6-6.1 6.46-6.1H296c3.85 0 6.45 2.25 6.45 6.1v13.35s3.22.29 3.22-2.57V34.89c0-4.93-2.41-9.23-9.67-9.23M329.55 28.26h-10.13c-3.22 0-5.5 2.18-5.68 5.56v2.27s.5-1.83 2.65-1.83h19.11c0-3.72-2.24-6-5.95-6zm-15.82 8.69v2.15c0 4.57 2.64 6 6.14 6h10.48c2.64 0 4.12-1.04 4.82-2.55 1.06-2.32 3.56-1.84 3.56-1.84 0 3.23-1.75 7.08-7.84 7.08H320c-6.45 0-9.5-2.78-9.5-8.24v-5.83c0-4.03 3.32-8.15 9.41-8.15h9.32c6.36 0 9.5 3.67 9.5 7.8v3.58h-25z"
-        />
-        <g transform="translate(340 25.29)">
-            <path
-                d="M5.45 2.45c.6 1.1 5.52 10.1 7.88 14.52 1.6 3 1.93 2.4 1.93 2.4S21.28 5.5 22.4 2.72C23.53-.08 26.77.37 26.77.37L15.66 25.42C13.69 29.89 11.99 32 6.52 32H5.45s-.38-2.69 1.88-2.69c2.76 0 4.25-1.2 6.58-6.8 0 0-.8.12-2.26-2.66C10.8 18.23.97.37.97.37s3.2-.3 4.48 2.08"
-            />
-        </g>
-        <path d="M187.84 43.15a4.64 4.64 0 1 1-9.29 0 4.64 4.64 0 0 1 9.3 0" />
-    </g>
-</svg>

src/app/components/app/modal-container/modal-content/modal-content.tsx

@@ -123,7 +123,7 @@ const mapStateToProps = (state: State) => ({
     activeModal: state.modals.find((modal) => modal.active)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     finishInteraction: bindActionCreators(finishInteraction, dispatch)
 });
 

src/app/components/app/modal-container/modal-error/modal-error.tsx

@@ -15,7 +15,7 @@ const ModalErrorWrapper = styled.div`
         max-height: 690px;
         width: 680px;
         position: relative;
-        border-radius: 6px;
+        border-radius: 16px;
     }
 `;
 

src/app/components/app/modal-container/modal-loader/modal-loader.tsx

@@ -10,7 +10,7 @@ const LoaderWrapper = styled.div`
     left: 0;
     height: 100%;
     width: 100%;
-    border-radius: 6px;
+    border-radius: 16px;
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;

src/app/components/app/modal-container/modal/close/close.tsx

@@ -30,7 +30,7 @@ interface CloseProps {
     setResult: (resultState: ResultState) => ResultAction;
 }
 
-const mapDispatchToProps = (dispatch: Dispatch<ResultAction>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     setResult: bindActionCreators(setResult, dispatch)
 });
 

src/app/components/app/modal-container/modal/form-block.tsx

@@ -1,4 +1,4 @@
-import styled from 'checkout/styled-components';
+import styled, { css } from 'checkout/styled-components';
 import { device } from 'checkout/utils/device';
 
 export const FormBlock = styled.div<{ inFrame: boolean }>`
@@ -16,7 +16,7 @@ export const FormBlock = styled.div<{ inFrame: boolean }>`
         height: auto;
         min-height: auto;
         width: 680px;
-        border-radius: 6px;
+        border-radius: 16px;
         display: flex;
         flex-wrap: nowrap;
         flex-direction: row;
@@ -28,4 +28,10 @@ export const FormBlock = styled.div<{ inFrame: boolean }>`
             display: none !important;
         }
     }
+
+    ${({ inFrame }) =>
+        inFrame &&
+        css`
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        `};
 `;

src/app/components/app/modal-container/modal/form-container/card-form/card-form.tsx

@@ -38,7 +38,7 @@ const mapStateToProps = (state: State) => ({
     integrationType: state.config.initConfig.integrationType
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     pay: bindActionCreators(pay, dispatch),
     subscribe: bindActionCreators(subscribe, dispatch),
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch)

src/app/components/app/modal-container/modal/form-container/card-form/fields/expire-date/validate-expire-date/validate-card-expiry.ts

@@ -27,7 +27,6 @@ export function validateCardExpiry({ month, year }: ExpiryDate): boolean {
     }
 
     // TODO: Bring back the validation for the date when the world goes okay.
-    // https://rbkmoney.atlassian.net/browse/FE-1043
 
     // const expiry = new Date(year, month);
     // const currentTime = new Date();

src/app/components/app/modal-container/modal/form-container/euroset-form/euroset-form.tsx

@@ -42,7 +42,7 @@ const mapStateToProps = (state: State): Partial<Props> => ({
     amount: formatAmount(state.amountInfo)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>): Partial<Props> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Partial<Props> => ({
     pay: bindActionCreators(pay, dispatch),
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch)
 });

src/app/components/app/modal-container/modal/form-container/form-container.tsx

@@ -35,7 +35,7 @@ const Container = styled.div`
 
 const Form = styled.div<{ error?: any; height?: number }>`
     background: #fff;
-    border-radius: 6px;
+    border-radius: 16px;
     box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.25);
     padding: 30px 20px;
     position: relative;
@@ -140,7 +140,7 @@ const mapStateToProps = (state: State): Partial<FormContainerProps> => {
     };
 };
 
-const mapDispatchToProps = (dispatch: Dispatch<any>): Partial<FormContainerProps> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Partial<FormContainerProps> => ({
     setViewInfoHeight: bindActionCreators(setViewInfoHeight, dispatch)
 });
 

src/app/components/app/modal-container/modal/form-container/form-loader/form-loader.tsx

@@ -21,7 +21,7 @@ const LoaderWrapper = styled.div`
     left: 0;
     height: 100%;
     width: 100%;
-    border-radius: 6px;
+    border-radius: 16px;
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;

src/app/components/app/modal-container/modal/form-container/header/header.tsx

@@ -47,7 +47,7 @@ const mapStateToProps = (state: State) => ({
     destination: getDestination(state.modals)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     goToFormInfo: bindActionCreators(goToFormInfo, dispatch)
 });
 

src/app/components/app/modal-container/modal/form-container/input/input.tsx

@@ -23,7 +23,7 @@ const StyledInput = styled.input`
     width: 100%;
     height: 48px;
     box-sizing: border-box;
-    border-radius: 3px;
+    border-radius: 8px;
     border: 1px solid ${({ theme }) => theme.color.neutral[0.2]};
     box-shadow: 0 0 0 0 #fff;
     font-weight: 500;

src/app/components/app/modal-container/modal/form-container/interaction-form/interaction-terminal-form/interaction-terminal-form.tsx

@@ -9,6 +9,7 @@ import { Locale } from 'checkout/locale';
 import { ReceiptInfo } from './receipt-info';
 import { EurosetLogo } from 'checkout/components';
 import styled from 'checkout/styled-components';
+import { Config } from 'checkout/config';
 
 const Container = styled.div`
     display: flex;
@@ -26,23 +27,25 @@ const SystemLogo = styled(EurosetLogo)`
 
 const mapStateToProps = (s: State) => ({
     locale: s.config.locale,
-    amount: formatInvoiceAmount(s.model.invoice)
+    amount: formatInvoiceAmount(s.model.invoice),
+    config: s.config
 });
 
 export interface InteractionTerminalFormProps {
     receipt: PaymentTerminalReceipt;
     locale: Locale;
     amount: FormattedAmount;
+    config: Config;
 }
 
 class InteractionTerminalFormDef extends React.Component<InteractionTerminalFormProps> {
     render() {
-        const { locale, receipt, amount } = this.props;
+        const { locale, receipt, amount, config } = this.props;
         return (
             <Container id="terminal-interaction">
                 <Header title={this.props.locale['form.header.pay.euroset.label']} />
                 <SystemLogo />
-                <ReceiptInfo amount={amount} receipt={receipt} locale={locale} />
+                <ReceiptInfo amount={amount} receipt={receipt} locale={locale} config={config} />
             </Container>
         );
     }

src/app/components/app/modal-container/modal/form-container/interaction-form/interaction-terminal-form/receipt-info/receipt-info.tsx

@@ -7,10 +7,12 @@ import { FormattedAmount } from 'checkout/utils';
 import { Highlight } from 'checkout/components/app/modal-container/modal/form-container/highlight';
 import { ListItem, NumerableList } from 'checkout/components/app/modal-container/modal/form-container/numerable-list';
 import { Text } from '../../../text';
+import { Config } from 'checkout/config';
 
 interface ReceiptInfo {
     locale: Locale;
     receipt: PaymentTerminalReceipt;
+    config: Config;
     amount: FormattedAmount;
 }
 
@@ -35,7 +37,12 @@ export const ReceiptInfo: React.FC<ReceiptInfo> = (props) => (
             <ListItem number={1}>
                 {props.locale['form.pay.terminals.step.one.text']} {props.locale['brand.euroset']}.
             </ListItem>
-            <ListItem number={2}>{props.locale['form.pay.terminals.step.two.text']}.</ListItem>
+            <ListItem number={2}>
+                {props.locale['form.pay.terminals.step.two.text'].replace(
+                    '${brandName}',
+                    props.config.appConfig.brandName
+                )}
+            </ListItem>
             <ListItem number={3}>
                 {props.locale['form.pay.terminals.step.three.text']}: <br />
                 <Highlight>{formatPaymentId(props.receipt.shortPaymentID)}</Highlight>.

src/app/components/app/modal-container/modal/form-container/mobile-commerce-form/mobile-commerce-form.tsx

@@ -37,7 +37,7 @@ const mapStateToProps = (state: State) => ({
     mobileCommerceFormInfo: toMobileCommerceFormInfo(state.modals)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch),
     pay: bindActionCreators(pay, dispatch)
 });

src/app/components/app/modal-container/modal/form-container/payment-methods/methods/mthod-simple.ts

@@ -1,7 +1,7 @@
 import styled from 'checkout/styled-components';
 
 export const MethodSimple = styled.li`
-    border-radius: 3px;
+    border-radius: 8px;
     border: 1px solid ${({ theme }) => theme.color.neutral[0.2]};
     padding: 20px;
     display: flex;

src/app/components/app/modal-container/modal/form-container/payment-methods/payment-methods.tsx

@@ -32,7 +32,7 @@ const mapStateToProps = (s: State): Partial<PaymentMethodsProps> => ({
     emailPrefilled: !!s.config.initConfig.email
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>): Partial<PaymentMethodsProps> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Partial<PaymentMethodsProps> => ({
     setFormInfo: bindActionCreators(goToFormInfo, dispatch),
     setViewInfoHeight: bindActionCreators(setViewInfoHeight, dispatch),
     pay: bindActionCreators(payAction, dispatch)

src/app/components/app/modal-container/modal/form-container/qps-forms/qps-form.tsx

@@ -41,7 +41,7 @@ const mapStateToProps = (state: State): Partial<Props> => ({
     amount: formatAmount(state.amountInfo)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>): Partial<Props> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Partial<Props> => ({
     pay: bindActionCreators(pay, dispatch),
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch)
 });

src/app/components/app/modal-container/modal/form-container/qps-forms/qps-interaction-form.tsx

@@ -26,7 +26,7 @@ const mapStateToProps = (state: State): Partial<Props> => ({
     fieldsConfig: toFieldsConfig(state.config.initConfig, state.model.invoiceTemplate)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>): Partial<Props> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Partial<Props> => ({
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch)
 });
 

src/app/components/app/modal-container/modal/form-container/redirect-interaction-form/redirect-interaction-form.tsx

@@ -31,7 +31,7 @@ const mapStateToProps = (state: State): Partial<Props> => ({
     fieldsConfig: toFieldsConfig(state.config.initConfig, state.model.invoiceTemplate)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>): Partial<Props> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Partial<Props> => ({
     finishInteraction: bindActionCreators(finishInteraction, dispatch),
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch)
 });

src/app/components/app/modal-container/modal/form-container/result-form/action-block.tsx

@@ -110,7 +110,7 @@ const mapStateToProps = (s: State) => {
     };
 };
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     prepareToRetry: bindActionCreators(prepareToRetry, dispatch),
     forgetPaymentAttempt: bindActionCreators(forgetPaymentAttempt, dispatch)
 });

src/app/components/app/modal-container/modal/form-container/result-form/error-description-block.tsx

@@ -35,7 +35,7 @@ const mapStateToProps = (state: State) => ({
     locale: state.config.locale
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     goToFormInfo: bindActionCreators(goToFormInfo, dispatch)
 });
 

src/app/components/app/modal-container/modal/form-container/result-form/result-form.tsx

@@ -114,7 +114,7 @@ const mapStateToProps = (state: State) => {
     };
 };
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     setResult: bindActionCreators(setResult, dispatch),
     goToFormInfo: bindActionCreators(goToFormInfo, dispatch)
 });

src/app/components/app/modal-container/modal/form-container/token-provider-form/token-provider-form.tsx

@@ -35,7 +35,7 @@ const mapStateToProps = (state: State) => ({
     formValues: get(state.form, 'tokenProviderForm.values')
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch),
     pay: bindActionCreators(pay, dispatch)
 });

src/app/components/app/modal-container/modal/form-container/uzcard-form/uzcard-form.tsx

@@ -41,7 +41,7 @@ const mapStateToProps = (state: State): Partial<Props> => ({
     amount: formatAmount(state.amountInfo)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>): Partial<Props> => ({
+const mapDispatchToProps = (dispatch: Dispatch): Partial<Props> => ({
     pay: bindActionCreators(pay, dispatch),
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch)
 });

src/app/components/app/modal-container/modal/form-container/wallet-form/wallet-form.tsx

@@ -37,7 +37,7 @@ const mapStateToProps = (state: State) => ({
     walletFormInfo: toWalletFormInfo(state.modals)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     setViewInfoError: bindActionCreators(setViewInfoError, dispatch),
     pay: bindActionCreators(pay, dispatch)
 });

src/app/components/app/modal-container/modal/mobile-header/mobile-header.tsx

@@ -78,7 +78,7 @@ const mapStateToProps = (state: State) => ({
     destination: getDestination(state.modals)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
     goToFormInfo: bindActionCreators(goToFormInfo, dispatch)
 });
 

src/app/components/app/modal-container/user-interaction-modal/user-interaction-modal.tsx

@@ -25,7 +25,7 @@ const Container = styled.div`
         height: 690px;
         width: 680px;
         position: relative;
-        border-radius: 6px;
+        border-radius: 16px;
         overflow: hidden;
     }
 `;
@@ -41,7 +41,7 @@ const IFrame = styled.iframe`
     border: none;
 
     @media ${device.desktop} {
-        border-radius: 6px;
+        border-radius: 16px;
         position: absolute;
     }
 `;

src/app/configure-store.ts

@@ -18,14 +18,14 @@ import rootSaga from 'checkout/sagas/root-saga';
 
 export function configureStore(initState: any): Store<State> {
     const sagaMiddleware = createSagaMiddleware();
-    const store = createStore(
+    const store: Store<State> = createStore(
-        combineReducers({
+        combineReducers<State>({
             initializeApp: initializeAppReducer,
             result: resultReducer,
             config: configReducer,
             model: modelReducer,
             error: errorReducer,
-            form: formReducer,
+            form: formReducer as any,
             modals: modalReducer,
             availablePaymentMethods: availablePaymentMethodsReducer,
             amountInfo: amountInfoReducer,

src/app/log-messages.ts

@@ -1,4 +1,4 @@
-export const logPrefix = '[RbkmoneyCheckout]';
+export const logPrefix = '[ValityCheckout]';
 export const sadnessMessage = 'Param will not be applied.';
 export const getMessageInvalidValue = (fieldName: string, value: string, reason: string): string =>
     `${logPrefix} Invalid value of param '${fieldName}':'${value}'. ${reason} ${sadnessMessage}`;

src/app/sagas/initialize-app/initialize-amount-info/initialize-amount-info.ts

@@ -6,7 +6,7 @@ import { getAmountInfo } from '../../amount-info';
 
 export type Effect = PutEffect<InitializeAmountInfoCompleted> | SelectEffect | AmountInfoState;
 
-export function* initializeAmountInfo(initConfig: InitConfig, model: ModelState): Iterator<Effect> {
+export function* initializeAmountInfo(initConfig: InitConfig, model: ModelState) {
     yield put({
         type: TypeKeys.INITIALIZE_AMOUNT_INFO_COMPLETED,
         payload: getAmountInfo(initConfig, model)

src/app/sagas/initialize-app/initialize-app.ts

@@ -14,7 +14,7 @@ type InitializeAppPutEffect = InitializeAppCompleted | InitializeAppFailed;
 
 export type InitializeAppEffect = CallEffect | PutEffect<InitializeAppPutEffect>;
 
-export function* initialize(userInitConfig: InitConfig): Iterator<CallEffect> {
+export function* initialize(userInitConfig: InitConfig) {
     const configChunk = yield call(loadConfig, userInitConfig.locale);
     if (configChunk.appConfig.sentryDsn) {
         Sentry.init({

src/app/sagas/initialize-app/initialize-available-payment-methods/bank-card-to-methods/is-ready-to-yandex-pay.ts

@@ -1,5 +1,4 @@
-import { call, CallEffect, race, RaceEffect } from 'redux-saga/effects';
+import { call, CallEffect, race, delay } from 'redux-saga/effects';
-import { delay } from 'redux-saga';
 
 import { getYaPayPaymentData } from 'checkout/utils';
 import { logPrefix } from 'checkout/log-messages';
@@ -7,9 +6,9 @@ import { logPrefix } from 'checkout/log-messages';
 import { isYandexPayAvailable } from '../../../../../environment';
 import { loadThirdPartLib } from './load-third-part-lib';
 
-function* createYaPayment(paymentData: YaPay.PaymentData, delayMs: number): Iterator<RaceEffect | boolean> {
+function* createYaPayment(paymentData: YaPay.PaymentData, delayMs: number) {
     try {
-        const [timeout] = yield race<any>([call(delay, delayMs), call(YaPay.createPayment, paymentData)]);
+        const [timeout] = yield race<any>([delay(delayMs), call(YaPay.createPayment, paymentData)]);
         return !timeout;
     } catch (ex) {
         return false;
@@ -18,6 +17,7 @@ function* createYaPayment(paymentData: YaPay.PaymentData, delayMs: number): Iter
 
 export function* isReadyToYandexPay(
     yaPayMerchantID: string,
+    yaPayMerchantName: string,
     yaPayGatewayMerchantId: string,
     delayMs = 2000
 ): Iterator<CallEffect | boolean> {
@@ -26,7 +26,7 @@ export function* isReadyToYandexPay(
         if (!available) {
             return false;
         }
-        const paymentData = getYaPayPaymentData(yaPayMerchantID, yaPayGatewayMerchantId);
+        const paymentData = getYaPayPaymentData(yaPayMerchantID, yaPayMerchantName, yaPayGatewayMerchantId);
         try {
             return yield call(createYaPayment, paymentData, delayMs);
         } catch (error) {

src/app/sagas/initialize-app/initialize-available-payment-methods/bank-card-to-methods/load-third-part-lib.ts

@@ -1,10 +1,9 @@
-import { call, race, RaceEffect } from 'redux-saga/effects';
+import { call, race, delay } from 'redux-saga/effects';
-import { delay } from 'redux-saga';
 import { logPrefix } from 'checkout/log-messages';
 import { getScript } from 'checkout/utils';
 
-export function* loadThirdPartLib(libEndpoint: string, delayMs = 2000): Iterator<RaceEffect | boolean> {
+export function* loadThirdPartLib(libEndpoint: string, delayMs = 2000) {
-    const [timeout] = yield race<any>([call(delay, delayMs), call(getScript, libEndpoint)]);
+    const [timeout] = yield race([delay(delayMs), call(getScript, libEndpoint)]);
     if (timeout) {
         console.warn(`${logPrefix} Load timeout ${libEndpoint}`);
     }

src/app/sagas/initialize-app/initialize-available-payment-methods/bank-card-to-methods/token-providers-to-methods.ts

@@ -1,10 +1,5 @@
-import { call, CallEffect } from 'redux-saga/effects';
+import { call } from 'redux-saga/effects';
-import {
+import { AmountInfoState, ConfigState, PaymentMethodName as PaymentMethodNameState } from 'checkout/state';
-    AmountInfoState,
-    ConfigState,
-    PaymentMethod as PaymentMethodState,
-    PaymentMethodName as PaymentMethodNameState
-} from 'checkout/state';
 import { BankCardTokenProvider } from 'checkout/backend';
 import { isReadyToApplePay } from './is-ready-to-apple-pay';
 import { isReadyToGooglePay } from './is-ready-to-google-pay';
@@ -14,7 +9,7 @@ export function* tokenProvidersToMethods(
     providers: BankCardTokenProvider[],
     config: ConfigState,
     amountInfo: AmountInfoState
-): Iterator<CallEffect | PaymentMethodState[]> {
+) {
     const result = [];
     const { applePay, googlePay, samsungPay, yandexPay } = config.initConfig;
     for (const provider of providers) {
@@ -46,10 +41,13 @@ export function* tokenProvidersToMethods(
                 break;
             case BankCardTokenProvider.yandexpay:
                 if (yandexPay) {
-                    const {
+                    const { appConfig } = config;
-                        appConfig: { yandexPayMerchantID, yandexPayGatewayMerchantID }
+                    const isYandexPay = yield call(
-                    } = config;
+                        isReadyToYandexPay,
-                    const isYandexPay = yield call(isReadyToYandexPay, yandexPayMerchantID, yandexPayGatewayMerchantID);
+                        appConfig.yandexPay.merchantID,
+                        appConfig.yandexPay.merchantName,
+                        appConfig.yandexPay.gatewayMerchantID
+                    );
                     if (isYandexPay) {
                         result.push({ name: PaymentMethodNameState.YandexPay });
                     }

src/app/sagas/initialize-app/initialize-available-payment-methods/to-available-payment-methods.spec.ts

@@ -41,7 +41,7 @@ describe('All payment methods', () => {
     });
 
     it('should return PaymentMethodState with DigitalWallet, PaymentTerminal', () => {
-        const actual = iterator.next({ name: PaymentMethodName.BankCard });
+        const actual = iterator.next({ name: PaymentMethodName.BankCard } as any);
         const expected = [
             { name: PaymentMethodName.BankCard },
             { name: PaymentMethodName.DigitalWallet },
@@ -110,7 +110,7 @@ describe('DigitalWallet', () => {
         const iterator = toAvailablePaymentMethods(paymentMethods, config, amountInfo);
 
         it('should return PaymentMethodState without DigitalWallet', () => {
-            const actual = iterator.next([bankCardState]);
+            const actual = iterator.next([bankCardState] as any);
             expect(actual.value).toEqual([{ name: PaymentMethodName.BankCard }]);
             expect(actual.done).toBeTruthy();
         });
@@ -206,7 +206,7 @@ describe('MobileCommerce', () => {
         const iterator = toAvailablePaymentMethods(paymentMethods, config, amountInfo);
 
         it('should return PaymentMethodState without MobileCommerce', () => {
-            const actual = iterator.next([bankCardState]);
+            const actual = iterator.next([bankCardState] as any);
             expect(actual.value).toEqual([{ name: PaymentMethodName.BankCard }]);
             expect(actual.done).toBeTruthy();
         });

src/app/sagas/initialize-app/initialize-available-payment-methods/to-available-payment-methods.ts

@@ -19,7 +19,7 @@ export function* toAvailablePaymentMethods(
     for (const method of paymentMethods) {
         switch (method.method) {
             case PaymentMethodName.BankCard:
-                const bankCardMethods = yield call(bankCardToMethods, method, config, amountInfo);
+                const bankCardMethods = yield call(bankCardToMethods, method as any, config, amountInfo);
                 result = result.concat(bankCardMethods);
                 break;
             case PaymentMethodName.DigitalWallet:

src/app/sagas/initialize-app/initialize-model.ts

@@ -1,4 +1,4 @@
-import { all, AllEffect, call, CallEffect, put, PutEffect, select, SelectEffect } from 'redux-saga/effects';
+import { all, call, put, select } from 'redux-saga/effects';
 import {
     InvoiceTemplate,
     PaymentMethod,
@@ -19,7 +19,7 @@ import {
     InvoiceTemplateInitConfig
 } from 'checkout/config';
 import { InitializeModelCompleted, SetEventsAction, TypeKeys } from 'checkout/actions';
-import { EventsState, ModelState, State } from 'checkout/state';
+import { State } from 'checkout/state';
 
 export interface ModelChunk {
     invoiceTemplate?: InvoiceTemplate;
@@ -29,10 +29,7 @@ export interface ModelChunk {
     invoice?: Invoice;
 }
 
-export function* resolveInvoiceTemplate(
+export function* resolveInvoiceTemplate(endpoint: string, config: InvoiceTemplateInitConfig) {
-    endpoint: string,
-    config: InvoiceTemplateInitConfig
-): Iterator<AllEffect | ModelChunk> {
     const token = config.invoiceTemplateAccessToken;
     const id = config.invoiceTemplateID;
     const [invoiceTemplate, paymentMethods] = yield all([
@@ -42,7 +39,7 @@ export function* resolveInvoiceTemplate(
     return { paymentMethods, invoiceTemplate };
 }
 
-export function* resolveInvoice(endpoint: string, config: InvoiceInitConfig): Iterator<AllEffect | ModelChunk> {
+export function* resolveInvoice(endpoint: string, config: InvoiceInitConfig) {
     const token = config.invoiceAccessToken;
     const id = config.invoiceID;
     const [invoice, events, paymentMethods] = yield all([
@@ -53,37 +50,31 @@ export function* resolveInvoice(endpoint: string, config: InvoiceInitConfig): It
     return { paymentMethods, events, invoiceAccessToken: token, invoice };
 }
 
-export function* resolveCustomer(endpoint: string, config: CustomerInitConfig): Iterator<CallEffect | ModelChunk> {
+export function* resolveCustomer(endpoint: string, config: CustomerInitConfig) {
     const token = config.customerAccessToken;
     const id = config.customerID;
     const events = yield call(getCustomerEvents, endpoint, token, id);
     return { events };
 }
 
-export function* resolveIntegrationType(endpoint: string, config: InitConfig): Iterator<CallEffect | ModelChunk> {
+export function* resolveIntegrationType(endpoint: string, config: InitConfig) {
     let chunk;
     switch (config.integrationType) {
         case IntegrationType.invoiceTemplate:
-            chunk = yield call(resolveInvoiceTemplate, endpoint, config);
+            chunk = yield call(resolveInvoiceTemplate, endpoint, config as any);
             break;
         case IntegrationType.invoice:
-            chunk = yield call(resolveInvoice, endpoint, config);
+            chunk = yield call(resolveInvoice, endpoint, config as any);
             break;
         case IntegrationType.customer:
-            chunk = yield call(resolveCustomer, endpoint, config);
+            chunk = yield call(resolveCustomer, endpoint, config as any);
             break;
     }
     return chunk;
 }
 
-export type InitializeEffect =
+export function* initializeModel(endpoint: string, config: InitConfig) {
-    | CallEffect
+    const { events, ...modelChunk }: ModelChunk = yield call(resolveIntegrationType, endpoint, config);
-    | PutEffect<InitializeModelCompleted | SetEventsAction | SetEventsAction>
-    | SelectEffect
-    | { model: ModelState; events: EventsState };
-
-export function* initializeModel(endpoint: string, config: InitConfig): Iterator<InitializeEffect> {
-    const { events, ...modelChunk } = yield call(resolveIntegrationType, endpoint, config);
     yield put({ type: TypeKeys.INITIALIZE_MODEL_COMPLETED, payload: modelChunk } as InitializeModelCompleted);
     yield put({ type: TypeKeys.EVENTS_INIT, payload: events } as SetEventsAction);
     return yield select((s: State) => ({ model: s.model, events: s.events }));

src/app/sagas/initialize-app/load-config.spec.ts

@@ -16,7 +16,7 @@ describe('loadConfig', () => {
     it('should put config', () => {
         const appConfig = {};
         const locale = {};
-        const actual = iterator.next([appConfig, locale]).value;
+        const actual = iterator.next([appConfig, locale] as any).value;
         const expected = put({
             type: TypeKeys.CONFIG_CHUNK_RECEIVED,
             payload: { appConfig, locale }

src/app/sagas/initialize-app/load-config.ts

@@ -1,12 +1,11 @@
-import { all, AllEffect, call, put, PutEffect, select, SelectEffect } from 'redux-saga/effects';
+import { all, call, put, select } from 'redux-saga/effects';
-import { getAppConfig, getLocale } from '../../backend';
+import { AppConfig, getAppConfig, getLocale } from '../../backend';
-import { ConfigChunk, ConfigChunkReceived, TypeKeys } from 'checkout/actions';
+import { ConfigChunkReceived, TypeKeys } from 'checkout/actions';
 import { State } from 'checkout/state';
+import { Locale } from 'checkout/locale';
 
-type LoadConfigEffect = AllEffect | PutEffect<ConfigChunkReceived> | SelectEffect | ConfigChunk;
+export function* loadConfig(localeName: string) {
-
+    const [appConfig, locale]: [AppConfig, Locale] = yield all([call(getAppConfig), call(getLocale, localeName)]);
-export function* loadConfig(localeName: string): IterableIterator<LoadConfigEffect> {
-    const [appConfig, locale] = yield all([call(getAppConfig), call(getLocale, localeName)]);
     yield put({
         type: TypeKeys.CONFIG_CHUNK_RECEIVED,
         payload: {

src/app/sagas/payment/pay.spec.ts

@@ -5,7 +5,7 @@ import { State, EventsStatus, ResultFormInfo, ResultType } from 'checkout/state'
 import last from 'lodash-es/last';
 import { provideFromInvoiceEvent } from '../provide-modal';
 import { providePayment } from './provide-payment';
-import { cloneableGenerator } from 'redux-saga/utils';
+import { cloneableGenerator } from '@redux-saga/testing-utils';
 import { SagaIterator } from 'redux-saga';
 
 it('watchPayment should takeLatest pay', () => {

src/app/sagas/payment/pay.ts

@@ -25,7 +25,7 @@ type PayEffect = SelectEffect | CallEffect | PutEffect<PayPutEffect>;
 
 export function* pay(action: PaymentRequested): Iterator<PayEffect> {
     try {
-        const { config, model, amountInfo } = yield select((s: State) => ({
+        const { config, model, amountInfo }: State = yield select((s: State) => ({
             config: s.config,
             model: s.model,
             amountInfo: s.amountInfo

src/app/sagas/payment/provide-payment/create-invoice-with-template.ts

@@ -1,5 +1,5 @@
 import { call, CallEffect, put, PutEffect } from 'redux-saga/effects';
-import { InvoiceTemplate, createInvoiceWithTemplate as request } from 'checkout/backend';
+import { InvoiceTemplate, createInvoiceWithTemplate as request, InvoiceAndToken } from 'checkout/backend';
 import { InvoiceCreated, TypeKeys } from 'checkout/actions';
 import { AmountInfoState, AmountInfoStatus } from 'checkout/state';
 import { toMinorAmount } from 'checkout/utils';
@@ -27,7 +27,7 @@ export function* createInvoiceWithTemplate(
         metadata: template.metadata,
         currency: amountInfo.currencyCode
     };
-    const { invoice, invoiceAccessToken } = yield call(request, endpoint, token, template.id, params);
+    const { invoice, invoiceAccessToken }: InvoiceAndToken = yield call(request, endpoint, token, template.id, params);
     return yield put({
         type: TypeKeys.INVOICE_CREATED,
         payload: {

src/app/sagas/payment/provide-payment/get-payable-invoice.ts

@@ -46,7 +46,7 @@ export function* getPayableInvoice(
         return { invoice, invoiceAccessToken };
     }
     if (invoiceTemplate) {
-        return yield call(createInvoice, initConfig, endpoint, invoiceTemplate, amountInfo, formAmount);
+        return yield call(createInvoice, initConfig as any, endpoint, invoiceTemplate, amountInfo, formAmount);
     }
     throw { code: 'error.inconsistent.model' };
 }

src/app/sagas/payment/provide-payment/make-payment.spec.ts

@@ -1,5 +1,5 @@
 import { call, put } from 'redux-saga/effects';
-import { cloneableGenerator } from 'redux-saga/utils';
+import { cloneableGenerator } from '@redux-saga/testing-utils';
 import { SagaIterator } from 'redux-saga';
 import { makePayment } from './make-payment';
 import { getPayableInvoice } from './get-payable-invoice';
@@ -28,7 +28,7 @@ describe('makePayment', () => {
     const m = 'ModelStateMock' as any;
     const a = 'AmountInfoStateMock' as any;
     const v = { amount: 'amountMock', mail: 'mailMock' } as any;
-    const fn = () => [] as any;
+    const fn = (_token) => [] as any;
     const gen = cloneableGenerator(() => makePayment(c, m, a, v, fn) as SagaIterator)();
 
     it('should call getPayableInvoice', () => {
@@ -46,7 +46,7 @@ describe('makePayment', () => {
     it('should call createPayment', () => {
         const paymentResource = 'paymentResourceMock' as any;
         const actual = gen.next(paymentResource).value;
-        const expected = call(createPayment, capiEndpoint, token, id, v.email, paymentResource, initConfig);
+        const expected = call(createPayment, capiEndpoint, token, id, v.email);
         expect(actual.toString()).toEqual(expected.toString());
     });
 

src/app/sagas/payment/provide-payment/make-payment.ts

@@ -8,7 +8,7 @@ import { pollInvoiceEvents } from '../../poll-events';
 import { TypeKeys } from 'checkout/actions';
 import { SetAcceptedError } from 'checkout/actions/error-actions/set-accepted-error';
 
-type CreatePaymentResourceFn = () => Iterator<PaymentResource>;
+type CreatePaymentResourceFn = (invoiceAccessToken: any) => Iterator<PaymentResource>;
 
 export function* makePayment(
     config: Config,

src/app/sagas/payment/provide-payment/pay-with-apple-pay/begin-session.ts

@@ -39,11 +39,11 @@ const begin = (
     });
 
 export function* beginSession(config: Config, session: ApplePaySession): Iterator<CallEffect> {
-    const { applePayMerchantID, wrapperEndpoint } = config.appConfig;
+    const { applePayMerchantID, wrapperEndpoint, brandName } = config.appConfig;
     const payload = {
         merchantIdentifier: applePayMerchantID,
         domainName: location.hostname,
-        displayName: 'RBKmoney Checkout'
+        displayName: `${brandName} Checkout`
     };
     return yield call(begin, session, `${wrapperEndpoint}/applepay`, payload);
 }

src/app/sagas/payment/provide-payment/pay-with-apple-pay/pay-with-apple-pay.ts

@@ -31,7 +31,7 @@ export function* payWithApplePay(
         initConfig: { description, name },
         appConfig
     } = c;
-    const label = description || name || 'RBKmoney';
+    const label = description || name || appConfig.brandName;
     const paymentSystems = findPaymentSystems(m.paymentMethods);
     const session = createSession(label, a, paymentSystems, v.amount);
     const paymentToken = yield call(beginSession, c, session);

src/app/sagas/payment/provide-payment/pay-with-google-pay/get-payment-data.ts

@@ -2,23 +2,23 @@ import { call, CallEffect } from 'redux-saga/effects';
 import { logPrefix } from 'checkout/log-messages';
 import { AmountInfoState } from 'checkout/state';
 import { toDisplayAmount } from 'checkout/utils';
+import { AppConfig } from 'checkout/backend';
 
 const getPaymentDataRequest = (
-    merchantId: string,
+    config: AppConfig['googlePay'],
-    googlePayGatewayMerchantID: string,
     amountInfo: AmountInfoState,
     formAmount: string
 ): PaymentDataRequest => ({
-    merchantId,
+    merchantId: config.merchantID,
     merchantInfo: {
-        merchantName: 'RBKmoney',
+        merchantName: config.merchantName,
-        merchantOrigin: 'checkout.rbk.money'
+        merchantOrigin: config.merchantOrigin
     },
     paymentMethodTokenizationParameters: {
         tokenizationType: 'PAYMENT_GATEWAY',
         parameters: {
-            gateway: 'rbkmoney',
+            gateway: config.gateway,
-            gatewayMerchantId: googlePayGatewayMerchantID
+            gatewayMerchantId: config.merchantID
         }
     },
     allowedPaymentMethods: ['CARD', 'TOKENIZED_CARD'],
@@ -54,14 +54,13 @@ const handleLoadPaymentDataError = (e: PaymentsError) => {
 };
 
 export function* getPaymentData(
-    merchantId: string,
+    googlePayConfig: AppConfig['googlePay'],
-    googlePayGatewayMerchantID: string,
     amountInfo: AmountInfoState,
     formAmount: string
 ): Iterator<CallEffect | PaymentData> {
     try {
         const paymentClient = new google.payments.api.PaymentsClient({ environment: 'PRODUCTION' });
-        const request = getPaymentDataRequest(merchantId, googlePayGatewayMerchantID, amountInfo, formAmount);
+        const request = getPaymentDataRequest(googlePayConfig, amountInfo, formAmount);
         return yield call(loadPaymentData, paymentClient, request);
     } catch (e) {
         yield call(handleLoadPaymentDataError, e);

src/app/sagas/payment/provide-payment/pay-with-google-pay/pay-with-google-pay.spec.ts

@@ -2,16 +2,21 @@ import { payWithGooglePay, createPaymentResource } from './pay-with-google-pay';
 import { makePayment } from '../make-payment';
 import { call } from 'redux-saga/effects';
 import { getPaymentData } from './get-payment-data';
+import { AppConfig } from 'checkout/backend';
 
 describe('payWithGooglePay', () => {
     const endpoint = 'http://test.endpoint';
-    const googlePayMerchantID = 'googlePayMerchantIDMock' as any;
-    const googlePayGatewayMerchantID = 'googlePayGatewayMerchantIDMock' as any;
     const locale = 'localeMock' as any;
+    const googlePayConfig: AppConfig['googlePay'] = {
+        merchantName: 'merchantName',
+        merchantID: 'googlePayMerchantIDMock',
+        gatewayMerchantID: 'googlePayGatewayMerchantIDMock',
+        gateway: 'gateway',
+        merchantOrigin: 'merchantOrigin'
+    };
     const appConfig = {
         capiEndpoint: endpoint,
-        googlePayMerchantID,
+        googlePay: googlePayConfig
-        googlePayGatewayMerchantID
     } as any;
     const c = { appConfig, initConfig: { locale } } as any;
     const m = 'ModelStateMock' as any;
@@ -21,13 +26,13 @@ describe('payWithGooglePay', () => {
 
     it('should call getPaymentData', () => {
         const actual = iterator.next().value;
-        const expected = call(getPaymentData, googlePayMerchantID, googlePayGatewayMerchantID, a, v.amount);
+        const expected = call(getPaymentData, googlePayConfig, a, v.amount);
         expect(actual).toEqual(expected);
     });
 
     it('should call makePayment', () => {
         const paymentData = 'paymentDataMock' as any;
-        const fn = createPaymentResource(c.appConfig.capiEndpoint, googlePayMerchantID, paymentData);
+        const fn = createPaymentResource(c.appConfig.capiEndpoint, googlePayConfig.merchantID, paymentData);
         const actual = iterator.next(paymentData).value;
         const expected = call(makePayment, c, m, v, a, fn);
         expect(actual.toString()).toEqual(expected.toString());

src/app/sagas/payment/provide-payment/pay-with-google-pay/pay-with-google-pay.ts

@@ -15,9 +15,9 @@ export function* payWithGooglePay(
     v: TokenProviderFormValues
 ): Iterator<CallEffect> {
     const {
-        appConfig: { googlePayMerchantID, googlePayGatewayMerchantID, capiEndpoint }
+        appConfig: { capiEndpoint, googlePay }
     } = c;
-    const paymentData = yield call(getPaymentData, googlePayMerchantID, googlePayGatewayMerchantID, a, v.amount);
+    const paymentData = yield call(getPaymentData, googlePay, a, v.amount);
-    const fn = createPaymentResource(capiEndpoint, googlePayGatewayMerchantID, paymentData);
+    const fn = createPaymentResource(capiEndpoint, googlePay.gatewayMerchantID, paymentData);
     yield call(makePayment, c, m, v, a, fn);
 }

src/app/sagas/payment/provide-payment/pay-with-yandex-pay/create-ya-payment.ts

@@ -1,6 +1,6 @@
-import { call, CallEffect } from 'redux-saga/effects';
+import { call } from 'redux-saga/effects';
 
-export function* createYaPayment(paymentData: YaPay.PaymentData): Iterator<CallEffect | YaPay.Payment> {
+export function* createYaPayment(paymentData: YaPay.PaymentData) {
     try {
         return yield call(YaPay.createPayment, paymentData);
     } catch (error) {

src/app/sagas/payment/provide-payment/pay-with-yandex-pay/pay-with-yandex-pay.ts

@@ -21,14 +21,19 @@ export function* payWithYandexPay(
     v: TokenProviderFormValues
 ): Iterator<SelectEffect | CallEffect> {
     const {
-        appConfig: { yandexPayMerchantID, yandexPayGatewayMerchantID, capiEndpoint }
+        appConfig: { yandexPay, capiEndpoint }
     } = c;
     const yaOrder = getYaPaymentOrder(a, v.amount);
-    const yaPaymentData = getYaPayPaymentData(yandexPayMerchantID, yandexPayGatewayMerchantID, yaOrder);
+    const yaPaymentData = getYaPayPaymentData(
-    const yaPayment = yield call(createYaPayment, yaPaymentData);
+        yandexPay.merchantID,
+        yandexPay.merchantName,
+        yandexPay.gatewayMerchantID,
+        yaOrder
+    );
+    const yaPayment: YaPay.Payment = yield call(createYaPayment, yaPaymentData);
     const yaProcessEvent = yield call(processYaCheckout, yaPayment);
     try {
-        const fn = createPaymentResource(capiEndpoint, yandexPayGatewayMerchantID, yaProcessEvent);
+        const fn = createPaymentResource(capiEndpoint, yandexPay.gatewayMerchantID, yaProcessEvent);
         yield call(makePayment, c, m, v, a, fn);
     } catch (error) {
         yaPayment.complete(YaPay.CompleteReason.Error, null);

src/app/sagas/poll-events/poll-customer-events.ts

@@ -1,6 +1,5 @@
 import last from 'lodash-es/last';
-import { delay } from 'redux-saga';
+import { call, put, race, select, CallEffect, PutEffect, SelectEffect, delay } from 'redux-saga/effects';
-import { call, put, race, select, CallEffect, PutEffect, RaceEffect, SelectEffect } from 'redux-saga/effects';
 import { CustomerChangeType, CustomerEvent, getCustomerEvents } from 'checkout/backend';
 import { SetEventsAction, TypeKeys } from 'checkout/actions';
 import { State } from 'checkout/state';
@@ -34,7 +33,7 @@ function* poll(
     let lastEventID = yield call(getLastEventID);
     let lastEvent = null;
     while (!isStop(lastEvent)) {
-        yield call(delay, 1000);
+        yield delay(1000);
         const chunk: CustomerEvent[] = yield call(getCustomerEvents, endpoint, token, invoiceID, 5, lastEventID);
         yield put({
             type: TypeKeys.EVENTS_POLLING,
@@ -46,12 +45,8 @@ function* poll(
     return lastEvent;
 }
 
-export function* pollCustomerEvents(
+export function* pollCustomerEvents(endpoint: string, token: string, invoiceID: string) {
-    endpoint: string,
+    const [result] = yield race([call(poll, endpoint, token, invoiceID), delay(60000)]);
-    token: string,
-    invoiceID: string
-): Iterator<RaceEffect | PutEffect<SetEventsAction>> {
-    const [result] = yield race<any>([call(poll, endpoint, token, invoiceID), call(delay, 60000)]);
     if (result) {
         return yield put({
             type: TypeKeys.EVENTS_POLLED

src/app/sagas/poll-events/poll-invoice-events.ts

@@ -1,6 +1,5 @@
 import last from 'lodash-es/last';
-import { delay } from 'redux-saga';
+import { call, put, race, select, delay } from 'redux-saga/effects';
-import { call, put, race, select, CallEffect, PutEffect, RaceEffect, SelectEffect } from 'redux-saga/effects';
 import { InvoiceEvent, getInvoiceEvents, InvoiceChangeType, InteractionType } from 'checkout/backend';
 import { SetEventsAction, TypeKeys } from 'checkout/actions';
 import { State } from 'checkout/state';
@@ -25,20 +24,15 @@ const isStop = (event: InvoiceEvent): boolean => {
     }
 };
 
-function* getLastEventID(): Iterator<SelectEffect | number> {
+function* getLastEventID() {
     return yield select(({ events: { events: events } }: State) => (events && events.length > 0 ? last(events).id : 0));
 }
 
-function* poll(
+function* poll(endpoint: string, token: string, invoiceID: string, interval = 1000) {
-    endpoint: string,
-    token: string,
-    invoiceID: string,
-    interval = 1000
-): Iterator<CallEffect | InvoiceEvent | PutEffect<SetEventsAction> | boolean> {
     let lastEventID = yield call(getLastEventID);
     let lastEvent = null;
     while (!isStop(lastEvent)) {
-        yield call(delay, interval);
+        yield delay(interval);
         let chunk: InvoiceEvent[] = [];
         try {
             chunk = yield call(getInvoiceEvents, endpoint, token, invoiceID, 5, lastEventID);
@@ -67,23 +61,19 @@ const POLLING_INTEVAL_MS = 1000;
 const EVENTS_WAIT_POLLING_TIME_MS = 10 * 60 * 1000;
 const EVENTS_WAIT_INTERVAL_MS = 5 * 1000;
 
-export function* pollInvoiceEvents(
+export function* pollInvoiceEvents(endpoint: string, token: string, invoiceID: string) {
-    endpoint: string,
-    token: string,
-    invoiceID: string
-): Iterator<RaceEffect | PutEffect<SetEventsAction> | CallEffect> {
     let result: InvoiceEvent;
     for (let i = 1; !result && i < 6; i += 1) {
         [result] = yield race<any>([
             call(poll, endpoint, token, invoiceID),
-            call(delay, POLLING_TIME_MS * i, POLLING_INTEVAL_MS * 2 ** i)
+            delay(POLLING_TIME_MS * i, POLLING_INTEVAL_MS * 2 ** i)
         ]);
     }
     if (isEventToWait(result)) {
         yield call(provideFromInvoiceEvent, result);
-        [result] = yield race<any>([
+        [result] = yield race([
             call(poll, endpoint, token, invoiceID, EVENTS_WAIT_INTERVAL_MS),
-            call(delay, EVENTS_WAIT_POLLING_TIME_MS)
+            delay(EVENTS_WAIT_POLLING_TIME_MS)
         ]);
     }
     if (result) {

src/app/themes/coral.ts

@@ -12,7 +12,6 @@ const theme: Theme = {
     color: {
         neutral,
         primary: {
-            0.1: '#ff8454',
             1: '#d1658e',
             1.1: '#b85c76',
             1.2: '#9b4f69'

src/app/themes/eastern.ts

@@ -0,0 +1,59 @@
+import { css } from 'checkout/styled-components';
+import { ThemeName } from './theme-name';
+import { Theme } from './theme';
+import { error, neutral, warning } from './common-palettes';
+
+const palette = {
+    Eastern: '#2596A1',
+    EasternBlue: '#28acba',
+    Emarald: '#06AA87',
+    MonteCarlo: '#7cceb7',
+    Elephant: '#0F253D',
+    Roman: '#DC5A53',
+    White: '#fff'
+};
+
+const theme: Theme = {
+    name: ThemeName.eastern,
+    color: {
+        neutral,
+        primary: {
+            1: palette.Eastern, // Payment methods list hover, pay button
+            1.1: palette.EasternBlue, // Button hover
+            1.2: palette.EasternBlue // Button on click, chevron hover
+        },
+        secondary: {
+            0.9: palette.Eastern, // Payment methods list
+            1: palette.Eastern, // Unused
+            1.1: palette.EasternBlue // All payments method hover
+        },
+        error,
+        warning,
+        info: {},
+        success: {
+            1: palette.Emarald
+        },
+        focus: {
+            1: palette.Eastern
+        },
+        font: {
+            infoBlock: palette.White
+        }
+    },
+    gradients: {
+        form: css`linear-gradient(45deg, ${palette.Eastern} -20%, ${palette.Emarald} 90%)`,
+        loader: [
+            [palette.MonteCarlo, '0%'],
+            [palette.Eastern, '100%']
+        ]
+    },
+    font: {
+        family: "'Roboto', sans-serif"
+    },
+    background: {
+        image: false,
+        color: css`linear-gradient(225deg, ${palette.Elephant} 0%, ${palette.Roman} 50%, ${palette.Elephant} 100%)`
+    }
+};
+
+export default theme;

src/app/themes/index.ts

@@ -4,8 +4,9 @@ import main from './main';
 import coral from './coral';
 import persianGreen from './persian-green';
 import solitude from './solitude';
+import eastern from './eastern';
 
-const themes = [main, coral, persianGreen, solitude];
+const themes = [main, coral, persianGreen, solitude, eastern];
 
 export const DEFAULT_THEME = main;
 

src/app/themes/main.ts

@@ -12,7 +12,6 @@ const theme: Theme = {
     color: {
         neutral,
         primary: {
-            0.1: '#c3f0dd',
             1: '#38cd8f',
             1.1: '#30b37c',
             1.2: '#29996a'

src/app/themes/persian-green.ts

@@ -18,7 +18,6 @@ const theme: Theme = {
     color: {
         neutral,
         primary: {
-            0.1: palette.PersianGreen,
             1: palette.PersianGreen,
             1.1: palette.Pelorous,
             1.2: palette.Teal

src/app/themes/solitude.ts

@@ -16,7 +16,6 @@ const theme: Theme = {
     color: {
         neutral,
         primary: {
-            0.1: palette.Black,
             1: palette.Black,
             1.1: palette.Black,
             1.2: palette.Black

src/app/themes/theme-name.ts

@@ -2,5 +2,6 @@ export enum ThemeName {
     main = 'main',
     coral = 'coral',
     persianGreen = 'persianGreen',
-    solitude = 'solitude'
+    solitude = 'solitude',
+    eastern = 'eastern'
 }

src/app/themes/theme.ts

@@ -14,7 +14,6 @@ export interface Theme {
             1: string;
         };
         primary: {
-            0.1: string;
             1: string;
             1.1: string;
             1.2: string;

src/app/utils/get-ya-pay-payment-data.ts

@@ -10,6 +10,7 @@ enum AllowedCardNetwork {
 
 export const getYaPayPaymentData = (
     merchantID: string,
+    merchantName: string,
     gatewayMerchantId: string,
     order?: YaPay.Order
 ): YaPay.PaymentData => ({
@@ -19,7 +20,7 @@ export const getYaPayPaymentData = (
     currencyCode: YaPay.CurrencyCode.Rub,
     merchant: {
         id: merchantID,
-        name: 'RBKmoney'
+        name: merchantName
     },
     order: {
         ...(order || {}),
@@ -28,7 +29,7 @@ export const getYaPayPaymentData = (
     paymentMethods: [
         {
             type: YaPay.PaymentMethodType.Card,
-            gateway: 'rbkmoney',
+            gateway: gatewayMerchantId,
             gatewayMerchantId,
             allowedAuthMethods: [YaPay.AllowedAuthMethod.PanOnly, YaPay.AllowedAuthMethod.CloudToken],
             allowedCardNetworks: [

src/appConfig.json

@@ -2,13 +2,22 @@
     "capiEndpoint": "<capi endpoint>",
     "wrapperEndpoint": "<wrapper endpoint>",
     "applePayMerchantID": "<apple pay merchant id>",
-    "googlePayMerchantID": "<google pay merchant id>",
-    "googlePayGatewayMerchantID": "<google pay gateway merchant id>",
     "samsungPayMerchantName": "<samsung pay merchant name>",
     "samsungPayServiceID": "<samsung pay service id>",
     "brandless": false,
     "fixedTheme": "",
-    "yandexPayMerchantID": "<yandex pay merchant id>",
+    "brandName": "Vality",
-    "yandexPayGatewayMerchantID": "<yandex pay gateway merchant id>",
+    "yandexPay": {
+        "merchantName": "Vality",
+        "merchantID": "00000000-0000-0000-0000-000000000000",
+        "gatewayMerchantID": "vality"
+    },
+    "googlePay": {
+        "merchantName": "Vality",
+        "merchantID": "12345678901234567890",
+        "gateway": "vality",
+        "gatewayMerchantID": "vality",
+        "merchantOrigin": "vality.dev/checkout"
+    },
     "sentryDsn": "<Sentry DSN: https://sentry.io/settings/<company>/projects/<project>/keys/>"
 }

src/assets/logo.svg

@@ -0,0 +1,7 @@
+<svg width="107" height="48" viewBox="0 0 107 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M28.216 11.8L17.308 37H11.548L0.676 11.8H6.976L14.644 29.8L22.42 11.8H28.216ZM36.2946 17.344C39.2946 17.344 41.5986 18.064 43.2066 19.504C44.8146 20.92 45.6186 23.068 45.6186 25.948V37H40.3626V34.588C39.3066 36.388 37.3386 37.288 34.4586 37.288C32.9706 37.288 31.6746 37.036 30.5706 36.532C29.4906 36.028 28.6626 35.332 28.0866 34.444C27.5106 33.556 27.2226 32.548 27.2226 31.42C27.2226 29.62 27.8946 28.204 29.2386 27.172C30.6066 26.14 32.7066 25.624 35.5386 25.624H40.0026C40.0026 24.4 39.6306 23.464 38.8866 22.816C38.1426 22.144 37.0266 21.808 35.5386 21.808C34.5066 21.808 33.4866 21.976 32.4786 22.312C31.4946 22.624 30.6546 23.056 29.9586 23.608L27.9426 19.684C28.9986 18.94 30.2586 18.364 31.7226 17.956C33.2106 17.548 34.7346 17.344 36.2946 17.344ZM35.8626 33.508C36.8226 33.508 37.6746 33.292 38.4186 32.86C39.1626 32.404 39.6906 31.744 40.0026 30.88V28.9H36.1506C33.8466 28.9 32.6946 29.656 32.6946 31.168C32.6946 31.888 32.9706 32.464 33.5226 32.896C34.0986 33.304 34.8786 33.508 35.8626 33.508ZM50.7014 10.288H56.3174V37H50.7014V10.288ZM61.5295 17.632H67.1455V37H61.5295V17.632ZM64.3375 14.932C63.3055 14.932 62.4655 14.632 61.8175 14.032C61.1695 13.432 60.8455 12.688 60.8455 11.8C60.8455 10.912 61.1695 10.168 61.8175 9.568C62.4655 8.968 63.3055 8.668 64.3375 8.668C65.3695 8.668 66.2095 8.956 66.8575 9.532C67.5055 10.108 67.8295 10.828 67.8295 11.692C67.8295 12.628 67.5055 13.408 66.8575 14.032C66.2095 14.632 65.3695 14.932 64.3375 14.932ZM84.8496 36.064C84.2976 36.472 83.6136 36.784 82.7976 37C82.0056 37.192 81.1656 37.288 80.2776 37.288C77.9736 37.288 76.1856 36.7 74.9136 35.524C73.6656 34.348 73.0416 32.62 73.0416 30.34V22.384H70.0536V18.064H73.0416V13.348H78.6576V18.064H83.4816V22.384H78.6576V30.268C78.6576 31.084 78.8616 31.72 79.2696 32.176C79.7016 32.608 80.3016 32.824 81.0696 32.824C81.9576 32.824 82.7136 32.584 83.3376 32.104L84.8496 36.064ZM106.875 17.632L98.1266 38.188C97.2386 40.42 96.1346 41.992 94.8146 42.904C93.5186 43.816 91.9466 44.272 90.0986 44.272C89.0906 44.272 88.0946 44.116 87.1106 43.804C86.1266 43.492 85.3226 43.06 84.6986 42.508L86.7506 38.512C87.1826 38.896 87.6746 39.196 88.2266 39.412C88.8026 39.628 89.3666 39.736 89.9186 39.736C90.6866 39.736 91.3106 39.544 91.7906 39.16C92.2706 38.8 92.7026 38.188 93.0866 37.324L93.1586 37.144L84.7706 17.632H90.5666L96.0026 30.772L101.475 17.632H106.875Z"
+        fill="white"
+        fill-opacity="0.84"
+    />
+</svg>

src/environment.ts

@@ -1,7 +1,7 @@
 import { Initializer } from './initializer/initializer';
 
 export interface Environment extends Window {
-    RbkmoneyCheckout?: Configurator;
+    ValityCheckout?: Configurator;
     ApplePaySession?: ApplePaySession;
     PaymentRequest?: PaymentRequest;
     google?: any;
@@ -12,13 +12,13 @@ export interface Configurator {
     configure: (userConfig: any) => Initializer;
 }
 
-export const environment = window as Environment;
+export const environment = (window as any) as Environment;
 
 export const isApplePayAvailable = (): boolean => {
     try {
         return environment.ApplePaySession && ApplePaySession.canMakePayments();
     } catch (e) {
-        console.warn('[RbkmoneyCheckout] apple pay availability', e);
+        console.warn('[ValityCheckout] apple pay availability', e);
         return false;
     }
 };