@controleonline/ui-customers 1.0.86 → 1.0.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-customers",
-  "version": "1.0.86",
+  "version": "1.0.88",
   "author": "ControleOnline",
   "description": "ControleOnline customers Quasar UI Component",
   "license": "MIT",

package/src/react/components/tabs/DocumentAttachments.js

@@ -14,14 +14,13 @@ import {
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
 import { resolveFileDownloadUrl } from '@controleonline/ui-common/src/react/utils/fileUrl';
-import { colors } from '@controleonline/../../src/styles/colors';
+import { colors } from '@controleonline/ui-layout/src/styles/colors';
 import DefaultUpload from '@controleonline/ui-default/src/react/components/upload/DefaultUpload';
 import {
   extractId,
   isImageFile,
   isPdfFile,
   normalizeDocumentFiles,
-  toDocumentIri,
   ACCEPTED_DOCUMENT_FILE_TYPES,
 } from './documentsTabHelpers';
 import {
@@ -214,7 +213,8 @@ const DocumentAttachments = ({
         <DefaultUpload
           relationStoreName="document_file"
           relationField="document"
-          relationResource={toDocumentIri(documentId)}
+          // DefaultUpload builds `/${relationResource}/${entityId}`, so pass the bare collection name.
+          relationResource="documents"
           entityId={documentId}
           companyId={companyId}
           context="document"

package/src/react/components/tabs/FranchiseLinksManageModal.js

@@ -10,7 +10,7 @@ import {
 import { Picker } from '@react-native-picker/picker';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
-import { colors } from '@controleonline/../../src/styles/colors';
+import { colors } from '@controleonline/ui-layout/src/styles/colors';
 
 const styles = {
   modalCard: {

package/src/react/components/tabs/FranchiseLinksTab.js

@@ -13,7 +13,7 @@ import { useStore } from '@store';
 import PeopleAvatar from '@controleonline/ui-people/src/react/components/PeopleAvatar';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { colors } from '@controleonline/../../src/styles/colors';
+import { colors } from '@controleonline/ui-layout/src/styles/colors';
 
 import {
   buildFranchiseLinkReadParams,

package/src/react/components/tabs/MediaTab.js

@@ -7,10 +7,11 @@ import {
 } from 'react-native';
 import { useStore } from '@store';
 import DefaultUpload from '@controleonline/ui-default/src/react/components/upload/DefaultUpload';
+import DefaultFile from '@controleonline/ui-default/src/react/components/files/DefaultFile';
 import { extractFileId } from '@controleonline/ui-default/src/react/components/upload/fileUpload';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
-import { resolveThemePalette, withOpacity } from '@controleonline/../../src/styles/branding';
-import { colors } from '@controleonline/../../src/styles/colors';
+import { resolveThemePalette, withOpacity } from '@controleonline/ui-layout/src/styles/branding';
+import { colors } from '@controleonline/ui-layout/src/styles/colors';
 
 const COMPANY_MEDIA_ACCEPT_ATTRIBUTE = 'image/png,image/jpeg,.png,.jpg,.jpeg';
 
@@ -214,6 +215,46 @@ const MediaTab = ({ client, onChanged = null }) => {
                     },
                   ]}
                 >
+                  <View
+                    style={[
+                      styles.mediaPreviewFrame,
+                      styles.mediaPreviewTransparencyGrid,
+                      {
+                        borderColor: withOpacity(palette.primary || '#2563EB', 0.14),
+                      },
+                    ]}>
+                    {(() => {
+                      const rawFile = currentMedia?.file;
+                      const fileId = extractFileId(rawFile);
+                      const file =
+                        rawFile && typeof rawFile === 'object' && !Array.isArray(rawFile)
+                          ? rawFile
+                          : fileId
+                            ? {id: fileId, '@id': `/files/${fileId}`}
+                            : null;
+                      if (!file) {
+                        return (
+                          <View style={styles.mediaEmptyState}>
+                            <Text
+                              style={[
+                                styles.mediaEmptyText,
+                                {color: palette.textSecondary || '#64748B'},
+                              ]}>
+                              Sem imagem
+                            </Text>
+                          </View>
+                        );
+                      }
+                      return (
+                        <DefaultFile
+                          file={file}
+                          company={client}
+                          resizeMode="cover"
+                          style={styles.mediaPreviewImage}
+                        />
+                      );
+                    })()}
+                  </View>
                   <DefaultUpload
                     relationStoreName="people"
                     relationField="people"
@@ -319,6 +360,38 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '700',
   },
+  // app-community#813: preview 320x320
+  mediaPreviewFrame: {
+    width: 320,
+    height: 320,
+    maxWidth: 320,
+    alignSelf: 'center',
+    borderRadius: 14,
+    borderWidth: 1,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mediaPreviewTransparencyGrid: {
+    // RN StyleSheet (web) rejects multi-value backgroundPosition / CSS backgroundImage gradients.
+    // Keep solid preview background; checkerboard was cosmetic only.
+    backgroundColor: '#F8FAFC',
+  },
+  mediaPreviewImage: {
+    width: 320,
+    height: 320,
+  },
+  mediaEmptyState: {
+    width: 320,
+    height: 320,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  mediaEmptyText: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
   mediaHelpText: {
     fontSize: 12,
     lineHeight: 18,

package/src/react/components/tabs/ProductsTab.js

@@ -2,7 +2,7 @@ import React, { useMemo, useCallback } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { colors } from '@controleonline/../../src/styles/colors';
+import { colors } from '@controleonline/ui-layout/src/styles/colors';
 import styles from './ProductsTab.styles';
 import {
   buildCreateProductParams,

package/src/react/components/tabs/SalesmanManageModal.js

@@ -10,7 +10,7 @@ import {
 import { Picker } from '@react-native-picker/picker';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
-import { colors } from '@controleonline/../../src/styles/colors';
+import { colors } from '@controleonline/ui-layout/src/styles/colors';
 
 const styles = {
   modalCard: {

package/src/react/components/tabs/SalesmanTab.js

@@ -31,7 +31,7 @@ import { normalizeSalesmanLink } from './salesmanTab.helpers';
 import SalesmanManageModal from './SalesmanManageModal';
 import { useSalesmanManage } from './useSalesmanManage';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { colors } from '@controleonline/../../src/styles/colors';
+import { colors } from '@controleonline/ui-layout/src/styles/colors';
 import SalesmanCommissionBlock from './SalesmanCommissionBlock';
 
 import {

package/src/react/pages/details.page.styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { colors } from '@controleonline/../../src/styles/colors';
+import { colors } from '@controleonline/ui-layout/src/styles/colors';
 
 const styles = StyleSheet.create({
   container: {
@@ -28,20 +28,6 @@ const styles = StyleSheet.create({
     color: '#64748B',
     fontWeight: '500',
   },
-  removeButton: {
-    marginTop: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#FECACA',
-    backgroundColor: '#FEF2F2',
-  },
-  removeButtonText: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#B91C1C',
-  },
   tabsHeader: {
     flexDirection: 'row',
     backgroundColor: '#fff',

package/src/tests/react/components/tabs/documentsTabContract.test.mjs

@@ -27,6 +27,9 @@ test('DocumentAttachments exposes view/share/print/remove via DefaultUpload', ()
   assert.match(attachments, /handleShare|Share\.share/);
   assert.match(attachments, /handlePrint|print\(/);
   assert.match(attachments, /ACCEPTED_DOCUMENT_FILE_TYPES/);
+  // app-community#1392: a full IRI here produced `//documents/N/N` and the relation was never saved.
+  assert.match(attachments, /relationResource="documents"/);
+  assert.doesNotMatch(attachments, /relationResource=\{/);
   assert.ok(attachments.split('\n').length <= 500, 'DocumentAttachments must stay under 500 lines');
 });