Merge pull request Expensify#87684 from ishpaul777/ishpaul/workspace-rules-document-upload

[Payment due @abzokhattab] Add workspace rules PDF document upload, view, and management UI

Author: lakchote

src/CONST/index.ts

@@ -9314,6 +9314,7 @@ const CONST = {
                 PLAN_TYPE: 'WorkspaceOverview-PlanType',
                 SHARE: 'WorkspaceOverview-Share',
                 CUSTOM_RULES: 'WorkspaceOverview-CustomRules',
+                RULES_DOCUMENT: 'WorkspaceOverview-RulesDocument',
                 INVITE_BUTTON: 'WorkspaceOverview-InviteButton',
                 MORE_DROPDOWN: 'WorkspaceOverview-MoreDropdown',
             },

src/ROUTES.ts

@@ -2138,6 +2138,10 @@ const ROUTES = {
         route: 'workspaces/:policyID/avatar',
         getRoute: (policyID: string, fallbackLetter?: UpperCaseCharacters) => `workspaces/${policyID}/avatar${fallbackLetter ? `?letter=${fallbackLetter}` : ''}` as const,
     },
+    WORKSPACE_DOCUMENT: {
+        route: 'workspaces/:policyID/document',
+        getRoute: (policyID: string) => `workspaces/${policyID}/document` as const,
+    },
     WORKSPACE_JOIN_USER: {
         route: 'workspaces/:policyID/join',
         getRoute: (policyID: string, inviterEmail: string) => `workspaces/${policyID}/join?email=${inviterEmail}` as const,

src/SCREENS.ts

@@ -19,6 +19,7 @@ const SCREENS = {
     REPORT: 'Report',
     PROFILE_AVATAR: 'ProfileAvatar',
     WORKSPACE_AVATAR: 'WorkspaceAvatar',
+    WORKSPACE_DOCUMENT: 'WorkspaceDocument',
     REPORT_AVATAR: 'ReportAvatar',
     NOT_FOUND: 'not-found',
     TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',

src/components/AttachmentPicker/index.native.tsx

@@ -27,6 +27,25 @@ import type IconAsset from '@src/types/utils/IconAsset';
 import launchCamera from './launchCamera/launchCamera';
 import type AttachmentPickerProps from './types';
 
+const EXTENSION_TO_NATIVE_TYPE: Record<string, string> = {
+    pdf: String(types.pdf),
+    doc: String(types.doc),
+    docx: String(types.docx),
+    zip: String(types.zip),
+    txt: String(types.plainText),
+    json: String(types.json),
+    xls: String(types.xls),
+    xlsx: String(types.xlsx),
+    jpg: String(types.images),
+    jpeg: String(types.images),
+    png: String(types.images),
+    gif: String(types.images),
+    heif: String(types.images),
+    heic: String(types.images),
+    tif: String(types.images),
+    tiff: String(types.images),
+};
+
 type LocalCopy = {
     name: string | null;
     uri: string;
@@ -121,8 +140,10 @@ function AttachmentPicker({
     shouldHideCameraOption = false,
     shouldValidateImage = true,
     shouldHideGalleryOption = false,
+    acceptedFileTypes,
     fileLimit = 1,
     onOpenPicker,
+    shouldSkipAttachmentTypeModal = false,
 }: AttachmentPickerProps) {
     const icons = useMemoizedLazyExpensifyIcons(['Camera', 'Gallery', 'Paperclip']);
     const styles = useThemeStyles();
@@ -251,8 +272,22 @@ function AttachmentPicker({
      * Launch the DocumentPicker. Results are in the same format as ImagePicker
      */
     const showDocumentPicker = useCallback(async (): Promise<LocalCopy[]> => {
+        let pickerTypes: string[];
+        if (acceptedFileTypes && acceptedFileTypes.length > 0) {
+            const mappedTypes = acceptedFileTypes.reduce<string[]>((result, extension) => {
+                const nativeType = EXTENSION_TO_NATIVE_TYPE[String(extension)];
+                if (nativeType !== undefined && !result.includes(nativeType)) {
+                    result.push(nativeType);
+                }
+                return result;
+            }, []);
+            pickerTypes = mappedTypes.length > 0 ? mappedTypes : [types.allFiles];
+        } else {
+            pickerTypes = [type === CONST.ATTACHMENT_PICKER_TYPE.IMAGE ? types.images : types.allFiles];
+        }
+
         const pickedFiles = await pick({
-            type: [type === CONST.ATTACHMENT_PICKER_TYPE.IMAGE ? types.images : types.allFiles],
+            type: pickerTypes,
             allowMultiSelection: fileLimit !== 1,
         });
 
@@ -280,7 +315,7 @@ function AttachmentPicker({
                 type: file.type,
             };
         });
-    }, [fileLimit, type]);
+    }, [acceptedFileTypes, fileLimit, type]);
 
     const menuItemData: Item[] = useMemo(() => {
         const data: Item[] = [
@@ -336,19 +371,6 @@ function AttachmentPicker({
         [showGeneralAlert, showImageCorruptionAlert, translate],
     );
 
-    /**
-     * Opens the attachment modal
-     *
-     * @param onPickedHandler A callback that will be called with the selected attachment
-     * @param onCanceledHandler A callback that will be called without a selected attachment
-     */
-    const open = (onPickedHandler: (files: FileObject[]) => void, onCanceledHandler: () => void = () => {}, onClosedHandler: () => void = () => {}) => {
-        completeAttachmentSelection.current = onPickedHandler;
-        onCanceled.current = onCanceledHandler;
-        onClosed.current = onClosedHandler;
-        setIsVisible(true);
-    };
-
     /**
      * Closes the attachment modal
      */
@@ -442,6 +464,33 @@ function AttachmentPicker({
         [handleImageProcessingError, shouldValidateImage, showGeneralAlert, showImageCorruptionAlert],
     );
 
+    /**
+     * Opens the attachment modal, or directly launches the document picker when shouldSkipAttachmentTypeModal is true.
+     */
+    const open = (onPickedHandler: (files: FileObject[]) => void, onCanceledHandler: () => void = () => {}, onClosedHandler: () => void = () => {}) => {
+        completeAttachmentSelection.current = onPickedHandler;
+        onCanceled.current = onCanceledHandler;
+        onClosed.current = onClosedHandler;
+
+        if (shouldSkipAttachmentTypeModal) {
+            onOpenPicker?.();
+            showDocumentPicker()
+                .catch((error: Error) => {
+                    if (JSON.stringify(error).includes('OPERATION_CANCELED')) {
+                        return;
+                    }
+                    showGeneralAlert(error.message);
+                    throw error;
+                })
+                .then((result) => pickAttachment(result))
+                .catch(console.error)
+                .finally(() => onClosedHandler());
+            return;
+        }
+
+        setIsVisible(true);
+    };
+
     /**
      * Setup native attachment selection to start after this popover closes
      *

src/components/AttachmentPicker/types.ts

@@ -60,6 +60,9 @@ type AttachmentPickerProps = {
 
     /** A callback that will be called when the picker is opened. */
     onOpenPicker?: () => void;
+
+    /** When true, skip the Camera/Gallery/Document modal and open the document picker directly (native only). */
+    shouldSkipAttachmentTypeModal?: boolean;
 };
 
 export default AttachmentPickerProps;

src/languages/de.ts

@@ -6841,6 +6841,8 @@ Fordern Sie Spesendetails wie Belege und Beschreibungen an, legen Sie Limits und
             customRules: {
                 title: 'Spesenrichtlinie',
                 cardSubtitle: 'Hier ist die Spesenrichtlinie deines Teams hinterlegt, damit alle denselben Stand haben, was abgedeckt ist.',
+                policyDocument: 'Richtliniendokument',
+                policyText: 'Richtlinientext',
             },
             spendRules: {
                 title: 'Ausgaben',

src/languages/en.ts

@@ -6857,6 +6857,8 @@ const translations = {
             customRules: {
                 title: 'Expense policy',
                 cardSubtitle: "Here's where your team's expense policy lives, so everyone's on the same page about what's covered.",
+                policyDocument: 'Policy document',
+                policyText: 'Policy text',
             },
             spendRules: {
                 title: 'Spend',

src/languages/es.ts

@@ -6744,6 +6744,8 @@ ${amount} para ${merchant} - ${date}`,
             customRules: {
                 title: 'Reglas personalizadas',
                 cardSubtitle: 'Aquí es donde se definen las reglas de tu equipo, para que todos sepan lo que esta cubierto.',
+                policyDocument: 'Documento de política',
+                policyText: 'Texto de política',
             },
             spendRules: {
                 title: 'Gastos',

src/languages/fr.ts

@@ -6863,6 +6863,8 @@ Rendez obligatoires des informations de dépense comme les reçus et les descrip
             customRules: {
                 title: 'Politique de dépenses',
                 cardSubtitle: 'C’est ici que se trouve la politique de dépenses de votre équipe, pour que tout le monde soit d’accord sur ce qui est couvert.',
+                policyDocument: 'Document de politique',
+                policyText: 'Texte de politique',
             },
             spendRules: {
                 title: 'Dépenser',

src/languages/it.ts

@@ -6826,6 +6826,8 @@ Richiedi dettagli sulle spese come ricevute e descrizioni, imposta limiti e valo
             customRules: {
                 title: 'Politica di spesa',
                 cardSubtitle: 'Qui trovi il regolamento spese del tuo team, così tutti sono allineati su cosa è coperto.',
+                policyDocument: 'Documento di politica',
+                policyText: 'Testo della politica',
             },
             spendRules: {
                 title: 'Spesa',