@controleonline/ui-customers 1.0.81 → 1.0.82

package/src/react/components/tabs/EmployeesTab.styles.js

@@ -1,172 +1,220 @@
-export const inlineStyle_243_18 = {
-  paddingVertical: 20,
-  alignItems: 'center',
-};
-
-export const inlineStyle_279_8 = {
-  justifyContent: 'flex-end',
-};
-
-export const inlineStyle_281_10 = {
-  backgroundColor: '#fff',
-  borderTopLeftRadius: 24,
-  borderTopRightRadius: 24,
-  maxHeight: '85%',
-  width: '100%',
-  shadowColor: '#000',
-
-  shadowOffset: {
-    width: 0,
-    height: -4,
-  },
-
-  shadowOpacity: 0.1,
-  shadowRadius: 12,
-  elevation: 10,
-};
-
-export const inlineStyle_294_12 = {
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  paddingHorizontal: 24,
-  paddingVertical: 20,
-  borderBottomWidth: 1,
-  borderBottomColor: '#F1F5F9',
-};
-
-export const inlineStyle_303_18 = {
-  fontSize: 20,
-  fontWeight: '700',
-  color: '#0F172A',
-};
-
-export const inlineStyle_308_14 = {
-  width: 32,
-  height: 32,
-  borderRadius: 16,
-  backgroundColor: '#F1F5F9',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_321_12 = {
-  padding: 24,
-};
-
-export const inlineStyle_324_18 = {
-  marginBottom: 20,
-};
-
-export const inlineStyle_326_16 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_338_16 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  fontSize: 16,
-  backgroundColor: '#f8f9fa',
-};
-
-export const inlineStyle_351_18 = {
-  marginBottom: 20,
-};
-
-export const inlineStyle_353_16 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_365_16 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  fontSize: 16,
-  backgroundColor: '#f8f9fa',
-};
-
-export const inlineStyle_378_18 = {
-  marginBottom: 8,
-};
-
-export const inlineStyle_380_16 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_389_16 = {
-  flexDirection: 'row',
-  alignItems: 'center',
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  backgroundColor: '#f8f9fa',
-};
-
-export const inlineStyle_408_18 = {
-  flex: 1,
-  paddingVertical: 12,
-  paddingHorizontal: 12,
-  fontSize: 16,
-  color: '#212529',
-};
-
-export const inlineStyle_422_18 = {
-  marginBottom: 20,
-};
-
-export const inlineStyle_424_16 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_433_16 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  backgroundColor: '#f8f9fa',
-  overflow: 'hidden',
-};
-
-export const inlineStyle_446_18 = {
-  color: '#212529',
-};
-
-export const inlineStyle_460_12 = {
-  flexDirection: 'row',
-  padding: 20,
-  gap: 12,
-  borderTopWidth: 1,
-  borderTopColor: '#e9ecef',
-};
-
-export const inlineStyle_472_14 = {
-  flex: 1,
-  paddingVertical: 14,
-  borderRadius: 12,
-  borderWidth: 1,
-  borderColor: '#6c757d',
-  alignItems: 'center',
-};
-
-export const inlineStyle_480_20 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#6c757d',
-};
+export const inlineStyle_243_18 = {
+  paddingVertical: 20,
+  alignItems: 'center',
+};
+
+export const inlineStyle_279_8 = {
+  justifyContent: 'flex-end',
+};
+
+export const inlineStyle_281_10 = {
+  backgroundColor: '#fff',
+  borderTopLeftRadius: 24,
+  borderTopRightRadius: 24,
+  maxHeight: '85%',
+  width: '100%',
+  flexDirection: 'column',
+  shadowColor: '#000',
+
+  shadowOffset: {
+    width: 0,
+    height: -4,
+  },
+
+  shadowOpacity: 0.1,
+  shadowRadius: 12,
+  elevation: 10,
+};
+
+export const inlineStyle_294_12 = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingHorizontal: 24,
+  paddingVertical: 20,
+  borderBottomWidth: 1,
+  borderBottomColor: '#F1F5F9',
+};
+
+export const inlineStyle_303_18 = {
+  fontSize: 20,
+  fontWeight: '700',
+  color: '#0F172A',
+};
+
+export const inlineStyle_308_14 = {
+  width: 32,
+  height: 32,
+  borderRadius: 16,
+  backgroundColor: '#F1F5F9',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_321_12 = {
+  padding: 24,
+};
+
+export const inlineStyle_324_18 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_326_16 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_338_16 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_351_18 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_353_16 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_365_16 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_378_18 = {
+  marginBottom: 8,
+};
+
+export const inlineStyle_380_16 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_389_16 = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_408_18 = {
+  flex: 1,
+  paddingVertical: 12,
+  paddingHorizontal: 12,
+  fontSize: 16,
+  color: '#212529',
+};
+
+export const inlineStyle_422_18 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_424_16 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_433_16 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  backgroundColor: '#f8f9fa',
+  overflow: 'hidden',
+};
+
+export const inlineStyle_446_18 = {
+  color: '#212529',
+};
+
+export const inlineStyle_460_12 = {
+  flexDirection: 'row',
+  padding: 20,
+  gap: 12,
+  borderTopWidth: 1,
+  borderTopColor: '#e9ecef',
+};
+
+export const inlineStyle_472_14 = {
+  flex: 1,
+  paddingVertical: 14,
+  borderRadius: 12,
+  borderWidth: 1,
+  borderColor: '#6c757d',
+  alignItems: 'center',
+};
+
+export const inlineStyle_480_20 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#6c757d',
+};
+
+/** Footer row for create-collaborator modal (app-community#686) */
+export const modalFooterRow = {
+  flexDirection: 'row',
+  padding: 20,
+  gap: 12,
+  borderTopWidth: 1,
+  borderTopColor: '#e9ecef',
+  flexShrink: 0,
+};
+
+export const modalCancelButton = {
+  flex: 1,
+  paddingVertical: 14,
+  borderRadius: 12,
+  borderWidth: 1,
+  borderColor: '#6c757d',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+export const modalCancelButtonText = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#6c757d',
+};
+
+export const modalSaveButton = {
+  flex: 1,
+  flexDirection: 'row',
+  paddingVertical: 14,
+  borderRadius: 12,
+  backgroundColor: '#4F46E5',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+};
+
+export const modalSaveButtonDisabled = {
+  opacity: 0.6,
+};
+
+export const modalSaveButtonText = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#fff',
+};

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

@@ -29,10 +29,13 @@ import {
   parseBrDateToYmd,
   LINK_TYPE_OPTIONS,
   normalizeLinkType,
+  resolveSeededLinkType,
+  PEOPLE_TYPE_OPTIONS,
+  normalizePeopleType,
   toPeopleIri,
 } from './generalTabHelpers';
 import FranchiseCommissionSection from './FranchiseCommissionSection';
-
+import useGeneralTabPeopleLink from './useGeneralTabPeopleLink';
 const GeneralTab = ({
   client,
   customStyles,
@@ -52,7 +55,6 @@ const GeneralTab = ({
   const peopleLinkActions = peopleLinkStore?.actions || {};
   const [isSavingRegistration, setIsSavingRegistration] = useState(false);
   const [isSavingLinkType, setIsSavingLinkType] = useState(false);
-  const [peopleLinkId, setPeopleLinkId] = useState('');
   const [linkTypeOptions, setLinkTypeOptions] = useState(
     LINK_TYPE_OPTIONS.map(option => ({
       value: option.value,
@@ -83,6 +85,15 @@ const GeneralTab = ({
     String(registrationForm.peopleType || '').toUpperCase() === 'F' &&
     String(parentCompanyIri || '').startsWith('/people/') &&
     String(contactPeopleIri || '').startsWith('/people/');
+  const {peopleLinkId, setPeopleLinkId} = useGeneralTabPeopleLink({
+    canEditLinkType,
+    getItems: peopleLinkActions?.getItems,
+    contactPeopleIri,
+    parentCompanyIri,
+    clientLinkType: client?.linkType,
+    setRegistrationForm,
+    setOriginalRegistrationForm,
+  });
 
   useEffect(() => {
     const initial = {
@@ -90,13 +101,23 @@ const GeneralTab = ({
       alias: normalizeIdentityValue(client?.alias),
       dateBr: formatYmdToBr(client?.foundationDate),
       enable: normalizeEnable(client?.enable ?? client?.enabled),
-      peopleType: String(client?.peopleType || 'J').toUpperCase(),
-      linkType: normalizeLinkType(initialContactLinkType),
+      peopleType: normalizePeopleType(client?.peopleType || 'J'),
+      linkType: resolveSeededLinkType(client?.linkType, initialContactLinkType),
     };
 
     setRegistrationForm(initial);
     setOriginalRegistrationForm(initial);
-  }, [client?.id, client?.name, client?.alias, client?.foundationDate, client?.enable, client?.enabled, client?.peopleType, initialContactLinkType]);
+  }, [
+    client?.id,
+    client?.name,
+    client?.alias,
+    client?.foundationDate,
+    client?.enable,
+    client?.enabled,
+    client?.peopleType,
+    client?.linkType,
+    initialContactLinkType,
+  ]);
 
   useEffect(() => {
     setLinkTypeOptions(
@@ -107,39 +128,7 @@ const GeneralTab = ({
     );
   }, []);
 
-  useEffect(() => {
-    if (!canEditLinkType || !peopleLinkActions?.getItems) {
-      return;
-    }
-
-    let cancelled = false;
-
-    peopleLinkActions
-      .getItems({
-        people: extractId(contactPeopleIri),
-        company: extractId(parentCompanyIri),
-      })
-      .then(items => {
-        if (cancelled || !Array.isArray(items) || items.length === 0) {
-          return;
-        }
-
-        const link = items[0];
-        const nextLinkType = normalizeLinkType(link?.linkType);
-        const nextLinkId = String(link?.id || link?.['@id'] || '').replace(/\D/g, '');
-
-        setPeopleLinkId(nextLinkId);
-        setRegistrationForm(prev => ({ ...prev, linkType: nextLinkType }));
-        setOriginalRegistrationForm(prev => ({ ...prev, linkType: nextLinkType }));
-      })
-      .catch(() => {});
-
-    return () => {
-      cancelled = true;
-    };
-  }, [canEditLinkType, contactPeopleIri, parentCompanyIri, peopleLinkActions]);
-
-  const isPessoaFisica = registrationForm.peopleType === 'F';
+  const isPessoaFisica = normalizePeopleType(registrationForm.peopleType) === 'F';
   const isAvatarUploadDisabled = isSavingClientAvatar;
   const avatarUploadLabel = isPessoaFisica ? 'subir avatar' : 'subir ícone';
   const nameLabel = isPessoaFisica ? global.t?.t('users','label','name') : global.t?.t('users','label','companyName');
@@ -152,6 +141,8 @@ const GeneralTab = ({
       normalizeIdentityValue(registrationForm.alias) !== normalizeIdentityValue(originalRegistrationForm.alias) ||
       String(registrationForm.dateBr || '') !== String(originalRegistrationForm.dateBr || '') ||
       Boolean(registrationForm.enable) !== Boolean(originalRegistrationForm.enable) ||
+      normalizePeopleType(registrationForm.peopleType) !==
+        normalizePeopleType(originalRegistrationForm.peopleType) ||
       (canEditLinkType &&
         normalizeLinkType(registrationForm.linkType) !==
           normalizeLinkType(originalRegistrationForm.linkType))
@@ -197,12 +188,19 @@ const GeneralTab = ({
 
       if (linkTypeChanged && peopleLinkActions?.save) {
         setIsSavingLinkType(true);
-        const savedLink = await peopleLinkActions.save({
-          ...(peopleLinkId ? { id: peopleLinkId } : {}),
-          company: parentCompanyIri,
-          people: contactPeopleIri,
-          linkType: normalizeLinkType(registrationForm.linkType),
-        });
+        // On update send only id + linkType — avoid denormalizing people IRI
+        // which triggered "Item not found for /people/{id}" (#688).
+        const linkPayload = peopleLinkId
+          ? {
+              id: peopleLinkId,
+              linkType: normalizeLinkType(registrationForm.linkType),
+            }
+          : {
+              company: parentCompanyIri,
+              people: contactPeopleIri,
+              linkType: normalizeLinkType(registrationForm.linkType),
+            };
+        const savedLink = await peopleLinkActions.save(linkPayload);
 
         const nextLinkId = String(savedLink?.id || savedLink?.['@id'] || '').replace(/\D/g, '');
         if (nextLinkId) {
@@ -210,10 +208,12 @@ const GeneralTab = ({
         }
       }
 
+      const peopleType = normalizePeopleType(registrationForm.peopleType);
       const payload = {
         name,
         alias,
         enable: Boolean(registrationForm.enable),
+        peopleType,
       };
 
       if (foundationDate) {
@@ -225,6 +225,7 @@ const GeneralTab = ({
       onUpdateClient?.('name', name);
       onUpdateClient?.('alias', alias);
       onUpdateClient?.('enable', Boolean(registrationForm.enable));
+      onUpdateClient?.('peopleType', peopleType);
       if (canEditLinkType) {
         onUpdateClient?.('linkType', normalizeLinkType(registrationForm.linkType));
       }
@@ -237,6 +238,7 @@ const GeneralTab = ({
         name,
         alias,
         enable: Boolean(registrationForm.enable),
+        peopleType,
         dateBr: foundationDate ? formatYmdToBr(foundationDate) : registrationForm.dateBr,
         linkType: normalizeLinkType(registrationForm.linkType),
       };
@@ -244,8 +246,17 @@ const GeneralTab = ({
       setRegistrationForm(updated);
       setOriginalRegistrationForm(updated);
       showSuccess?.(global.t?.t('users','success','registrationUpdated'));
-    } catch {
-      showError?.(global.t?.t('users','error','registrationUpdateFailed'));
+    } catch (error) {
+      const apiMessage =
+        error?.response?.data?.detail ||
+        error?.response?.data?.description ||
+        error?.message ||
+        '';
+      showError?.(
+        apiMessage
+          ? `${global.t?.t('users','error','registrationUpdateFailed') || 'Registration Update Failed'}\n${apiMessage}`
+          : global.t?.t('users','error','registrationUpdateFailed'),
+      );
     } finally {
       setIsSavingLinkType(false);
       setIsSavingRegistration(false);
@@ -376,6 +387,33 @@ const GeneralTab = ({
           </View>
         </View>
 
+        {isEditing && (
+          <View style={styles.fieldGroup}>
+            <Text style={styles.fieldLabel}>Tipo</Text>
+            <View style={styles.inputRow}>
+              <Picker
+                selectedValue={normalizePeopleType(registrationForm.peopleType)}
+                onValueChange={value =>
+                  setRegistrationForm(prev => ({
+                    ...prev,
+                    peopleType: normalizePeopleType(value),
+                  }))
+                }
+                mode={pickerMode}
+                accessibilityLabel="Tipo de colaborador"
+                style={styles.inputRowField}>
+                {PEOPLE_TYPE_OPTIONS.map(option => (
+                  <Picker.Item
+                    key={option.value}
+                    label={option.label}
+                    value={option.value}
+                  />
+                ))}
+              </Picker>
+            </View>
+          </View>
+        )}
+
         {canEditLinkType && (
           <View style={styles.fieldGroup}>
             <Text style={styles.fieldLabel}>Tipo de Vinculo</Text>