feat: [BBND-1241] add getCouponAmountFor info in see coupon view (#723)

Signed-off-by: Luigi Navarro <luigi@io.builders>
Signed-off-by: Mario Francia <mariofranciarius@gmail.com>

Author: luigi-io

.changeset/afraid-views-post.md

@@ -0,0 +1,5 @@
+---
+"@hashgraph/asset-tokenization-dapp": minor
+---
+
+Add getCouponAmountFor info (numerator, denominator, recordDateReached) to see coupon view

apps/ats/web/package.json

@@ -29,7 +29,7 @@
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.2.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/format-util": "^1.0.2",
     "@types/jest": "^29.5.1",

apps/ats/web/src/hooks/queries/useCoupons.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   HStack,
   Modal,
@@ -10,33 +10,33 @@ import {
   ModalOverlay,
   ModalProps,
   VStack,
-} from '@chakra-ui/react';
-import { Button, InputController, PhosphorIcon, Text } from 'io-bricks-ui';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useGrantKYC } from '../../../../hooks/mutations/useKYC';
-import { GrantKycRequest } from '@hashgraph/asset-tokenization-sdk';
-import { useParams } from 'react-router-dom';
-import { FileArchive } from '@phosphor-icons/react';
-import { useRef, useState } from 'react';
-import { isValidHederaId, required } from '../../../../utils/rules';
+} from "@chakra-ui/react";
+import { Button, InputController, PhosphorIcon, Text } from "io-bricks-ui";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useGrantKYC } from "../../../../hooks/mutations/useKYC";
+import { GrantKycRequest } from "@hashgraph/asset-tokenization-sdk";
+import { useParams } from "react-router-dom";
+import { FileArchive } from "@phosphor-icons/react";
+import { useRef, useState } from "react";
+import { isValidHederaId, required } from "../../../../utils/rules";
 
 interface FormValues {
   accountId: string;
   vcFile: string;
 }
 
-interface KYCModalProps extends Omit<ModalProps, 'children'> {}
+interface KYCModalProps extends Omit<ModalProps, "children"> {}
 
 export const KYCModal = ({ isOpen, onClose }: KYCModalProps) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const [fileName, setFileName] = useState('');
+  const [fileName, setFileName] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
-  const { id: securityId = '' } = useParams();
+  const { id: securityId = "" } = useParams();
 
-  const { t: tCreate } = useTranslation('security', {
-    keyPrefix: 'details.kyc.create',
+  const { t: tCreate } = useTranslation("security", {
+    keyPrefix: "details.kyc.create",
   });
 
   const {
@@ -47,7 +47,7 @@ export const KYCModal = ({ isOpen, onClose }: KYCModalProps) => {
     reset,
     watch,
   } = useForm<FormValues>({
-    mode: 'onChange',
+    mode: "onChange",
   });
 
   const { mutate } = useGrantKYC();
@@ -59,10 +59,10 @@ export const KYCModal = ({ isOpen, onClose }: KYCModalProps) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = () => {
-        if (typeof reader.result === 'string') {
-          const base64Data = reader.result.split(',')[1];
+        if (typeof reader.result === "string") {
+          const base64Data = reader.result.split(",")[1];
           if (base64Data) {
-            setValue('vcFile', base64Data, { shouldValidate: true });
+            setValue("vcFile", base64Data, { shouldValidate: true });
           }
         }
       };
@@ -88,62 +88,57 @@ export const KYCModal = ({ isOpen, onClose }: KYCModalProps) => {
     });
   };
 
-  const isDisable = !isValid || !watch('vcFile');
+  const isDisable = !isValid || !watch("vcFile");
 
   return (
     <Modal
       isCentered
       isOpen={isOpen}
       onClose={() => {
-        setFileName('');
+        setFileName("");
         reset();
         onClose();
       }}
     >
       <ModalOverlay />
-      <ModalContent bgColor={'white'}>
-        <ModalHeader>{tCreate('title')}</ModalHeader>
+      <ModalContent bgColor={"white"}>
+        <ModalHeader>{tCreate("title")}</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
           <VStack gap={4}>
             <InputController
               control={control}
               id="accountId"
-              label={tCreate('form.account.label')}
-              placeholder={tCreate('form.account.placeholder')}
+              label={tCreate("form.account.label")}
+              placeholder={tCreate("form.account.placeholder")}
               isRequired={true}
               rules={{
                 required,
                 validate: { isValidHederaId: isValidHederaId },
               }}
             />
-            <HStack w={'full'}>
+            <HStack w={"full"}>
               <input
                 ref={fileInputRef}
                 type="file"
                 name="vcFile"
                 id="vcFile"
-                style={{ display: 'none' }}
+                style={{ display: "none" }}
                 onChange={onFileChange}
               />
               <Button
                 onClick={() => fileInputRef.current?.click()}
                 leftIcon={<PhosphorIcon as={FileArchive} />}
-                variant={'secondary'}
+                variant={"secondary"}
               >
-                {tCreate('form.vc.placeholder')}
+                {tCreate("form.vc.placeholder")}
               </Button>
-              <Text>{fileName}</Text>
+              <Text maxW={270}>{fileName}</Text>
             </HStack>
           </VStack>
         </ModalBody>
         <ModalFooter>
-          <Button
-            isDisabled={isDisable}
-            isLoading={isLoading}
-            type="submit"
-            onClick={handleSubmit(onSubmit)}
-          >
+          <Button isDisabled={isDisable} isLoading={isLoading} type="submit" onClick={handleSubmit(onSubmit)}>
             Create
           </Button>
         </ModalFooter>