feat: Use shadcn/ui dialog for monobank-set-token

letehaha · Sep 21, 2024 · 90f9f8a · 90f9f8a
1 parent ff1df74
commit 90f9f8a
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 77 deletions.
diff --git a/src/components/modals/monobank-set-token.vue → ...components/dialogs/monobank-set-token.vue b/src/components/modals/monobank-set-token.vue → ...components/dialogs/monobank-set-token.vue
@@ -1,52 +1,14 @@
-<template>
-  <Card
-    class="py-12 px-8 w-full max-w-[600px] relative rounded-xl"
-    data-cy="monobank-set-token-modal"
-  >
-    <Button
-      type="button"
-      class="absolute top-3 right-3"
-      theme="light-dark"
-      is-icon
-      @click="$emit(MODAL_EVENTS.closeModal)"
-    >
-      X
-    </Button>
-
-    <p class="my-5">
-      Please visit
-      <a href="https://api.monobank.ua/" class="text-primary">https://api.monobank.ua/</a>
-      and follow all the instructions. Paste the API token from Monobank in the field below
-    </p>
-    <div class="my-5">
-      <input-field
-        v-model="form.token"
-        name="token"
-        label="API Token"
-        :error-message="getFieldErrorMessage('form.token')"
-      />
-    </div>
-    <div class="flex justify-center">
-      <Button type="submit" :disabled="isLoading" @click="submit">
-        <template v-if="isUpdate"> Update token </template>
-        <template v-else> Pair account </template>
-      </Button>
-    </div>
-  </Card>
-</template>
-
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { API_ERROR_CODES } from "shared-types";
+import * as Dialog from "@/components/lib/ui/dialog";
 import { useBanksMonobankStore, useCurrenciesStore } from "@/stores";
 import { MONOBANK_API_TOKEN_LENGTH } from "@/common/const";
 import { ApiErrorResponseError } from "@/js/errors";
 import { useFormValidation } from "@/composable";
 import { required, minLength } from "@/js/helpers/validators";
 import InputField from "@/components/fields/input-field.vue";
 import Button from "@/components/common/ui-button.vue";
-import { EVENTS as MODAL_EVENTS } from "@/components/modal-center/ui-modal.vue";
-import { Card } from "@/components/lib/ui/card";
 
 import { useNotificationCenter, NotificationType } from "@/components/notification-center";
 
@@ -63,11 +25,12 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits([MODAL_EVENTS.closeModal]);
+const emit = defineEmits(["set"]);
 const monobankStore = useBanksMonobankStore();
 const currenciesStore = useCurrenciesStore();
 const { addNotification } = useNotificationCenter();
 
+const isDialogOpen = ref(false);
 const isLoading = ref(false);
 const form = reactive({ token: "" });
 const { isFormValid, getFieldErrorMessage } = useFormValidation(
@@ -102,12 +65,13 @@ const submit = async () => {
 
     await currenciesStore.loadCurrencies();
 
-    emit(MODAL_EVENTS.closeModal);
-
     addNotification({
       text: "Paired",
       type: NotificationType.success,
     });
+
+    isDialogOpen.value = false;
+    emit("set");
   } catch (e) {
     if (e instanceof ApiErrorResponseError) {
       if (e.data.code === API_ERROR_CODES.monobankUserAlreadyConnected) {
@@ -129,3 +93,44 @@ const submit = async () => {
   }
 };
 </script>
+
+<template>
+  <Dialog.Dialog v-model:open="isDialogOpen">
+    <Dialog.DialogTrigger as-child>
+      <slot />
+    </Dialog.DialogTrigger>
+    <Dialog.DialogContent
+      class="sm:max-w-md max-h-[90dvh] grid-rows-[auto_auto_minmax(0,1fr)_auto]"
+    >
+      <Dialog.DialogHeader class="mb-10">
+        <Dialog.DialogTitle>
+          {{ isUpdate ? "Update your Monobank API Token" : "Set Monobank API Token" }}
+        </Dialog.DialogTitle>
+      </Dialog.DialogHeader>
+
+      <form class="grid gap-6" data-cy="monobank-set-token-modal" @submit.prevent="submit">
+        <p>
+          Please visit
+          <a href="https://api.monobank.ua/" class="text-primary">https://api.monobank.ua/</a>
+          and follow all the instructions. Paste the API token from Monobank in the field below
+        </p>
+        <div>
+          <input-field
+            v-model="form.token"
+            name="token"
+            label="API Token"
+            placeholder="uBrAYwEg6H..."
+            :error-message="getFieldErrorMessage('form.token')"
+          />
+        </div>
+
+        <div class="flex justify-center">
+          <Button type="submit" :disabled="isLoading">
+            <template v-if="isUpdate"> Update token </template>
+            <template v-else> Pair account </template>
+          </Button>
+        </div>
+      </form>
+    </Dialog.DialogContent>
+  </Dialog.Dialog>
+</template>
diff --git a/src/components/modal-center/index.ts b/src/components/modal-center/index.ts
@@ -22,19 +22,12 @@ interface CreateRecordModal extends CommonModalDataProps {
 interface MonobankTxFormModal extends CommonModalDataProps {
   type: MODAL_TYPES.monobankTxForm;
 }
-interface MonobankSetTokenModal extends CommonModalDataProps {
-  type: MODAL_TYPES.monobankSetToken;
-}
 interface RecordListModal extends CommonModalDataProps {
   type: MODAL_TYPES.recordList;
   data: RecordListModalProps;
 }
 
-export type ModalDataProp =
-  | RecordListModal
-  | CreateRecordModal
-  | MonobankTxFormModal
-  | MonobankSetTokenModal;
+export type ModalDataProp = RecordListModal | CreateRecordModal | MonobankTxFormModal;
 
 let idCounter = 0;
 const activeModals = ref<ModalDataProp[]>([]);

diff --git a/src/components/modal-center/ui-modal.vue b/src/components/modal-center/ui-modal.vue
@@ -29,9 +29,6 @@ const MODAL_COMPONENTS = Object.freeze({
   [MODAL_TYPES.recordList]: defineAsyncComponent(
     () => import("@/components/modals/modify-record/record-list.vue"),
   ),
-  [MODAL_TYPES.monobankSetToken]: defineAsyncComponent(
-    () => import("@/components/modals/monobank-set-token.vue"),
-  ),
 });
 
 export enum EVENTS {

diff --git a/src/components/notification-center/index.ts b/src/components/notification-center/index.ts
@@ -51,7 +51,7 @@ export const useNotificationCenter = (): {
       removeNotification(id);
 
       delete notificationIds[id];
-    }, notification.visibilityTime ?? 4000);
+    }, notification.visibilityTime ?? 400000);
 
     return id;
   };

diff --git a/src/pages/accounts/accounts.vue b/src/pages/accounts/accounts.vue
@@ -9,24 +9,23 @@
         </router-link>
 
         <template v-if="!isPaired">
-          <UiButton
-            data-cy="pair-monobank-account"
-            type="button"
-            variant="outline"
-            @click="() => setMonobankToken()"
-          >
-            Pair Monobank account
-          </UiButton>
+          <MonobankSetToken>
+            <UiButton data-cy="pair-monobank-account" type="button" variant="outline">
+              Pair Monobank account
+            </UiButton>
+          </MonobankSetToken>
         </template>
         <template v-else-if="isPaired && isTokenPresent">
           <UiButton type="button" variant="outline" @click="refreshMonoAccounts">
             Refresh Monobank balances
           </UiButton>
         </template>
         <template v-else-if="isPaired && !isTokenPresent">
-          <button type="button" @click="setMonobankToken({ isUpdate: true })">
-            Update Monobank token
-          </button>
+          <MonobankSetToken is-update>
+            <UiButton data-cy="pair-monobank-account" type="button" variant="outline">
+              Update Monobank token
+            </UiButton>
+          </MonobankSetToken>
         </template>
       </div>
     </div>
@@ -78,17 +77,16 @@ import { AccountModel } from "shared-types";
 import { ROUTES_NAMES } from "@/routes/constants";
 import { useFormatCurrency } from "@/composable";
 import { useBanksMonobankStore, useAccountsStore } from "@/stores";
-import { MODAL_TYPES, useModalCenter } from "@/components/modal-center/index";
 import UiButton from "@/components/lib/ui/button/Button.vue";
 import { Card, CardContent, CardHeader } from "@/components/lib/ui/card";
 import { cn } from "@/lib/utils";
+import MonobankSetToken from "@/components/dialogs/monobank-set-token.vue";
 
 const monobankStore = useBanksMonobankStore();
 const { accounts } = storeToRefs(useAccountsStore());
 const { isMonoAccountPaired: isPaired, isTokenPresent } = storeToRefs(monobankStore);
 
 const { formatAmountByCurrencyId } = useFormatCurrency();
-const { addModal } = useModalCenter();
 
 const refreshMonoAccounts = () => {
   monobankStore.refreshAccounts();
@@ -98,15 +96,6 @@ const formattedAccounts = computed(() =>
   [...accounts.value].sort((a, b) => +b.isEnabled - +a.isEnabled),
 );
 
-const setMonobankToken = ({ isUpdate = false } = {}) => {
-  addModal({
-    type: MODAL_TYPES.monobankSetToken,
-    data: {
-      isUpdate,
-    },
-  });
-};
-
 const formatBalance = (account: AccountModel) =>
   formatAmountByCurrencyId(account.currentBalance - account.creditLimit, account.currencyId);
 </script>

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -109,5 +109,5 @@ body {
   --z-select-field: 1;
   --z-category-select-field: 1;
   --z-modal: 10;
-  --z-notifications: 20;
+  --z-notifications: 51;
 }