From 18d6ec7b59492447bd38574a27727b1605bd7a5a Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 15 Sep 2024 21:03:36 +0200
Subject: [PATCH] feat: style the generate payment link dialog

---
 .../CreateStripeAccountService.ts             |   4 +-
 .../SharePaymentLinkContent.tsx               |  12 +-
 .../SharePaymentLinkDialog.tsx                |   2 +-
 .../SharePaymentLinkForm.tsx                  |   6 +-
 .../SharePaymentLinkFormContent.tsx           | 144 ++++++++++++------
 packages/webapp/src/static/json/icons.tsx     |  10 +-
 6 files changed, 114 insertions(+), 64 deletions(-)

diff --git a/packages/server/src/services/StripePayment/CreateStripeAccountService.ts b/packages/server/src/services/StripePayment/CreateStripeAccountService.ts
index b3209fd23..eeffd523f 100644
--- a/packages/server/src/services/StripePayment/CreateStripeAccountService.ts
+++ b/packages/server/src/services/StripePayment/CreateStripeAccountService.ts
@@ -1,7 +1,7 @@
 import { Inject, Service } from 'typedi';
+import { snakeCase } from 'lodash';
 import { StripePaymentService } from './StripePaymentService';
 import HasTenancyService from '../Tenancy/TenancyService';
-import { snakeCase } from 'lodash';
 
 interface CreateStripeAccountDTO {
   name: string;
@@ -28,7 +28,7 @@ export class CreateStripeAccountService {
 
     // Creates a new Stripe account.
     const account = await this.stripePaymentService.createAccount();
-
+  
     const slug = snakeCase(createStripeAccountDTO.name);
 
     // Store the Stripe account on tenant store.
diff --git a/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkContent.tsx b/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkContent.tsx
index 1388f06b3..fc5b617bc 100644
--- a/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkContent.tsx
+++ b/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkContent.tsx
@@ -5,12 +5,10 @@ import { SharePaymentLinkProvider } from './SharePaymentLinkProvider';
 
 export function SharePaymentLinkContent() {
   return (
-    <DialogBody>
-      <SharePaymentLinkProvider>
-        <SharePaymentLinkForm>
-          <SharePaymentLinkFormContent />
-        </SharePaymentLinkForm>
-      </SharePaymentLinkProvider>
-    </DialogBody>
+    <SharePaymentLinkProvider>
+      <SharePaymentLinkForm>
+        <SharePaymentLinkFormContent />
+      </SharePaymentLinkForm>
+    </SharePaymentLinkProvider>
   );
 }
diff --git a/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkDialog.tsx b/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkDialog.tsx
index ad7e64689..90a40a334 100644
--- a/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkDialog.tsx
+++ b/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkDialog.tsx
@@ -22,7 +22,7 @@ function SharePaymentLinkDialogRoot({ dialogName, payload, isOpen }) {
       title={'Share Link'}
       canEscapeJeyClose={true}
       autoFocus={true}
-      style={{ width: 400 }}
+      style={{ width: 570 }}
     >
       <DialogSuspense>
         <SharePaymentLinkContent />
diff --git a/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkForm.tsx b/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkForm.tsx
index 18127dcb9..42b879d1f 100644
--- a/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkForm.tsx
+++ b/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkForm.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Intent } from '@blueprintjs/core';
 import { Formik, Form, FormikHelpers } from 'formik';
+import moment from 'moment';
 import { useCreatePaymentLink } from '@/hooks/query/payment-link';
 import { AppToaster } from '@/components';
 import { SharePaymentLinkFormSchema } from './SharePaymentLinkForm.schema';
 import { useDialogContext } from '@/components/Dialog/DialogProvider';
-import { useDialogActions } from '@/hooks/state';
 import { useSharePaymentLink } from './SharePaymentLinkProvider';
 
 interface SharePaymentLinkFormProps {
@@ -20,8 +20,8 @@ interface SharePaymentLinkFormValues {
 }
 
 const initialValues = {
-  publicity: '',
-  expiryDate: '',
+  publicity: 'public',
+  expiryDate: moment().add(30, 'days').format('YYYY-MM-DD'),
   transactionId: '',
   transactionType: '',
 };
diff --git a/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkFormContent.tsx b/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkFormContent.tsx
index 0c93ba9c1..e93960228 100644
--- a/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkFormContent.tsx
+++ b/packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkFormContent.tsx
@@ -1,13 +1,17 @@
 // @ts-nocheck
 import {
   Button,
+  Classes,
+  DialogBody,
+  DialogFooter,
   FormGroup,
   InputGroup,
   Intent,
   Position,
+  Tooltip,
 } from '@blueprintjs/core';
 import {
-  DialogFooter,
+  DialogFooterActions,
   FDateInput,
   FFormGroup,
   FSelect,
@@ -28,58 +32,100 @@ export function SharePaymentLinkFormContent() {
 
   return (
     <>
-      <Stack>
-        <FSelect
-          name={'publicity'}
-          items={[
-            { value: 'private', text: 'Private' },
-            { value: 'public', text: 'Public' },
-          ]}
-          fastField
-        />
-        <FFormGroup name={'expiryDate'} label={'Expiration Date'} fastField>
-          <FDateInput
-            name={'expiryDate'}
-            popoverProps={{ position: Position.BOTTOM, minimal: true }}
-            formatDate={(date) => date.toLocaleDateString()}
-            parseDate={(str) => new Date(str)}
-            inputProps={{
-              fill: true,
-              leftElement: <Icon icon={'date-range'} />,
-            }}
-            fastField
-          />
-        </FFormGroup>
-
-        {url && (
-          <FormGroup name={'link'} label={'Payment Link'}>
-            <InputGroup
-              name={'link'}
-              value={url}
-              disabled
-              leftElement={
-                <Button onClick={handleCopyBtnClick} minimal>
-                  Copy
-                </Button>
-              }
+      <DialogBody>
+        <Stack spacing={0}>
+          <FFormGroup
+            name={'publicity'}
+            label={'Visibility'}
+            style={{ marginBottom: 10 }}
+            inline
+          >
+            <FSelect
+              name={'publicity'}
+              items={[
+                { value: 'private', text: 'Private' },
+                { value: 'public', text: 'Public' },
+              ]}
+              input={({ activeItem, text, label, value }) => (
+                <Button
+                  text={text || 'Select an item ...'}
+                  rightIcon={<Icon icon={'caret-down-16'} iconSize={16} />}
+                  minimal
+                />
+              )}
+              searchable={false}
+              fastField
             />
-          </FormGroup>
-        )}
-      </Stack>
+          </FFormGroup>
+
+          <p className={Classes.TEXT_MUTED} style={{ marginBottom: 20 }}>
+            Select an expiration date and generate the link to share it with
+            your customer. Remember that anyone who has access to this link can
+            view, print or download it.
+          </p>
+
+          <FFormGroup
+            name={'expiryDate'}
+            label={'Expiration Date'}
+            helperText={
+              'By default, the link is set to expire 90 days from today.'
+            }
+            fastField
+          >
+            <FDateInput
+              name={'expiryDate'}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              formatDate={(date) => date.toLocaleDateString()}
+              parseDate={(str) => new Date(str)}
+              inputProps={{
+                fill: true,
+                style: { minWidth: 260 },
+                leftElement: <Icon icon={'date-range'} />,
+              }}
+              fastField
+            />
+          </FFormGroup>
+
+          {url && (
+            <FormGroup name={'link'} label={'Payment Link'}>
+              <InputGroup
+                name={'link'}
+                value={url}
+                disabled
+                leftElement={
+                  <Tooltip content="Copy to clipboard" position={Position.TOP}>
+                    <Button
+                      onClick={handleCopyBtnClick}
+                      minimal
+                      icon={<Icon icon={'clipboard'} iconSize={16} />}
+                    />
+                  </Tooltip>
+                }
+              />
+            </FormGroup>
+          )}
+        </Stack>
+      </DialogBody>
 
       <DialogFooter>
-        {url ? (
-          <Button intent={Intent.PRIMARY} onClick={handleCopyBtnClick}>
-            Copy Link
-          </Button>
-        ) : (
-          <>
-            <Button type={'submit'} intent={Intent.PRIMARY}>
-              Generate
+        <DialogFooterActions>
+          {url ? (
+            <Button intent={Intent.PRIMARY} onClick={handleCopyBtnClick}>
+              Copy Link
             </Button>
-            <Button>Cancel</Button>
-          </>
-        )}
+          ) : (
+            <>
+              <Button>Cancel</Button>
+              <Button
+                type={'submit'}
+                intent={Intent.PRIMARY}
+                style={{ minWidth: 100 }}
+              >
+                Generate
+              </Button>
+            </>
+          )}
+        </DialogFooterActions>
       </DialogFooter>
     </>
   );
diff --git a/packages/webapp/src/static/json/icons.tsx b/packages/webapp/src/static/json/icons.tsx
index ca889ecd8..a870a0c6d 100644
--- a/packages/webapp/src/static/json/icons.tsx
+++ b/packages/webapp/src/static/json/icons.tsx
@@ -644,8 +644,14 @@ export default {
   },
   share: {
     path: [
-      'M10.99 13.99h-9v-9h4.76l2-2H.99c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h11c.55 0 1-.45 1-1V7.24l-2 2v4.75zm4-14h-5c-.55 0-1 .45-1 1s.45 1 1 1h2.59L7.29 7.28a1 1 0 00-.3.71 1.003 1.003 0 001.71.71l5.29-5.29V6c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z'
+      'M10.99 13.99h-9v-9h4.76l2-2H.99c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h11c.55 0 1-.45 1-1V7.24l-2 2v4.75zm4-14h-5c-.55 0-1 .45-1 1s.45 1 1 1h2.59L7.29 7.28a1 1 0 00-.3.71 1.003 1.003 0 001.71.71l5.29-5.29V6c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z',
     ],
     viewBox: '0 0 16 16',
-  }
+  },
+  clipboard: {
+    path: [
+      'M11,2c0-0.55-0.45-1-1-1h0.22C9.88,0.4,9.24,0,8.5,0S7.12,0.4,6.78,1H7C6.45,1,6,1.45,6,2v1h5V2z M13,2h-1v2H5V2H4C3.45,2,3,2.45,3,3v12c0,0.55,0.45,1,1,1h9c0.55,0,1-0.45,1-1V3C14,2.45,13.55,2,13,2z',
+    ],
+    viewBox: '0 0 16 16',
+  },
 };