PSP-9279 UI UX - Acquisition - Agreements & Expropriation - UI Button…

… update for consistency (#4528) * PSP-9279 UI UX cleanup - make generate buttons consistent * Update snapshots * Test updates
bcgov · Dec 16, 2024 · 127175e · 127175e
1 parent f8248ad
commit 127175e
Show file tree

Hide file tree

Showing 22 changed files with 215 additions and 694 deletions.
diff --git a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/LeaseDetailView.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/LeaseDetailView.tsx
@@ -44,28 +44,18 @@ export const LeaseDetailView: React.FunctionComponent<
           {hasClaim(Claims.LEASE_VIEW) &&
             exists(leaseTypeCode) &&
             leaseTypeCode === ApiGen_CodeTypes_LeaseLicenceTypes.LOOBCTFA && (
-              <StyledAddButton onClick={() => onGenerate(lease)}>
-                <FaFileContract
-                  size={28}
-                  id={`generate-h1005-a`}
-                  title="Generate H1005(a)"
-                  className="mr-2"
-                />
-                Generate H1005(a)
+              <StyledAddButton title="Download File" onClick={() => onGenerate(lease)}>
+                <FaFileContract size={28} id={`generate-h1005-a`} className="mr-2" />
+                Generate H-1005(a)
               </StyledAddButton>
             )}
 
           {hasClaim(Claims.LEASE_VIEW) &&
             exists(leaseTypeCode) &&
             leaseTypeCode === ApiGen_CodeTypes_LeaseLicenceTypes.LIPPUBHWY && (
-              <StyledAddButton onClick={() => onGenerate(lease)}>
-                <FaFileContract
-                  size={24}
-                  id={`generate-h1005`}
-                  title="Generate H1005"
-                  className="mr-2"
-                />
-                Generate H1005
+              <StyledAddButton title="Download File" onClick={() => onGenerate(lease)}>
+                <FaFileContract size={28} id={`generate-h1005`} className="mr-2" />
+                Generate H-1005
               </StyledAddButton>
             )}
         </SimpleSectionHeader>

diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/LeaseDetailsView.test.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/LeaseDetailsView.test.tsx
@@ -133,11 +133,11 @@ describe('LeaseDetailView component', () => {
   });
 
   it.each([
-    [ApiGen_CodeTypes_LeaseLicenceTypes.LOOBCTFA, 'Generate H1005(a)'],
-    [ApiGen_CodeTypes_LeaseLicenceTypes.LIPPUBHWY, 'Generate H1005'],
+    [ApiGen_CodeTypes_LeaseLicenceTypes.LOOBCTFA, 'Generate H-1005(a)'],
+    [ApiGen_CodeTypes_LeaseLicenceTypes.LIPPUBHWY, 'Generate H-1005'],
   ])(
     'does not render generation button if missing permissions - %s',
-    async (leaseTypeCode: string, buttonTitle: string) => {
+    async (leaseTypeCode: string, buttonText: string) => {
       setup({
         props: {
           lease: {
@@ -156,7 +156,7 @@ describe('LeaseDetailView component', () => {
         claims: [],
       });
 
-      expect(screen.queryByText(buttonTitle)).toBeNull();
+      expect(screen.queryByText(buttonText)).toBeNull();
     },
   );
 
@@ -178,15 +178,15 @@ describe('LeaseDetailView component', () => {
       },
     });
 
-    expect(screen.queryByText(/Generate H1005/i)).toBeNull();
+    expect(screen.queryByText(/Generate H-1005/i)).toBeNull();
   });
 
   it.each([
-    [ApiGen_CodeTypes_LeaseLicenceTypes.LOOBCTFA, 'Generate H1005(a)'],
-    [ApiGen_CodeTypes_LeaseLicenceTypes.LIPPUBHWY, 'Generate H1005'],
+    [ApiGen_CodeTypes_LeaseLicenceTypes.LOOBCTFA, 'Generate H-1005(a)'],
+    [ApiGen_CodeTypes_LeaseLicenceTypes.LIPPUBHWY, 'Generate H-1005'],
   ])(
     'only renders generation button for specific lease types - %s',
-    async (leaseTypeCode: string, buttonTitle: string) => {
+    async (leaseTypeCode: string, buttonText: string) => {
       setup({
         props: {
           lease: {
@@ -204,13 +204,13 @@ describe('LeaseDetailView component', () => {
         },
       });
 
-      expect(await screen.findByTitle(buttonTitle)).toBeInTheDocument();
+      expect(await screen.findByText(buttonText)).toBeInTheDocument();
     },
   );
 
   it.each([
-    [ApiGen_CodeTypes_LeaseLicenceTypes.LOOBCTFA, 'Generate H1005(a)'],
-    [ApiGen_CodeTypes_LeaseLicenceTypes.LIPPUBHWY, 'Generate H1005'],
+    [ApiGen_CodeTypes_LeaseLicenceTypes.LOOBCTFA, 'Generate H-1005(a)'],
+    [ApiGen_CodeTypes_LeaseLicenceTypes.LIPPUBHWY, 'Generate H-1005'],
   ])(
     'calls onGenerate when generation button is clicked - %s',
     async (leaseTypeCode: string, buttonTitle: string) => {
@@ -231,7 +231,7 @@ describe('LeaseDetailView component', () => {
         },
       });
 
-      const generateButton = await screen.findByTitle(buttonTitle);
+      const generateButton = await screen.findByText(buttonTitle);
       expect(generateButton).toBeInTheDocument();
 
       await act(async () => userEvent.click(generateButton));

diff --git a/...rc/features/leases/detail/LeasePages/details/__snapshots__/LeaseDetailsView.test.tsx.snap b/...rc/features/leases/detail/LeasePages/details/__snapshots__/LeaseDetailsView.test.tsx.snap
@@ -292,6 +292,7 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
             >
               <button
                 class="c3 Button c4 btn btn-primary"
+                title="Download File"
                 type="button"
               >
                 <div
@@ -308,14 +309,11 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
                     width="28"
                     xmlns="http://www.w3.org/2000/svg"
                   >
-                    <title>
-                      Generate H1005(a)
-                    </title>
                     <path
                       d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 64c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8v-16zm192.81 248H304c8.84 0 16 7.16 16 16s-7.16 16-16 16h-47.19c-16.45 0-31.27-9.14-38.64-23.86-2.95-5.92-8.09-6.52-10.17-6.52s-7.22.59-10.02 6.19l-7.67 15.34a15.986 15.986 0 0 1-14.31 8.84c-.38 0-.75-.02-1.14-.05-6.45-.45-12-4.75-14.03-10.89L144 354.59l-10.61 31.88c-5.89 17.66-22.38 29.53-41 29.53H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h12.39c4.83 0 9.11-3.08 10.64-7.66l18.19-54.64c3.3-9.81 12.44-16.41 22.78-16.41s19.48 6.59 22.77 16.41l13.88 41.64c19.77-16.19 54.05-9.7 66 14.16 2.02 4.06 5.96 6.5 10.16 6.5zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"
                     />
                   </svg>
-                  Generate H1005(a)
+                  Generate H-1005(a)
                 </div>
               </button>
             </div>

diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/GenerateFormView.tsx b/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/GenerateFormView.tsx
@@ -50,7 +50,7 @@ const GenerateFormView: React.FunctionComponent<
               <LinkButton
                 key={`generate-form-entry-${entry.formType}`}
                 onClick={() => onGenerateClick(entry.formType)}
-                title="Generate"
+                title="Download File"
               >
                 {entry.text}
               </LinkButton>

diff --git a/...frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.test.tsx b/...frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.test.tsx
@@ -1,10 +1,12 @@
+import { Claims } from '@/constants';
 import { mockAgreementsResponse } from '@/mocks/agreements.mock';
 import { mockLookups } from '@/mocks/index.mock';
 import { lookupCodesSlice } from '@/store/slices/lookupCodes';
-import { render, RenderOptions } from '@/utils/test-utils';
+import { act, render, RenderOptions, screen, userEvent } from '@/utils/test-utils';
 
-import AgreementView, { IAgreementViewProps } from './AgreementView';
 import AcquisitionFileStatusUpdateSolver from '../../fileDetails/detail/AcquisitionFileStatusUpdateSolver';
+import AgreementView, { IAgreementViewProps } from './AgreementView';
+import { ApiGen_CodeTypes_AcquisitionStatusTypes } from '@/models/api/generated/ApiGen_CodeTypes_AcquisitionStatusTypes';
 
 // mock auth library
 
@@ -43,6 +45,7 @@ describe('AgreementView component', () => {
 
   beforeEach(() => {
     mockViewProps.agreements = mockAgreementsResponse();
+    mockViewProps.statusUpdateSolver = new AcquisitionFileStatusUpdateSolver();
   });
 
   afterEach(() => {
@@ -54,8 +57,39 @@ describe('AgreementView component', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('renders the agreement type ', () => {
+  it('renders the agreement type', () => {
     const { getByText } = setup();
     expect(getByText(/License Of Occupation/i)).toBeVisible();
   });
+
+  it('calls onGenerate when generation button is clicked', async () => {
+    const { getAllByTitle } = setup();
+
+    const generateButtons = getAllByTitle(/Download File/i);
+    expect(generateButtons).toHaveLength(2);
+    await act(async () => userEvent.click(generateButtons[0]));
+
+    expect(mockViewProps.onGenerate).toHaveBeenCalled();
+  });
+
+  it('displays confirmation modal when Delete Agreement button is clicked', async () => {
+    mockViewProps.statusUpdateSolver = new AcquisitionFileStatusUpdateSolver({
+      id: ApiGen_CodeTypes_AcquisitionStatusTypes.ACTIVE,
+      description: '',
+      displayOrder: 1,
+      isDisabled: false,
+    });
+
+    const { getAllByTitle } = setup({
+      claims: [Claims.ACQUISITION_EDIT],
+    });
+
+    const removeButtons = getAllByTitle(/Delete Agreement/i);
+    expect(removeButtons).toHaveLength(2);
+    await act(async () => userEvent.click(removeButtons[0]));
+
+    expect(
+      screen.getByText(/You have selected to delete this Agreement/i, { exact: false }),
+    ).toBeVisible();
+  });
 });
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/AgreementView.tsx
@@ -1,4 +1,4 @@
-import { FaMailBulk, FaPlus, FaTrash } from 'react-icons/fa';
+import { FaFileContract, FaPlus, FaTrash } from 'react-icons/fa';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -69,12 +69,13 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
                     {exists(agreement.agreementType) && (
                       <StyledButtonContainer>
                         <StyledAddButton
+                          title="Download File"
                           onClick={() => {
                             onGenerate(agreement);
                           }}
                         >
-                          <FaMailBulk className="mr-2" />
-                          Generate
+                          <FaFileContract size={28} className="mr-2" />
+                          {`Generate ${getAgreementFormName(agreement.agreementType.id)}`}
                         </StyledAddButton>
 
                         {!statusUpdateSolver.canEditOrDeleteAgreement(
@@ -200,6 +201,21 @@ export const AgreementView: React.FunctionComponent<IAgreementViewProps> = ({
 
 export default AgreementView;
 
+function getAgreementFormName(agreementType: string | null): string {
+  switch (agreementType) {
+    case ApiGen_CodeTypes_AgreementTypes.H179A:
+      return 'H-179A';
+    case ApiGen_CodeTypes_AgreementTypes.H179P:
+      return 'H-179P';
+    case ApiGen_CodeTypes_AgreementTypes.H179T:
+      return 'H-179T';
+    case ApiGen_CodeTypes_AgreementTypes.H0074:
+      return 'H-0074';
+    default:
+      return '';
+  }
+}
+
 export const StyledButtonContainer = styled.div`
   display: flex;
   flex-direction: row;

diff --git a/...es/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap b/...es/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
@@ -392,6 +392,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                       >
                         <button
                           class="c7 Button c8 btn btn-primary"
+                          title="Download File"
                           type="button"
                         >
                           <div
@@ -400,18 +401,18 @@ exports[`AgreementView component > renders as expected 1`] = `
                             <svg
                               class="mr-2"
                               fill="currentColor"
-                              height="1em"
+                              height="28"
                               stroke="currentColor"
                               stroke-width="0"
-                              viewBox="0 0 576 512"
-                              width="1em"
+                              viewBox="0 0 384 512"
+                              width="28"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M160 448c-25.6 0-51.2-22.4-64-32-64-44.8-83.2-60.8-96-70.4V480c0 17.67 14.33 32 32 32h256c17.67 0 32-14.33 32-32V345.6c-12.8 9.6-32 25.6-96 70.4-12.8 9.6-38.4 32-64 32zm128-192H32c-17.67 0-32 14.33-32 32v16c25.6 19.2 22.4 19.2 115.2 86.4 9.6 6.4 28.8 25.6 44.8 25.6s35.2-19.2 44.8-22.4c92.8-67.2 89.6-67.2 115.2-86.4V288c0-17.67-14.33-32-32-32zm256-96H224c-17.67 0-32 14.33-32 32v32h96c33.21 0 60.59 25.42 63.71 57.82l.29-.22V416h192c17.67 0 32-14.33 32-32V192c0-17.67-14.33-32-32-32zm-32 128h-64v-64h64v64zm-352-96c0-35.29 28.71-64 64-64h224V32c0-17.67-14.33-32-32-32H96C78.33 0 64 14.33 64 32v192h96v-32z"
+                                d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 64c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8v-16zm192.81 248H304c8.84 0 16 7.16 16 16s-7.16 16-16 16h-47.19c-16.45 0-31.27-9.14-38.64-23.86-2.95-5.92-8.09-6.52-10.17-6.52s-7.22.59-10.02 6.19l-7.67 15.34a15.986 15.986 0 0 1-14.31 8.84c-.38 0-.75-.02-1.14-.05-6.45-.45-12-4.75-14.03-10.89L144 354.59l-10.61 31.88c-5.89 17.66-22.38 29.53-41 29.53H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h12.39c4.83 0 9.11-3.08 10.64-7.66l18.19-54.64c3.3-9.81 12.44-16.41 22.78-16.41s19.48 6.59 22.77 16.41l13.88 41.64c19.77-16.19 54.05-9.7 66 14.16 2.02 4.06 5.96 6.5 10.16 6.5zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"
                               />
                             </svg>
-                            Generate
+                            Generate H-0074
                           </div>
                         </button>
                         <span
@@ -705,6 +706,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                       >
                         <button
                           class="c7 Button c8 btn btn-primary"
+                          title="Download File"
                           type="button"
                         >
                           <div
@@ -713,18 +715,18 @@ exports[`AgreementView component > renders as expected 1`] = `
                             <svg
                               class="mr-2"
                               fill="currentColor"
-                              height="1em"
+                              height="28"
                               stroke="currentColor"
                               stroke-width="0"
-                              viewBox="0 0 576 512"
-                              width="1em"
+                              viewBox="0 0 384 512"
+                              width="28"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M160 448c-25.6 0-51.2-22.4-64-32-64-44.8-83.2-60.8-96-70.4V480c0 17.67 14.33 32 32 32h256c17.67 0 32-14.33 32-32V345.6c-12.8 9.6-32 25.6-96 70.4-12.8 9.6-38.4 32-64 32zm128-192H32c-17.67 0-32 14.33-32 32v16c25.6 19.2 22.4 19.2 115.2 86.4 9.6 6.4 28.8 25.6 44.8 25.6s35.2-19.2 44.8-22.4c92.8-67.2 89.6-67.2 115.2-86.4V288c0-17.67-14.33-32-32-32zm256-96H224c-17.67 0-32 14.33-32 32v32h96c33.21 0 60.59 25.42 63.71 57.82l.29-.22V416h192c17.67 0 32-14.33 32-32V192c0-17.67-14.33-32-32-32zm-32 128h-64v-64h64v64zm-352-96c0-35.29 28.71-64 64-64h224V32c0-17.67-14.33-32-32-32H96C78.33 0 64 14.33 64 32v192h96v-32z"
+                                d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 64c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8v-16zm192.81 248H304c8.84 0 16 7.16 16 16s-7.16 16-16 16h-47.19c-16.45 0-31.27-9.14-38.64-23.86-2.95-5.92-8.09-6.52-10.17-6.52s-7.22.59-10.02 6.19l-7.67 15.34a15.986 15.986 0 0 1-14.31 8.84c-.38 0-.75-.02-1.14-.05-6.45-.45-12-4.75-14.03-10.89L144 354.59l-10.61 31.88c-5.89 17.66-22.38 29.53-41 29.53H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h12.39c4.83 0 9.11-3.08 10.64-7.66l18.19-54.64c3.3-9.81 12.44-16.41 22.78-16.41s19.48 6.59 22.77 16.41l13.88 41.64c19.77-16.19 54.05-9.7 66 14.16 2.02 4.06 5.96 6.5 10.16 6.5zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"
                               />
                             </svg>
-                            Generate
+                            Generate H-179T
                           </div>
                         </button>
                         <span

diff --git a/.../src/features/mapSideBar/acquisition/tabs/expropriation/form1/ExpropriationForm1.test.tsx b/.../src/features/mapSideBar/acquisition/tabs/expropriation/form1/ExpropriationForm1.test.tsx
@@ -63,8 +63,8 @@ describe('Expropriation Form 1', () => {
   });
 
   it('validates form values before generating', async () => {
-    const { getByText } = await setup();
-    await act(async () => userEvent.click(getByText('Generate')));
+    const { getByText, getByTitle } = await setup();
+    await act(async () => userEvent.click(getByTitle(/Download File/i)));
 
     expect(getByText('Expropriation authority is required')).toBeInTheDocument();
     expect(getByText('At lease one impacted property is required')).toBeInTheDocument();
@@ -83,10 +83,10 @@ describe('Expropriation Form 1', () => {
     await act(async () => userEvent.paste(getNatureOfInterest(), 'foo'));
     await act(async () => userEvent.paste(getPurpose(), 'bar'));
 
-    await act(async () => userEvent.click(getByText('Generate')));
+    await act(async () => userEvent.click(getByTitle(/Download File/i)));
 
-    expect(onGenerate).toBeCalled();
-    expect(onError).not.toBeCalled();
+    expect(onGenerate).toHaveBeenCalled();
+    expect(onError).not.toHaveBeenCalled();
   });
 
   it(`clears the form when Cancel button is clicked`, async () => {
@@ -122,9 +122,9 @@ describe('Expropriation Form 1', () => {
     await act(async () => userEvent.paste(getNatureOfInterest(), 'foo'));
     await act(async () => userEvent.paste(getPurpose(), 'bar'));
 
-    await act(async () => userEvent.click(getByText('Generate')));
+    await act(async () => userEvent.click(getByTitle(/Download File/i)));
 
-    expect(onGenerate).toBeCalled();
-    expect(onError).toBeCalledWith(error);
+    expect(onGenerate).toHaveBeenCalled();
+    expect(onError).toHaveBeenCalledWith(error);
   });
 });
diff --git a/...ntend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/ExpropriationForm1.tsx b/...ntend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/ExpropriationForm1.tsx
@@ -1,6 +1,7 @@
 import { Formik, FormikHelpers, FormikProps } from 'formik';
 import { Fragment } from 'react';
 import { Col, Row } from 'react-bootstrap';
+import { FaFileContract } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import { Button } from '@/components/common/buttons';
@@ -101,7 +102,10 @@ export const ExpropriationForm1: React.FC<IExpropriationForm1Props> = ({
               </Button>
             </Col>
             <Col xs="auto">
-              <Button onClick={() => onGenerateClick(formikProps)}>Generate</Button>
+              <Button title="Download File" onClick={() => onGenerateClick(formikProps)}>
+                <FaFileContract size={28} className="mr-2" />
+                Generate Form 1
+              </Button>
             </Col>
           </RightFlexRow>
         </Fragment>

diff --git a/...deBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap b/...deBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap
@@ -831,12 +831,27 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
     >
       <button
         class="c1 Button btn btn-primary"
+        title="Download File"
         type="button"
       >
         <div
           class="Button__value"
         >
-          Generate
+          <svg
+            class="mr-2"
+            fill="currentColor"
+            height="28"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 384 512"
+            width="28"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 64c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8v-16zm192.81 248H304c8.84 0 16 7.16 16 16s-7.16 16-16 16h-47.19c-16.45 0-31.27-9.14-38.64-23.86-2.95-5.92-8.09-6.52-10.17-6.52s-7.22.59-10.02 6.19l-7.67 15.34a15.986 15.986 0 0 1-14.31 8.84c-.38 0-.75-.02-1.14-.05-6.45-.45-12-4.75-14.03-10.89L144 354.59l-10.61 31.88c-5.89 17.66-22.38 29.53-41 29.53H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h12.39c4.83 0 9.11-3.08 10.64-7.66l18.19-54.64c3.3-9.81 12.44-16.41 22.78-16.41s19.48 6.59 22.77 16.41l13.88 41.64c19.77-16.19 54.05-9.7 66 14.16 2.02 4.06 5.96 6.5 10.16 6.5zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"
+            />
+          </svg>
+          Generate Form 1
         </div>
       </button>
     </div>