Dv 3380 (#12)

* dv-3380

* dv-3380

Author: danie1-parker

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+- Payment form design changes DV-3380
+- Added notification settings in the store DV-3383
 - Changed the receipt screen in the payment form DV-3364
 - Added icons of new coins DV-3348
 

apps/dv-admin/src/services/api/projects.ts

@@ -3,6 +3,7 @@ import type {
 	IStoreApiKeyResponse,
 	IStoreRequest,
 	IStoreResponse,
+	IStoreSettingsResponse,
 	IStoreWebhooksResponse,
 	IStoreWebhookTestRequest,
 	IStoreWebhookTestResponse
@@ -94,3 +95,13 @@ export const getApiCurrenciesProject = async (uuid: string): Promise<BlockchainT
 export const putApiCurrenciesProject = async (uuid: string, body: ICurrencyRequest) => {
 	await api.put(`/dv-admin/store/${uuid}/currencies`, body);
 };
+
+export const getApiStoreSettingList = async (uuid: string): Promise<IStoreSettingsResponse[]> => {
+	const resp = await api.get(`/dv-admin/store-setting/list/${uuid}`);
+	return resp.data.data;
+};
+
+export const postApiStoreSetting = async (uuid: string, body: { name: string, value: string }) => {
+	await api.post(`/dv-admin/store-setting/${uuid}`, body);
+};
+

apps/dv-admin/src/stores/projects/index.ts

@@ -4,12 +4,17 @@ import {
 	getApiProjects,
 	getApiStoreArchivedList,
 	getApiStoreSecret,
+	getApiStoreSettingList,
 	postApiStoreArchive,
 	postApiStoreSecret,
 	postApiStoreUnarchive,
 	putApiOneProject
 } from "@dv-admin/services/api/projects";
-import type { ICurrencyStore, IStoreResponse } from "@dv-admin/utils/types/api/apiGo";
+import type {
+	ICurrencyStore,
+	IStoreResponse,
+	IStoreSettingsList,
+} from "@dv-admin/utils/types/api/apiGo";
 import { useNotifications } from "@shared/utils/composables/useNotifications";
 import { defineStore, storeToRefs } from "pinia";
 import { ref } from "vue";
@@ -42,6 +47,7 @@ export const useProjectsStore = defineStore("projects", () => {
 	const selectAllCurrenciesProject = ref<boolean>(false);
 	const selectedProject = ref<string | null>(null);
 	const archivedProjects = ref<IStoreResponse[]>([]);
+	const storeSettingList = ref<IStoreSettingsList[]>([]);
 
 	// CRUD for project information
 	const getProjects = async () => {
@@ -97,7 +103,9 @@ export const useProjectsStore = defineStore("projects", () => {
 				getOneProjects(uuid),
 				getKeyProject(uuid),
 				getWebhooksProject(uuid),
-				getStoreSecret(uuid)
+				getStoreSecret(uuid),
+				getStoreSettingList(uuid),
+				// postApiStoreSetting(uuid, { name: "external_wallet_email_notification", value: "disabled" }),
 			]);
 		} catch (error: any) {
 			throw error;
@@ -113,6 +121,16 @@ export const useProjectsStore = defineStore("projects", () => {
 			throw error;
 		}
 	};
+	const getStoreSettingList = async (uuid: string) => {
+		try {
+			const data = await getApiStoreSettingList(uuid);
+			if (data) {
+				storeSettingList.value = data.map(item => ({ ...item, value: item.value === "enabled" }));
+			}
+		} catch (error: any) {
+			throw error;
+		}
+	};
 	const postStoreSecret = async (uuid: string, message: string) => {
 		try {
 			isLoadingGenerateSecretKey.value = true;
@@ -192,6 +210,7 @@ export const useProjectsStore = defineStore("projects", () => {
 		archivedProjects,
 		checkedCurrenciesProject,
 		selectAllCurrenciesProject,
+		storeSettingList,
 
 		postStoreSecret,
 		postStoreArchive,
@@ -200,6 +219,7 @@ export const useProjectsStore = defineStore("projects", () => {
 		getProjects,
 		getAllInfoProjects,
 		getOneProjects,
+		getStoreSettingList,
 		putOneProject,
 		getCurrenciesProject,
 		resetCurrentProject

apps/dv-admin/src/utils/constants/projects/index.ts

@@ -0,0 +1,9 @@
+export const STORE_SETTING_LABELS: Record<string, string> = {
+	user_crypto_receipt_email_notification: "Sending a check",
+	external_wallet_email_notification: "Sending a letter with wallets",
+};
+
+export const STORE_SETTING_TOOLTIPS: Record<string, string> = {
+	user_crypto_receipt_email_notification: "After payment, the user will be sent a receipt by email",
+	external_wallet_email_notification: "After the user has selected the currency and chain on the payment form, an email with a list of wallets will be sent to them",
+};

apps/dv-admin/src/utils/plugins/i18n/locales/en.json

@@ -4,7 +4,12 @@
 		"h": "h",
 		"s": "s"
 	},
-	"You do not have any wallets specified in the withdrawal rules": "You do not have any wallets specified in the withdrawal rules",
+    "Configuration": "Configuration",
+    "Sending a check": "Sending a check",
+    "Sending a letter with wallets": "Sending a letter with wallets",
+    "After payment, the user will be sent a receipt by email": "After payment, the user will be sent a receipt by email",
+    "After the user has selected the currency and chain on the payment form, an email with a list of wallets will be sent to them": "After the user has selected the currency and chain on the payment form, an email with a list of wallets will be sent to them",
+    "You do not have any wallets specified in the withdrawal rules": "You do not have any wallets specified in the withdrawal rules",
 	"Add addresses to withdrawal rules": "Add addresses to withdrawal rules",
 	"Remove address from address book and withdrawal rules": "Remove address from address book and withdrawal rules",
 	"Delete address from address book only": "Delete address from address book only",

apps/dv-admin/src/utils/plugins/i18n/locales/ru.json

@@ -4,6 +4,11 @@
 		"h": "ч",
 		"s": "сек"
 	},
+	"Configuration": "Конфигурация",
+	"Sending a check": "Отправка чека",
+	"Sending a letter with wallets": "Отправка письма с кошельками",
+	"After payment, the user will be sent a receipt by email": "После оплаты, пользователю будет отправлен чек на почту",
+	"After the user has selected the currency and chain on the payment form, an email with a list of wallets will be sent to them": "После того, как пользователь на платежной форме выбрал валюту и блокчейн, ему на почту будет отправлено письмо со списком кошельков",
 	"You do not have any wallets specified in the withdrawal rules": "У вас не задан ни один кошелек в правилах вывода",
 	"Add addresses to withdrawal rules": "Добавить адреса в правила вывода",
 	"Remove address from address book and withdrawal rules": "Удалить адрес из адресной книги и правил вывода",

apps/dv-admin/src/utils/types/api/apiGo.ts

@@ -109,6 +109,19 @@ export interface IStoreApiKeyResponse {
 	created_at: string | null;
 }
 
+export interface IStoreGeneralSettingsList {
+	name: string
+	is_editable: boolean
+	two_factor_verification_required: boolean
+	available_values: string[]
+}
+export interface IStoreSettingsResponse extends IStoreGeneralSettingsList {
+	value: string
+}
+export interface IStoreSettingsList extends IStoreGeneralSettingsList {
+	value: boolean
+}
+
 export interface IStoreWebhooksResponse {
 	id?: string;
 	label: string;

apps/dv-admin/src/views/projects/edit/advancedSettings/AdvancedSettingsView.vue

@@ -16,18 +16,20 @@
 	import TooltipHelper from "@dv-admin/components/ui/tooltipHelper/TooltipHelper.vue";
 	import { computed, ref } from "vue";
 	import { useI18n } from "vue-i18n";
-	import { putApiCurrenciesProject } from "@dv-admin/services/api/projects.ts";
+	import { postApiStoreSetting, putApiCurrenciesProject } from "@dv-admin/services/api/projects.ts";
 	import { useGeneralStore } from "@dv-admin/stores/general";
 	import { UiForm } from "@dv.net/ui-kit";
 	import type { UiFormRules } from "@dv.net/ui-kit/dist/components/UiForm/types";
 	import { isValidUrl } from "@shared/utils/helpers/general.ts";
+	import { STORE_SETTING_LABELS, STORE_SETTING_TOOLTIPS } from "@dv-admin/utils/constants/projects";
 
 	const {
 		currentProject,
 		currenciesProject,
 		isLoadingEditProject,
 		checkedCurrenciesProject,
-		selectAllCurrenciesProject
+		selectAllCurrenciesProject,
+		storeSettingList
 	} = storeToRefs(useProjectsStore());
 	const { dictionary } = storeToRefs(useGeneralStore());
 	const { putOneProject, getCurrenciesProject } = useProjectsStore();
@@ -82,6 +84,10 @@
 		if (!currentProject.value) return;
 		if (!formRef.value || !(await formRef.value.validate())) return;
 		await putApiCurrenciesProject(uuid, { currency_ids: checkedCurrenciesProject.value });
+		await Promise.all(
+			storeSettingList.value
+				.map(({ name, value }) => postApiStoreSetting(uuid, { name, value: value ? "enabled" : "disabled" }))
+		)
 		await putOneProject(t("The project has been saved"));
 		await getCurrenciesProject(uuid);
 	};
@@ -129,13 +135,26 @@
 			</div>
 		</block-section>
 		<block-section class="store" mode="grey">
-			<div class="row">
-				<h4 class="row__title">{{ $t("Store status") }}</h4>
-				<div class="row__actions">
-					<p class="row__actions-text">
-						{{ $t("When you turn off a store, you also stop accepting payments for all invoices for that store") }}
-					</p>
-					<ui-switch v-model="currentProject.status" :text="$t('Store enabled')" />
+			<div class="configuration">
+				<h2 class="global-title-h3">{{ $t("Configuration") }}</h2>
+				<div class="configuration__list">
+					<div class="configuration__item">
+						<ui-switch v-model="currentProject.status" :text="$t('Store status')" />
+						<tooltip-helper
+							:title="$t('Store status')"
+							:text="$t('When you turn off a store, you also stop accepting payments for all invoices for that store')"
+						/>
+					</div>
+					<div v-for="item in storeSettingList" :key="item.name" class="configuration__item">
+						<ui-switch
+							v-model="item.value"
+							:text="item.name in STORE_SETTING_LABELS ? $t(STORE_SETTING_LABELS[item.name]) : item.name"
+						/>
+						<tooltip-helper
+							:title="item.name in STORE_SETTING_LABELS ? $t(STORE_SETTING_LABELS[item.name]) : item.name"
+							:text="item.name in STORE_SETTING_TOOLTIPS ? $t(STORE_SETTING_TOOLTIPS[item.name]) : item.name"
+						/>
+					</div>
 				</div>
 			</div>
 			<div class="row" v-if="currenciesProject?.length">
@@ -303,5 +322,30 @@
 				}
 			}
 		}
+		.configuration {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			border-bottom: 1px solid #e1e8f1;
+			padding-bottom: 24px;
+			&__list {
+				display: flex;
+				align-items: center;
+				gap: 24px;
+			}
+			&__item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				padding-right: 24px;
+				border-right: 1px solid $grey;
+				&:deep(.ui-switch__label) > p {
+					font-size: 14px;
+				}
+				&:last-child {
+					border-right: unset;
+				}
+			}
+		}
 	}
 </style>

apps/pay/src/components/ui/loader/Loader.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="loader"></div>
+</template>
+
+<style scoped lang="scss">
+	.loader {
+		width: 44px;
+		aspect-ratio: 1;
+		display: grid;
+		border-radius: 50%;
+		background:
+			linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
+			linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
+		background-repeat: no-repeat;
+		animation: l23 1s infinite steps(12);
+		@include mediamax(480) {
+			width: 32px;
+		}
+	}
+	.loader::before,
+	.loader::after {
+		content: "";
+		grid-area: 1/1;
+		border-radius: 50%;
+		background: inherit;
+		opacity: 0.915;
+		transform: rotate(30deg);
+	}
+	.loader::after {
+		opacity: 0.83;
+		transform: rotate(60deg);
+	}
+	@keyframes l23 {
+		100% {transform: rotate(1turn)}
+	}
+</style>
+<script setup lang="ts">
+</script>