feat: style the generate payment link dialog

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.

packages/webapp/src/containers/PaymentLink/dialogs/SharePaymentLinkDialog/SharePaymentLinkContent.tsx

@@ -5,12 +5,10 @@ import { SharePaymentLinkProvider } from './SharePaymentLinkProvider';
 
 export function SharePaymentLinkContent() {
   return (
-    <DialogBody>
+    <SharePaymentLinkProvider>
-      <SharePaymentLinkProvider>
+      <SharePaymentLinkForm>
-        <SharePaymentLinkForm>
+        <SharePaymentLinkFormContent />
-          <SharePaymentLinkFormContent />
+      </SharePaymentLinkForm>
-        </SharePaymentLinkForm>
+    </SharePaymentLinkProvider>
-      </SharePaymentLinkProvider>
-    </DialogBody>
   );
 }

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: '',
+  publicity: 'public',
-  expiryDate: '',
+  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>
+      <DialogBody>
-        <FSelect
+        <Stack spacing={0}>
-          name={'publicity'}
+          <FFormGroup
-          items={[
+            name={'publicity'}
-            { value: 'private', text: 'Private' },
+            label={'Visibility'}
-            { value: 'public', text: 'Public' },
+            style={{ marginBottom: 10 }}
-          ]}
+            inline
-          fastField
+          >
-        />
+            <FSelect
-        <FFormGroup name={'expiryDate'} label={'Expiration Date'} fastField>
+              name={'publicity'}
-          <FDateInput
+              items={[
-            name={'expiryDate'}
+                { value: 'private', text: 'Private' },
-            popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                { value: 'public', text: 'Public' },
-            formatDate={(date) => date.toLocaleDateString()}
+              ]}
-            parseDate={(str) => new Date(str)}
+              input={({ activeItem, text, label, value }) => (
-            inputProps={{
+                <Button
-              fill: true,
+                  text={text || 'Select an item ...'}
-              leftElement: <Icon icon={'date-range'} />,
+                  rightIcon={<Icon icon={'caret-down-16'} iconSize={16} />}
-            }}
+                  minimal
-            fastField
+                />
-          />
+              )}
-        </FFormGroup>
+              searchable={false}
-
+              fastField
-        {url && (
-          <FormGroup name={'link'} label={'Payment Link'}>
-            <InputGroup
-              name={'link'}
-              value={url}
-              disabled
-              leftElement={
-                <Button onClick={handleCopyBtnClick} minimal>
-                  Copy
-                </Button>
-              }
             />
-          </FormGroup>
+          </FFormGroup>
-        )}
+
-      </Stack>
+          <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 ? (
+        <DialogFooterActions>
-          <Button intent={Intent.PRIMARY} onClick={handleCopyBtnClick}>
+          {url ? (
-            Copy Link
+            <Button intent={Intent.PRIMARY} onClick={handleCopyBtnClick}>
-          </Button>
+              Copy Link
-        ) : (
-          <>
-            <Button type={'submit'} intent={Intent.PRIMARY}>
-              Generate
             </Button>
-            <Button>Cancel</Button>
+          ) : (
-          </>
+            <>
-        )}
+              <Button>Cancel</Button>
+              <Button
+                type={'submit'}
+                intent={Intent.PRIMARY}
+                style={{ minWidth: 100 }}
+              >
+                Generate
+              </Button>
+            </>
+          )}
+        </DialogFooterActions>
       </DialogFooter>
     </>
   );

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