fix(locales): source materials issues for tagalog language

package.json

@@ -55,6 +55,7 @@
     "qrcode": "^1.5.4",
     "react": "^18.3.0",
     "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.5",
     "react-i18next": "^15.1.3",
     "react-lottie-player": "^2.1.0",
     "react-pdf-html": "^2.1.2",

src/components/icons/IconBackupOrganized.tsx

@@ -0,0 +1,58 @@
+import { SvgIcon, SxProps, Theme } from '@mui/material';
+
+type IconProps = {
+  color?: string;
+  width?: number;
+  height?: number;
+  sx?: SxProps<Theme>;
+  className?: string;
+};
+
+const IconBackupOrganized = ({
+  color,
+  width = 24,
+  height = 24,
+  sx = {},
+  className,
+}: IconProps) => {
+  return (
+    <SvgIcon
+      className={`organized-icon-backup-organized ${className}`}
+      sx={{ width: `${width}px`, height: `${height}px`, ...sx }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          id="mask0_11573_297345"
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+        >
+          <rect width="24" height="24" fill="#D9D9D9" />
+        </mask>
+        <g mask="url(#mask0_11573_297345)">
+          <path
+            d="M6.30775 21.5C5.80258 21.5 5.375 21.325 5.025 20.975C4.675 20.625 4.5 20.1974 4.5 19.6923V4.30775C4.5 3.80258 4.675 3.375 5.025 3.025C5.375 2.675 5.80258 2.5 6.30775 2.5H14.25L19.5 7.75V19.6923C19.5 20.1974 19.325 20.625 18.975 20.975C18.625 21.325 18.1974 21.5 17.6923 21.5H6.30775ZM13.5 8.5V4H6.30775C6.23075 4 6.16025 4.03208 6.09625 4.09625C6.03208 4.16025 6 4.23075 6 4.30775V19.6923C6 19.7693 6.03208 19.8398 6.09625 19.9038C6.16025 19.9679 6.23075 20 6.30775 20H17.6923C17.7692 20 17.8398 19.9679 17.9038 19.9038C17.9679 19.8398 18 19.7693 18 19.6923V8.5H13.5Z"
+            fill={color || 'var(--accent-dark)'}
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.7846 12.4635H10.7878V11.6237C10.7878 11.0677 11.1517 10.5772 11.6838 10.416L9.99741 10.416C9.2099 10.416 8.12921 11.0919 8.04918 12.3176C8.04604 12.3555 8.04443 12.3938 8.04443 12.4324L8.04443 13.4528C8.04443 14.2095 8.65784 14.8229 9.41452 14.8229C10.1712 14.8229 10.7846 14.2095 10.7846 13.4528V12.4635ZM13.9072 13.1563V13.1563H12.9263C12.1696 13.1563 11.5562 12.5429 11.5562 11.7862C11.5562 11.0295 12.1696 10.4161 12.9263 10.4161H13.9383C13.977 10.4161 14.0153 10.4177 14.0532 10.4209C15.2789 10.5009 15.9547 11.5816 15.9547 12.3691V14.0555C15.7954 13.5219 15.3047 13.1563 14.7478 13.1563H13.9072ZM10.0872 15.5833L10.0872 15.5863H11.1513C11.908 15.5863 12.5214 16.1997 12.5214 16.9564C12.5214 17.713 11.908 18.3264 11.1513 18.3264H10.092L10.092 18.327C8.77411 18.327 8.04446 17.1923 8.04446 16.3741V14.6877C8.20082 15.2187 8.68823 15.5833 9.24177 15.5833H10.0872ZM13.2135 16.2831L13.2146 16.2831V15.2481C13.2146 14.4914 13.828 13.878 14.5847 13.878C15.3414 13.878 15.9548 14.4914 15.9548 15.2481V16.2789L15.9553 16.2789C15.9553 17.5968 14.8206 18.3264 14.0024 18.3264H12.316C12.8482 18.1697 13.2135 17.6813 13.2135 17.1265V16.2831Z"
+            fill={color || 'var(--accent-dark)'}
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconBackupOrganized;

src/components/icons/IconImportExport.tsx

@@ -0,0 +1,52 @@
+import { SvgIcon, SxProps, Theme } from '@mui/material';
+
+type IconProps = {
+  color?: string;
+  width?: number;
+  height?: number;
+  sx?: SxProps<Theme>;
+  className?: string;
+};
+
+const IconImportExport = ({
+  color = '#222222',
+  width = 24,
+  height = 24,
+  sx = {},
+  className,
+}: IconProps) => {
+  return (
+    <SvgIcon
+      className={`organized-icon-import-export ${className}`}
+      sx={{ width: `${width}px`, height: `${height}px`, ...sx }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          id="mask0_11555_181186"
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+        >
+          <rect width="24" height="24" fill="#D9D9D9" />
+        </mask>
+        <g mask="url(#mask0_11555_181186)">
+          <path
+            d="M5.42293 20.1921L3.58643 9.19212H20.4134L18.5769 20.1921H5.42293ZM6.67493 18.6921H17.3249L18.5999 10.6921H5.39993L6.67493 18.6921ZM9.99993 14.4421H13.9999C14.2124 14.4421 14.3905 14.3702 14.5342 14.2264C14.678 14.0825 14.7499 13.9044 14.7499 13.6919C14.7499 13.4792 14.678 13.3011 14.5342 13.1576C14.3905 13.014 14.2124 12.9421 13.9999 12.9421H9.99993C9.78743 12.9421 9.60934 13.014 9.46568 13.1579C9.32184 13.3017 9.24993 13.4799 9.24993 13.6924C9.24993 13.905 9.32184 14.0832 9.46568 14.2269C9.60934 14.3704 9.78743 14.4421 9.99993 14.4421ZM5.99993 7.99987C5.78743 7.99987 5.60934 7.92795 5.46568 7.78412C5.32184 7.64028 5.24993 7.46212 5.24993 7.24962C5.24993 7.03695 5.32184 6.85887 5.46568 6.71537C5.60934 6.5717 5.78743 6.49987 5.99993 6.49987H17.9999C18.2124 6.49987 18.3905 6.57178 18.5342 6.71562C18.678 6.85945 18.7499 7.03762 18.7499 7.25012C18.7499 7.46278 18.678 7.64087 18.5342 7.78437C18.3905 7.92803 18.2124 7.99987 17.9999 7.99987H5.99993ZM7.99993 5.30762C7.78743 5.30762 7.60934 5.2357 7.46568 5.09187C7.32184 4.94803 7.24993 4.76987 7.24993 4.55737C7.24993 4.3447 7.32184 4.16662 7.46568 4.02312C7.60934 3.87945 7.78743 3.80762 7.99993 3.80762H15.9999C16.2124 3.80762 16.3905 3.87953 16.5342 4.02337C16.678 4.1672 16.7499 4.34537 16.7499 4.55787C16.7499 4.77053 16.678 4.94862 16.5342 5.09212C16.3905 5.23578 16.2124 5.30762 15.9999 5.30762H7.99993Z"
+            fill={color}
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconImportExport;

src/components/icons/IconImportJson.tsx

@@ -0,0 +1,52 @@
+import { SvgIcon, SxProps, Theme } from '@mui/material';
+
+type IconProps = {
+  color?: string;
+  width?: number;
+  height?: number;
+  sx?: SxProps<Theme>;
+  className?: string;
+};
+
+const IconImportJson = ({
+  color,
+  width = 24,
+  height = 24,
+  sx = {},
+  className,
+}: IconProps) => {
+  return (
+    <SvgIcon
+      className={`organized-icon-import-json ${className}`}
+      sx={{ width: `${width}px`, height: `${height}px`, ...sx }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          id="mask0_11572_288536"
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+        >
+          <rect width="24" height="24" fill="#D9D9D9" />
+        </mask>
+        <g mask="url(#mask0_11572_288536)">
+          <path
+            d="M6.30775 21.5C5.80258 21.5 5.375 21.325 5.025 20.975C4.675 20.625 4.5 20.1974 4.5 19.6923V4.30775C4.5 3.80258 4.675 3.375 5.025 3.025C5.375 2.675 5.80258 2.5 6.30775 2.5H14.8652L19.5 7.13475V19.6923C19.5 20.1974 19.325 20.625 18.975 20.975C18.625 21.325 18.1974 21.5 17.6923 21.5H6.30775ZM6.30775 20H17.6923C17.7692 20 17.8398 19.9679 17.9038 19.9038C17.9679 19.8398 18 19.7693 18 19.6923V7.8845H14.1155V4H6.30775C6.23075 4 6.16025 4.03208 6.09625 4.09625C6.03208 4.16025 6 4.23075 6 4.30775V19.6923C6 19.7693 6.03208 19.8398 6.09625 19.9038C6.16025 19.9679 6.23075 20 6.30775 20ZM12 18.6057C13.0142 18.6057 13.8702 18.2429 14.5682 17.5173C15.2662 16.7916 15.6152 15.9204 15.6152 14.9038V10.6152H14.1155V14.9038C14.1155 15.5051 13.9126 16.0224 13.5068 16.4557C13.1009 16.8891 12.5987 17.1058 12 17.1058C11.4115 17.1058 10.9118 16.8891 10.501 16.4557C10.09 16.0224 9.8845 15.5051 9.8845 14.9038V9.423C9.8845 9.21533 9.95058 9.04 10.0827 8.897C10.2147 8.75417 10.3763 8.68275 10.5673 8.68275C10.7686 8.68275 10.9328 8.75417 11.0598 8.897C11.1866 9.04 11.25 9.21533 11.25 9.423V14.9038H12.75V9.423C12.75 8.80633 12.5404 8.27883 12.1213 7.8405C11.7019 7.402 11.1839 7.18275 10.5673 7.18275C9.95058 7.18275 9.43267 7.402 9.0135 7.8405C8.59433 8.27883 8.38475 8.80633 8.38475 9.423V14.9038C8.38475 15.9204 8.73633 16.7916 9.4395 17.5173C10.1427 18.2429 10.9962 18.6057 12 18.6057Z"
+            fill={color || 'var(--accent-dark)'}
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconImportJson;

src/components/icons/index.ts

@@ -21,6 +21,7 @@ export { default as IconAttractions } from './IconAttractions';
 export { default as IconAudioMixer } from './IconAudioMixer';
 export { default as IconAuxiliaryPioneer } from './IconAuxiliaryPioneer';
 export { default as IconBack } from './IconBack';
+export { default as IconBackupOrganized } from './IconBackupOrganized';
 export { default as IconBrother } from './IconBrother';
 export { default as IconCalendarMonth } from './IconCalendarMonth';
 export { default as IconCalendarWeek } from './IconCalendarWeek';
@@ -120,7 +121,9 @@ export { default as IconImage } from './IconImage';
 export { default as IconImgAdd } from './IconImgAdd';
 export { default as IconImgDelete } from './IconImgDelete';
 export { default as IconImgRotate } from './IconImgRotate';
+export { default as IconImportExport } from './IconImportExport';
 export { default as IconImportFile } from './IconImportFile';
+export { default as IconImportJson } from './IconImportJson';
 export { default as IconInTerritory } from './IconInTerritory';
 export { default as IconInfo } from './IconInfo';
 export { default as IconInformationBoard } from './IconInformationBoard';
@@ -187,8 +190,8 @@ export { default as IconPause } from './IconPause';
 export { default as IconPermissionsPending } from './IconPermissionsPending';
 export { default as IconPersonSearch } from './IconPersonSearch';
 export { default as IconPerson } from './IconPerson';
-export { default as IconPersonPlaceholder } from './IconPersonPlaceholder';
 export { default as IconPersonalDay } from './IconPersonalDay';
+export { default as IconPersonPlaceholder } from './IconPersonPlaceholder';
 export { default as IconPhone } from './IconPhone';
 export { default as IconPinCode } from './IconPinCode';
 export { default as IconPin } from './IconPin';

src/features/congregation/settings/import_export/export/index.tsx

@@ -0,0 +1,50 @@
+import { Box, Stack } from '@mui/material';
+import { IconBackupOrganized, IconLoading } from '@components/icons';
+import { useAppTranslation } from '@hooks/index';
+import { ExportType } from './index.types';
+import useExport from './useExport';
+import Button from '@components/button';
+import Typography from '@components/typography';
+
+const Export = (props: ExportType) => {
+  const { t } = useAppTranslation();
+
+  const { filename, isProcessing, handleDownload } = useExport();
+
+  return (
+    <Stack spacing="16px">
+      <Stack
+        spacing="16px"
+        padding="16px"
+        borderRadius="var(--radius-m)"
+        bgcolor="var(--accent-150)"
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <IconBackupOrganized />
+          <Typography className="h4" color="var(--accent-dark)">
+            {filename}
+          </Typography>
+        </Box>
+      </Stack>
+
+      <Stack spacing="8px">
+        <Button
+          variant="main"
+          onClick={handleDownload}
+          endIcon={isProcessing && <IconLoading />}
+        >
+          {t('tr_download')}
+        </Button>
+        <Button
+          variant="secondary"
+          disabled={isProcessing}
+          onClick={props.onClose}
+        >
+          {t('tr_cancel')}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default Export;

src/features/congregation/settings/import_export/export/index.types.ts

@@ -0,0 +1,3 @@
+export type ExportType = {
+  onClose: VoidFunction;
+};