@homefile/components-v2 2.51.2 → 2.51.3

package/dist/assets/locales/en/index.json

@@ -786,7 +786,11 @@
         "logoTitle": "Upload your company logo",
         "logoHelper": "Upload your logo as a high-resolution .eps file for best quality. If that's not available, .png will work as well, but not preferred.",
         "uploadMessage": "Drag & Drop your Files or",
-        "uploadMessageAction": "Choose Files to Upload."
+        "uploadMessageAction": "Choose Files to Upload.",
+        "uploadMessagePreparing": "Preparing upload...",
+        "uploadMessageUploading": "Uploading logo...",
+        "uploadMessageFinalizing": "Finalizing logo...",
+        "logoPreviewAlt": "Brand logo preview"
       },
       "services": {
         "title": "2. Add Your Services",

package/dist/assets/locales/pt/index.json

@@ -16,5 +16,15 @@
     "signupBt": "Criar conta",
     "signin": "Já possui uma conta Homefile?",
     "signinBt": "Log in"
+  },
+  "partner": {
+    "wizardSteps": {
+      "brand": {
+        "uploadMessagePreparing": "Preparando upload...",
+        "uploadMessageUploading": "Enviando logo...",
+        "uploadMessageFinalizing": "Finalizando logo...",
+        "logoPreviewAlt": "Prévia da logo da marca"
+      }
+    }
   }
 }

package/dist/components/partner/wizardSteps/PartnerWizardStepBrand.d.ts

@@ -1,6 +1,2 @@
-interface PartnerWizardStepBrandI {
-    logoUploading?: boolean;
-    onLogoUpload?: (file: File) => void;
-}
-export declare const PartnerWizardStepBrand: ({ logoUploading, onLogoUpload, }: PartnerWizardStepBrandI) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { PartnerWizardStepBrandI } from '../../../interfaces';
+export declare const PartnerWizardStepBrand: ({ value, onChange, errors, disabled, readOnly, logoUploading, logoUploadState, logoAccept, logoMaxFiles, onLogoUpload, }: PartnerWizardStepBrandI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/partner/wizardSteps/PartnerWizardStepBrand.js

@@ -1,26 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { t } from 'i18next';
 import { useDropzone } from 'react-dropzone';
 import { Box, Flex, Stack, Text } from '@chakra-ui/react';
 import { DragDropArea, TextInput } from '../../../components';
 import { PartnerWizardStepLayout } from './PartnerWizardStepLayout';
-export const PartnerWizardStepBrand = ({ logoUploading = false, onLogoUpload, }) => {
-    const [tagline, setTagline] = useState('');
-    const [websiteUrl, setWebsiteUrl] = useState('');
+const buildDefaultValue = () => ({
+    marketingTagline: '',
+    websiteUrl: '',
+    logoUrl: '',
+});
+export const PartnerWizardStepBrand = ({ value, onChange, errors, disabled = false, readOnly = false, logoUploading = false, logoUploadState, logoAccept = {
+    'image/gif': ['.gif'],
+    'image/jpeg': ['.jpeg', '.jpg'],
+    'image/png': ['.png'],
+    'image/webp': ['.webp'],
+}, logoMaxFiles = 1, onLogoUpload, }) => {
+    const [internalValue, setInternalValue] = useState(buildDefaultValue);
+    const currentValue = value !== null && value !== void 0 ? value : internalValue;
+    const isDisabled = disabled || readOnly;
+    const isLogoUploading = logoUploading ||
+        logoUploadState === 'requesting_signed_url' ||
+        logoUploadState === 'uploading_to_storage' ||
+        logoUploadState === 'finalizing';
+    const handleValueChange = (next) => {
+        var _a;
+        if (!value)
+            setInternalValue(Object.assign(Object.assign({}, next), { logoUrl: (_a = next.logoUrl) !== null && _a !== void 0 ? _a : '' }));
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
     const { getInputProps, getRootProps } = useDropzone({
-        accept: {
-            'application/postscript': ['.eps'],
-            'image/jpeg': ['.jpeg', '.jpg'],
-            'image/png': ['.png'],
-        },
-        disabled: logoUploading,
-        maxFiles: 1,
+        accept: logoAccept,
+        disabled: isLogoUploading || isDisabled,
+        maxFiles: logoMaxFiles,
         multiple: false,
         onDrop: (acceptedFiles) => {
             const selectedFile = acceptedFiles[0];
             selectedFile && (onLogoUpload === null || onLogoUpload === void 0 ? void 0 : onLogoUpload(selectedFile));
         },
     });
-    return (_jsxs(PartnerWizardStepLayout, { title: t('partner.wizardSteps.brand.title'), subtitle: t('partner.wizardSteps.brand.subtitle'), children: [_jsxs(Flex, { gap: "base", direction: { base: 'column', md: 'row' }, children: [_jsx(Box, { flex: "7", children: _jsx(TextInput, { id: "partnerWizardTagline", placeholder: t('partner.wizardSteps.brand.taglinePlaceholder'), value: tagline, handleChange: (event) => setTagline(event.target.value), hint: t('partner.wizardSteps.brand.taglineHelper') }) }), _jsx(Box, { flex: "5", children: _jsx(TextInput, { id: "partnerWizardWebsite", placeholder: t('partner.wizardSteps.brand.websitePlaceholder'), value: websiteUrl, handleChange: (event) => setWebsiteUrl(event.target.value), hint: t('partner.wizardSteps.brand.websiteHelper') }) })] }), _jsx(Box, { bg: "lightBlue.12", p: "base", borderRadius: "sm", children: _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { children: t('partner.wizardSteps.brand.logoTitle') }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: t('partner.wizardSteps.brand.logoHelper') }), _jsx(DragDropArea, { height: "130px", getInputProps: getInputProps, getRootProps: getRootProps, message: t('partner.wizardSteps.brand.uploadMessage'), message2: t('partner.wizardSteps.brand.uploadMessageAction'), disabled: logoUploading, bg: "transparent" })] }) })] }));
+    const uploadMessage = useMemo(() => {
+        if (logoUploadState === 'requesting_signed_url') {
+            return t('partner.wizardSteps.brand.uploadMessagePreparing');
+        }
+        if (logoUploadState === 'uploading_to_storage') {
+            return t('partner.wizardSteps.brand.uploadMessageUploading');
+        }
+        if (logoUploadState === 'finalizing') {
+            return t('partner.wizardSteps.brand.uploadMessageFinalizing');
+        }
+        return t('partner.wizardSteps.brand.uploadMessage');
+    }, [logoUploadState]);
+    return (_jsxs(PartnerWizardStepLayout, { title: t('partner.wizardSteps.brand.title'), subtitle: t('partner.wizardSteps.brand.subtitle'), children: [_jsxs(Flex, { gap: "base", direction: { base: 'column', md: 'row' }, children: [_jsx(Box, { flex: "7", children: _jsx(TextInput, { id: "partnerWizardTagline", placeholder: t('partner.wizardSteps.brand.taglinePlaceholder'), value: currentValue.marketingTagline, handleChange: (event) => handleValueChange(Object.assign(Object.assign({}, currentValue), { marketingTagline: event.target.value })), hint: (errors === null || errors === void 0 ? void 0 : errors.marketingTagline) || t('partner.wizardSteps.brand.taglineHelper'), isDisabled: isDisabled }) }), _jsx(Box, { flex: "5", children: _jsx(TextInput, { id: "partnerWizardWebsite", placeholder: t('partner.wizardSteps.brand.websitePlaceholder'), value: currentValue.websiteUrl, handleChange: (event) => handleValueChange(Object.assign(Object.assign({}, currentValue), { websiteUrl: event.target.value })), hint: (errors === null || errors === void 0 ? void 0 : errors.websiteUrl) || t('partner.wizardSteps.brand.websiteHelper'), isDisabled: isDisabled }) })] }), _jsx(Box, { bg: "lightBlue.12", p: "base", borderRadius: "sm", children: _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { children: t('partner.wizardSteps.brand.logoTitle') }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: (errors === null || errors === void 0 ? void 0 : errors.logo) || t('partner.wizardSteps.brand.logoHelper') }), _jsx(DragDropArea, { height: "130px", getInputProps: getInputProps, getRootProps: getRootProps, message: uploadMessage, message2: t('partner.wizardSteps.brand.uploadMessageAction'), disabled: isLogoUploading || isDisabled, bg: "transparent" }), currentValue.logoUrl ? (_jsx(Box, { children: _jsx("img", { src: currentValue.logoUrl, alt: t('partner.wizardSteps.brand.logoPreviewAlt'), style: { maxHeight: '64px' } }) })) : null] }) })] }));
 };

package/dist/interfaces/partner/PartnerWizardStepBrand.interface.d.ts

@@ -0,0 +1,24 @@
+export type PartnerWizardStepBrandValue = {
+    websiteUrl: string;
+    marketingTagline: string;
+    logoUrl?: string;
+};
+export type PartnerWizardStepBrandErrors = {
+    websiteUrl?: string;
+    marketingTagline?: string;
+    logo?: string;
+};
+export type PartnerWizardStepBrandLogoUploadState = 'idle' | 'requesting_signed_url' | 'uploading_to_storage' | 'finalizing' | 'done' | 'error';
+export type PartnerWizardStepBrandI = {
+    value?: PartnerWizardStepBrandValue;
+    onChange?: (next: PartnerWizardStepBrandValue) => void;
+    errors?: PartnerWizardStepBrandErrors;
+    disabled?: boolean;
+    readOnly?: boolean;
+    logoUploading?: boolean;
+    logoUploadState?: PartnerWizardStepBrandLogoUploadState;
+    logoAccept?: Record<string, string[]>;
+    logoMaxFiles?: number;
+    onLogoUpload?: (file: File) => void | Promise<void>;
+    onLogoRemove?: () => void;
+};

package/dist/interfaces/partner/PartnerWizardStepBrand.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/partner/index.d.ts

@@ -19,3 +19,4 @@ export * from './PartnerServiceTicketsToolbar.interface';
 export * from './ShortPartnerTile.interface';
 export * from './PartnerWizardSteps.interface';
 export * from './PartnerWizardStepServicesSelect.interface';
+export * from './PartnerWizardStepBrand.interface';

package/dist/interfaces/partner/index.js

@@ -19,3 +19,4 @@ export * from './PartnerServiceTicketsToolbar.interface';
 export * from './ShortPartnerTile.interface';
 export * from './PartnerWizardSteps.interface';
 export * from './PartnerWizardStepServicesSelect.interface';
+export * from './PartnerWizardStepBrand.interface';

package/dist/stories/partner/wizardSteps/PartnerWizardStepBrand.stories.d.ts

@@ -4,4 +4,14 @@ export default _default;
 export declare const Brand: (args: {
     logoUploading?: boolean;
     onLogoUpload?: (file: File) => void;
+    value?: {
+        websiteUrl: string;
+        marketingTagline: string;
+        logoUrl?: string;
+    };
+    onChange?: (next: {
+        websiteUrl: string;
+        marketingTagline: string;
+        logoUrl?: string;
+    }) => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/partner/wizardSteps/PartnerWizardStepBrand.stories.js

@@ -8,6 +8,12 @@ export default {
     args: {
         logoUploading: false,
         onLogoUpload: action('onLogoUpload'),
+        value: {
+            websiteUrl: 'https://poolie.com',
+            marketingTagline: 'Pool Experts',
+            logoUrl: '',
+        },
+        onChange: action('onChange'),
     },
     decorators: [
         (Story) => (_jsx(Box, { maxW: "960px", mx: "auto", p: "base", children: _jsx(Story, {}) })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.51.2",
+  "version": "2.51.3",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",