feat: style the generate payment link dialog

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>
   );
 }

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 />

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: '',
 };

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>
     </>
   );