form-craft-package 1.11.9-dev.0 → 1.11.10

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(xargs grep:*)"
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.11.9-dev.0",
+  "version": "1.11.10",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-send-notification.hook.ts

@@ -139,8 +139,12 @@ export const useSendNotificationAction = ({
     [formTemplateReports, formId, formDataId, companyKey],
   )
 
-  const onSendNotification = useCallback(
-    async (notifActionProps: IButtonProps_SendNotification, newFormDataId?: string) => {
+  const onSendNotification = useCallback(
+    async (
+      notifActionProps: IButtonProps_SendNotification,
+      newFormDataId?: string,
+      extraAttachments: IEmail_Attachment[] = [],
+    ) => {
       const { notificationId } = notifActionProps
 
       const { joins = [], notifications } = formNotifications
@@ -160,13 +164,14 @@ export const useSendNotificationAction = ({
 
       const hasAttachments = Array.isArray(formNotif.attachments) && formNotif.attachments.length > 0
 
-      let formTemplateReportAttachments: IEmail_Attachment[] = []
-      if (hasAttachments) {
-        setDataLoadingType?.(FormLoadingModalTypeEnum.GeneratingReport)
-        formTemplateReportAttachments = await handleTemplateReport(formNotif.attachments!, targetFormDataId)
-      }
-
-      setDataLoadingType?.(FormLoadingModalTypeEnum.SendingNotification)
+      let formTemplateReportAttachments: IEmail_Attachment[] = []
+      if (hasAttachments) {
+        setDataLoadingType?.(FormLoadingModalTypeEnum.GeneratingReport)
+        formTemplateReportAttachments = await handleTemplateReport(formNotif.attachments!, targetFormDataId)
+      }
+      const additionalEmailAttachments = [...formTemplateReportAttachments, ...extraAttachments]
+
+      setDataLoadingType?.(FormLoadingModalTypeEnum.SendingNotification)
 
       try {
         const notifConfigRes = await client.get(`/api/notificationconfig/${notificationId}/data`)
@@ -175,12 +180,12 @@ export const useSendNotificationAction = ({
           const notificationRequests = await buildNotificationRequests({
             notificationId: formNotif.id,
             notificationConfig: notifConfigRes.data.data,
-            formNotification: formNotif,
-            replacementData: formDataRes.data,
-            formId,
-            fileBaseUrl,
-            additionalEmailAttachments: formTemplateReportAttachments,
-          })
+            formNotification: formNotif,
+            replacementData: formDataRes.data,
+            formId,
+            fileBaseUrl,
+            additionalEmailAttachments,
+          })
 
           if (!notificationRequests.length) {
             onFinal()

package/src/components/form/layout-renderer/3-element/18-gallery/index.tsx

@@ -224,13 +224,14 @@ function LayoutRenderer_Gallery({
           <Empty description={emptyDescription || 'No pictures uploaded'} />
         )}
       </Form.Item>
-      <GalleryUploadModal
-        isOpen={isUploadModalOpen}
-        formContext={formContext}
-        formItem={formItem}
-        elementKey={elementKey}
-        textConditions={textConditions}
-        isDisabled={isDisabled}
+      <GalleryUploadModal
+        isOpen={isUploadModalOpen}
+        formContext={formContext}
+        formItem={formItem}
+        elementProps={elementProps}
+        elementKey={elementKey}
+        textConditions={textConditions}
+        isDisabled={isDisabled}
         onDiscardSuccess={() => setIsUploadModalOpen(false)}
         onSaveSuccess={(uploadedBlobNames) => {
           formRef?.setFieldValue(formItem.path, [

package/src/components/form/layout-renderer/3-element/18-gallery/upload.modal.tsx

@@ -1,40 +1,56 @@
-import client from '../../../../../api/client'
-import { isNewFormDataPage, resolveConditionalText } from '../../../../../functions'
-import { saveFile } from '../../../../../functions/forms/form'
-import { TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../../enums'
-import { RcFile, UploadFile, UploadProps } from 'antd/es/upload'
-import { Form, Modal, Spin, Upload } from 'antd'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { FaUpload } from 'react-icons/fa6'
-import { Button_FillerPortal } from '../../../../common/button'
-import { useNotification, useTranslation } from '../../../../common/custom-hooks'
-import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
-import { IElementBaseProps } from '..'
-import { IFormContext } from '../../1-row'
-
-export default function GalleryUploadModal({
-  isOpen,
-  formContext,
-  formItem,
-  elementKey,
-  textConditions,
-  onDiscardSuccess,
-  onSaveSuccess,
-}: {
-  isOpen: boolean
-  formContext: IFormContext
-  onDiscardSuccess: () => void
-  onSaveSuccess: (blobNames: string[]) => void
-} & IElementBaseProps) {
+import client from '../../../../../api/client'
+import { isNewFormDataPage, resolveConditionalText } from '../../../../../functions'
+import { saveFile } from '../../../../../functions/forms/form'
+import {
+  ButtonActionCategoryEnum,
+  EmailAttachmentTypeEnum,
+  TranslationTextSubTypeEnum,
+  TranslationTextTypeEnum,
+} from '../../../../../enums'
+import { RcFile, UploadFile, UploadProps } from 'antd/es/upload'
+import { Form, Modal, Spin, Upload } from 'antd'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { FaUpload } from 'react-icons/fa6'
+import { useSendNotificationAction } from '../1-dynamic-button/use-send-notification.hook'
+import { Button_FillerPortal } from '../../../../common/button'
+import { useNotification, useTranslation } from '../../../../common/custom-hooks'
+import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
+import { IElementBaseProps } from '..'
+import { IFormContext } from '../../1-row'
+import { IEmail_Attachment, IGalleryElementProps } from '../../../../../types'
+
+export default function GalleryUploadModal({
+  isOpen,
+  formContext,
+  formItem,
+  elementProps,
+  elementKey,
+  textConditions,
+  onDiscardSuccess,
+  onSaveSuccess,
+}: {
+  isOpen: boolean
+  formContext: IFormContext
+  elementProps: IGalleryElementProps
+  onDiscardSuccess: () => void
+  onSaveSuccess: (blobNames: string[]) => void
+} & IElementBaseProps) {
   const { formRef, formDataId, companyKey, formId } = formContext
   const { t } = useTranslation(formId)
   const currentBreakpoint = useGetCurrentBreakpoint()
   const { warningModal } = useNotification()
 
   const [uploadedFiles, setUploadedFiles] = useState<UploadFile[]>([])
-  const [isUploadLoading, setIsUploadLoading] = useState(false)
-  const [isSaving, setIsSaving] = useState(false)
-  const [isDiscarding, setIsDiscarding] = useState(false)
+  const [isUploadLoading, setIsUploadLoading] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [isDiscarding, setIsDiscarding] = useState(false)
+  const [isSendingNotification, setIsSendingNotification] = useState(false)
+  const onSendNotification = useSendNotificationAction({
+    ...formContext,
+    onSuccess: () => {},
+    onError: () => {},
+    onFinal: () => {},
+  })
 
   const allValues = Form.useWatch([], { form: formRef, preserve: true })
 
@@ -123,11 +139,11 @@ export default function GalleryUploadModal({
     }
   }, [onDiscardSuccess, uploadedBlobNames])
 
-  const saveUploadedFiles = useCallback(async () => {
-    if (!formId || !formDataId || isNewFormDataPage(formDataId)) return
-
-    setIsSaving(true)
-    try {
+  const saveUploadedFiles = useCallback(async () => {
+    if (!formId || !formDataId || isNewFormDataPage(formDataId)) return
+
+    setIsSaving(true)
+    try {
       const formDataRes = await client.get(`/api/formdata/${formId}/${formDataId}`)
       const parsedData = JSON.parse(formDataRes.data.data)
       const fieldPath = Array.isArray(formItem.path) ? formItem.path : [formItem.path]
@@ -140,20 +156,65 @@ export default function GalleryUploadModal({
         ...(Array.isArray(existingBlobNames) ? existingBlobNames : []),
         ...uploadedBlobNames,
       ]
-      const res = await client.put(`/api/formdata/${formId}/${formDataId}`, {
-        name: formDataRes.data.name,
-        version: formDataRes.data.version,
-        private: formDataRes.data.private,
-        data: JSON.stringify(parsedData),
-      })
-      if (res.status === 200) {
-        setUploadedFiles([])
-        onSaveSuccess(uploadedBlobNames)
-      }
-    } finally {
-      setIsSaving(false)
-    }
-  }, [formDataId, formId, formItem.path, onSaveSuccess, uploadedBlobNames])
+      const res = await client.put(`/api/formdata/${formId}/${formDataId}`, {
+        name: formDataRes.data.name,
+        version: formDataRes.data.version,
+        private: formDataRes.data.private,
+        data: JSON.stringify(parsedData),
+      })
+      if (res.status === 200) {
+        const shouldSendNotification = elementProps.sendNotification && !!elementProps.notificationId
+        const savedBlobNames = [...uploadedBlobNames]
+
+        if (shouldSendNotification) {
+          const extraAttachments: IEmail_Attachment[] = uploadedFiles
+            .map((file) => {
+              const blobName =
+                typeof file.response === 'object' && file.response
+                  ? (file.response as { blobName?: string }).blobName
+                  : undefined
+              if (!blobName) return null
+
+              return {
+                blobName,
+                fileName: file.name,
+                type: EmailAttachmentTypeEnum.Image,
+              }
+            })
+            .filter((attachment): attachment is IEmail_Attachment => !!attachment)
+
+          setIsSendingNotification(true)
+          try {
+            await onSendNotification(
+              {
+                category: ButtonActionCategoryEnum.SendNotification,
+                notificationId: elementProps.notificationId!,
+              },
+              formDataId,
+              extraAttachments,
+            )
+          } finally {
+            setIsSendingNotification(false)
+          }
+        }
+
+        setUploadedFiles([])
+        onSaveSuccess(savedBlobNames)
+      }
+    } finally {
+      setIsSaving(false)
+    }
+  }, [
+    elementProps.notificationId,
+    elementProps.sendNotification,
+    formDataId,
+    formId,
+    formItem.path,
+    onSaveSuccess,
+    onSendNotification,
+    uploadedFiles,
+    uploadedBlobNames,
+  ])
 
   return (
     <Modal
@@ -164,24 +225,29 @@ export default function GalleryUploadModal({
       title={title || 'Upload pictures'}
       footer={
         <div className="flex justify-between">
-          <Button_FillerPortal outline disabled={isUploadLoading} loading={isDiscarding} onClick={discardUploadedFiles}>
-            {discardText || 'Discard & Close'}
-          </Button_FillerPortal>
-          <Button_FillerPortal
-            primary
-            disabled={isUploadLoading || isDiscarding}
-            loading={isSaving}
-            onClick={saveUploadedFiles}
-          >
-            {saveText || 'Save Pictures'}
-          </Button_FillerPortal>
-        </div>
-      }
-    >
-      <Spin spinning={isUploadLoading}>
-        <Upload.Dragger {...uploadProps} fileList={uploadedFiles}>
-          <div className="flex flex-col items-center">
-            <FaUpload size={24} className="text-primary" />
+          <Button_FillerPortal
+            outline
+            disabled={isUploadLoading || isSendingNotification}
+            loading={isDiscarding}
+            onClick={discardUploadedFiles}
+          >
+            {discardText || 'Discard & Close'}
+          </Button_FillerPortal>
+          <Button_FillerPortal
+            primary
+            disabled={isUploadLoading || isDiscarding || isSendingNotification}
+            loading={isSaving || isSendingNotification}
+            onClick={saveUploadedFiles}
+          >
+            {saveText || 'Save Pictures'}
+          </Button_FillerPortal>
+        </div>
+      }
+    >
+      <Spin spinning={isUploadLoading || isSendingNotification}>
+        <Upload.Dragger {...uploadProps} fileList={uploadedFiles}>
+          <div className="flex flex-col items-center">
+            <FaUpload size={24} className="text-primary" />
             <span className="font-semibold mt-2 text-secondary">
               {text || 'Click or drag image files to this area'}
             </span>

package/src/types/forms/layout-elements/index.ts

@@ -186,12 +186,14 @@ export interface IGalleryElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.Gallery
   props: IGalleryElementProps
 }
-export interface IGalleryElementProps {
-  hasNoLabel?: boolean
-  grid?: Partial<Record<DeviceBreakpointEnum, IGalleryElementGridConfig | null>>
-  uploadButtonConditions?: IFormLayoutElementConditions
-  deleteButtonConditions?: IFormLayoutElementConditions
-}
+export interface IGalleryElementProps {
+  hasNoLabel?: boolean
+  grid?: Partial<Record<DeviceBreakpointEnum, IGalleryElementGridConfig | null>>
+  uploadButtonConditions?: IFormLayoutElementConditions
+  deleteButtonConditions?: IFormLayoutElementConditions
+  sendNotification?: boolean
+  notificationId?: number
+}
 export interface IGalleryElementGridConfig {
   count?: number | null
   row?: number | null