@nyris/nyris-webapp 0.3.99 → 0.4.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.99",
+  "version": "0.4.0",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@google/genai": "^1.46.0",
-    "@nyris/nyris-api": "^0.3.99",
-    "@nyris/nyris-react-components": "^0.3.99",
+    "@nyris/nyris-api": "^0.4.0",
+    "@nyris/nyris-react-components": "^0.4.0",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/public/js/settings.example.js

@@ -49,6 +49,7 @@ var settings = {
     fallbackToElasticSearch: false,
     chat: true,
     findRelatedParts: true,
+    requestSupport: false,
   },
   // UI - theme
   theme: {
@@ -144,7 +145,8 @@ var settings = {
     typePlateResultsNoScopeLabel:
       'Scan your type plate to see only parts for your equipment.',
     typePlateResultsClearScopeLabel: 'Search all products',
-    typePlatePopupErrorMessage: 'The serial number was not found. Please check again.',
+    typePlatePopupErrorMessage:
+      'The serial number was not found. Please check again.',
     typePlateManualInputLabel: "Can't scan? Enter serial number manually.",
     typePlateManualInputPlaceholder: 'e.g. 2234GH',
     typePlateWhereToFindTitle: 'Where to find it',

package/src/components/ChatAssistant/ChatAssistant.test.tsx

@@ -0,0 +1,213 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import useConversationStore from 'stores/chat/conversationStore';
+import ChatAssistant from './ChatAssistant';
+import MobileChatAssistant from './MobileChatAssistant';
+
+const mockSendMessage = jest.fn();
+const mockProducts = {
+  productsFromAlgolia: [],
+  productsFromFindApi: [],
+  firstSearchResults: [],
+  imageAnalysis: {} as any,
+  setFindApiProducts: jest.fn(),
+  setFullResultPool: jest.fn(),
+};
+const mockRequest = { requestImages: [], regions: [] };
+
+jest.mock('hooks/useGoodResultsChat', () => ({
+  useGoodResultsChat: () => ({ sendMessage: mockSendMessage }),
+}));
+jest.mock('hooks/useBadResultsRecovery', () => ({
+  useBadResultsRecovery: () => ({ sendMessage: mockSendMessage }),
+}));
+jest.mock('services/vizo', () => ({ chatAnalysis: jest.fn() }));
+jest.mock('utils/compressImage', () => ({ compressImage: jest.fn() }));
+jest.mock('utils/relatedParts', () => ({
+  loadRelatedPartsTable: jest.fn(),
+  lookupRelatedParts: jest.fn(),
+}));
+jest.mock('utils/fetchProductImage', () => ({
+  fetchProductImageBase64: jest.fn(),
+  getProductImageUrl: jest.fn(),
+}));
+jest.mock('utils/nyrisApiKey', () => ({ getEffectiveApiKey: jest.fn() }));
+jest.mock('stores/result/resultStore', () => ({
+  __esModule: true,
+  default: Object.assign((selector: any) => selector(mockProducts), {
+    getState: () => mockProducts,
+  }),
+}));
+jest.mock('stores/request/requestStore', () => ({
+  __esModule: true,
+  default: Object.assign((selector: any) => selector(mockRequest), {
+    getState: () => mockRequest,
+  }),
+}));
+jest.mock('stores/ui/uiStore', () => ({
+  __esModule: true,
+  default: (selector: any) =>
+    selector({
+      toggleAiMode: jest.fn(),
+      setIsAiModeOpen: jest.fn(),
+    }),
+}));
+jest.mock('@nyris/nyris-react-components', () => ({ Icon: () => null }));
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (value: string) => value }),
+}));
+jest.mock('components/Tooltip/TooltipComponent', () => ({
+  __esModule: true,
+  default: ({ children }: any) => children,
+}));
+jest.mock('components/CustomCameraDrawer', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+jest.mock('components/ImageUpload', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+jest.mock('components/Inquiry/InquiryModal', () => ({
+  __esModule: true,
+  default: ({ setIsInquiryModalOpen }: any) => (
+    <div role="dialog" aria-label="Support inquiry">
+      <button onClick={() => setIsInquiryModalOpen(false)}>
+        Close inquiry
+      </button>
+    </div>
+  ),
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  HTMLElement.prototype.scrollIntoView = jest.fn();
+  window.settings = {
+    algolia: { enabled: false },
+    vizo: { findRelatedParts: false, requestSupport: true },
+    support: { emailInquiry: false, emailTemplateId: '' },
+  } as typeof window.settings;
+  mockProducts.firstSearchResults = [];
+  mockProducts.imageAnalysis = {};
+  useConversationStore.getState().reset();
+  mockSendMessage.mockImplementation(async (content: string) => {
+    const store = useConversationStore.getState();
+    store.addMessage({ role: 'user', content });
+    store.setIsLoading(true);
+    store.addMessage(
+      {
+        role: 'assistant',
+        content: 'Let us keep looking.',
+        options: [{ label: 'Continue search', action_type: 'filter' }],
+      },
+      { isApiResponse: true },
+    );
+    store.setIsLoading(false);
+  });
+});
+
+test.each([
+  { name: 'desktop', Component: ChatAssistant },
+  { name: 'mobile', Component: MobileChatAssistant },
+])(
+  '$name offers an inquiry without blocking continued chat',
+  async ({ Component }) => {
+    render(<Component />);
+    const input = screen.getByRole('textbox');
+    const sendMessage = async () => {
+      fireEvent.change(input, { target: { value: 'Still looking' } });
+      // eslint-disable-next-line testing-library/no-node-access
+      fireEvent.submit(input.closest('form')!);
+      await waitFor(() => expect(input).toHaveValue(''));
+    };
+
+    await sendMessage();
+    await sendMessage();
+    expect(
+      screen.queryByRole('button', { name: 'Request support' }),
+    ).toBeNull();
+    await sendMessage();
+
+    const supportButton = await screen.findByRole('button', {
+      name: 'Request support',
+    });
+    expect(HTMLElement.prototype.scrollIntoView).toHaveBeenLastCalledWith({
+      behavior: 'auto',
+      block: 'end',
+    });
+    const supportSection = screen.getByRole('complementary', {
+      name: 'Human support',
+    });
+    expect(
+      within(supportSection).getByText(
+        'Still not finding it? Our team can help. Send us a quick email',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      within(supportSection).getByRole('button', { name: 'Request support' }),
+    ).toBe(supportButton);
+    const replyButtons = screen.getAllByRole('button', {
+      name: 'Continue search',
+    });
+    expect(replyButtons[replyButtons.length - 1]).toBeEnabled();
+    fireEvent.click(supportButton);
+    expect(
+      screen.getByRole('dialog', { name: 'Support inquiry' }),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Close inquiry' }));
+
+    await sendMessage();
+    expect(mockSendMessage).toHaveBeenCalledTimes(4);
+    expect(
+      screen.getAllByRole('button', { name: 'Request support' }),
+    ).toHaveLength(1);
+    expect(supportButton).toBeEnabled();
+    fireEvent.click(supportButton);
+    expect(
+      screen.getByRole('dialog', { name: 'Support inquiry' }),
+    ).toBeInTheDocument();
+  },
+);
+
+test('offers related parts again after restoring original results when enabled', async () => {
+  const originalResults: any = [{ id: 'original-result' }];
+  mockProducts.firstSearchResults = originalResults;
+  mockProducts.imageAnalysis = {
+    specification: { product_category: 'pump' },
+  };
+  window.settings.vizo!.findRelatedParts = true;
+
+  const store = useConversationStore.getState();
+  store.setRelatedPartsUsed(true);
+  store.setRelatedPartsTableSuggestions([
+    { label: 'Motor', description: 'Replacement motor' },
+  ]);
+  store.addMessage({
+    role: 'assistant',
+    content: 'Filtered results',
+    options: [
+      {
+        label: 'Go back to original results',
+        action_type: 'restore_original',
+        value: 'restore',
+      },
+    ],
+  });
+
+  render(<ChatAssistant />);
+  fireEvent.click(
+    screen.getByRole('button', { name: 'Go back to original results' }),
+  );
+
+  expect(
+    await screen.findByRole('button', {
+      name: 'Find parts related to pump',
+    }),
+  ).toBeInTheDocument();
+  expect(useConversationStore.getState().relatedPartsUsed).toBe(false);
+});

package/src/components/ChatAssistant/ChatAssistant.tsx

@@ -7,6 +7,7 @@ import { Icon } from '@nyris/nyris-react-components';
 import useUiStore from 'stores/ui/uiStore';
 import OptionChip, { ChatOption } from './OptionChip';
 import { useChatAssistantLogic } from './useChatAssistantLogic';
+import InquiryModal from 'components/Inquiry/InquiryModal';
 
 function ChatAssistant() {
   const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -26,8 +27,14 @@ function ChatAssistant() {
     handleSendMessage,
     handleOptionClick,
     handleImageUpload,
+    isSupportInquiryOpen,
+    setIsSupportInquiryOpen,
+    requestImage,
+    selectedRegion,
   } = useChatAssistantLogic();
 
+  const latestChatMessageId = messages[messages.length - 1]?.id;
+
   const setIsOpen = useConversationStore(s => s.setIsOpen);
 
   const toggleAiMode = useUiStore(state => state.toggleAiMode);
@@ -56,6 +63,15 @@ function ChatAssistant() {
         'bg-[radial-gradient(ellipse_at_70%_7%,_#F3F4F8_50%,_#E4E3FF_100%)]',
       ])}
     >
+      {isSupportInquiryOpen && (
+        <InquiryModal
+          requestImage={requestImage}
+          selectedRegion={selectedRegion}
+          isInquiryModalOpen={isSupportInquiryOpen}
+          setIsInquiryModalOpen={setIsSupportInquiryOpen}
+          allowEmailFallback
+        />
+      )}
       <div
         className="absolute top-3 right-4 bg-[#FAFAFA] w-7 h-7 flex justify-center items-center rounded-lg cursor-pointer"
         onClick={() => {
@@ -144,7 +160,8 @@ function ChatAssistant() {
                                 option={option}
                                 onClick={wrappedHandleOptionClick}
                                 disabled={
-                                  isLoading || i !== messages.length - 1
+                                  option.action_type !== 'request_support' &&
+                                  (isLoading || msg.id !== latestChatMessageId)
                                 }
                               />
                             ))}

package/src/components/ChatAssistant/MobileChatAssistant.tsx

@@ -9,6 +9,7 @@ import CustomCamera from 'components/CustomCameraDrawer';
 import ImageUpload from 'components/ImageUpload';
 import OptionChip, { ChatOption } from './OptionChip';
 import { useChatAssistantLogic } from './useChatAssistantLogic';
+import InquiryModal from 'components/Inquiry/InquiryModal';
 
 function MobileChatAssistant() {
   const { t } = useTranslation();
@@ -30,8 +31,14 @@ function MobileChatAssistant() {
     handleSendMessage,
     handleOptionClick,
     handleImageUpload,
+    isSupportInquiryOpen,
+    setIsSupportInquiryOpen,
+    requestImage,
+    selectedRegion,
   } = useChatAssistantLogic();
 
+  const latestChatMessageId = messages[messages.length - 1]?.id;
+
   const setIsAiModeOpen = useUiStore(state => state.setIsAiModeOpen);
 
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
@@ -52,6 +59,15 @@ function MobileChatAssistant() {
 
   return (
     <div className="fixed inset-x-0 bottom-0 z-[50] flex flex-col justify-end max-h-[50vh]">
+      {isSupportInquiryOpen && (
+        <InquiryModal
+          requestImage={requestImage}
+          selectedRegion={selectedRegion}
+          isInquiryModalOpen={isSupportInquiryOpen}
+          setIsInquiryModalOpen={setIsSupportInquiryOpen}
+          allowEmailFallback
+        />
+      )}
       {/* Chat container — anchored to bottom, content-based height, max 50vh */}
       <div
         className={twMerge(
@@ -143,7 +159,8 @@ function MobileChatAssistant() {
                                 option={option}
                                 onClick={wrappedHandleOptionClick}
                                 disabled={
-                                  isLoading || i !== messages.length - 1
+                                  option.action_type !== 'request_support' &&
+                                  (isLoading || msg.id !== latestChatMessageId)
                                 }
                               />
                             ))}

package/src/components/ChatAssistant/OptionChip.tsx

@@ -1,4 +1,4 @@
-import { RotateCcw, Search, Wrench } from 'lucide-react';
+import { Mail, RotateCcw, Search, Wrench } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
 
 import Tooltip from 'components/Tooltip/TooltipComponent';
@@ -27,6 +27,28 @@ function OptionChip({ option, onClick, disabled = false }: OptionChipProps) {
   const displayText =
     isFilter && option.value?.trim() ? option.value : option.label;
 
+  if (option.action_type === 'request_support') {
+    return (
+      <aside
+        aria-label="Human support"
+        className="w-full mt-2 border-t border-solid border-[#B9D5CE] pt-3"
+      >
+        <p className="text-sm leading-5 text-[#27443D] mb-3">
+          Still not finding it? Our team can help. Send us a quick email
+        </p>
+        <button
+          type="button"
+          onClick={() => onClick(option)}
+          disabled={disabled}
+          className="inline-flex items-center justify-center gap-2 min-h-[36px] px-3 py-2 rounded-md bg-[#0F766E] text-white text-xs font-semibold hover:bg-[#115E59] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0F766E] disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <Mail size={14} className="shrink-0" aria-hidden="true" />
+          {displayText}
+        </button>
+      </aside>
+    );
+  }
+
   return (
     <Tooltip content={displayText} disabled={displayText.length <= 32}>
       <button

package/src/components/ChatAssistant/useChatAssistantLogic.ts

@@ -6,6 +6,7 @@ import useRequestStore from 'stores/request/requestStore';
 import { useGoodResultsChat } from 'hooks/useGoodResultsChat';
 import { useBadResultsRecovery } from 'hooks/useBadResultsRecovery';
 import { chatAnalysis } from 'services/vizo';
+import { getChatProductMetadata } from 'utils/chatProductMetadata';
 import { compressImage } from 'utils/compressImage';
 import { loadRelatedPartsTable, lookupRelatedParts } from 'utils/relatedParts';
 import {
@@ -20,6 +21,7 @@ export function useChatAssistantLogic() {
   const imageInputRef = useRef<HTMLInputElement>(null);
 
   const [findingRelatedParts, setFindingRelatedParts] = useState(false);
+  const [isSupportInquiryOpen, setIsSupportInquiryOpen] = useState(false);
 
   // Conversation store
   const isEvaluated = useConversationStore(s => s.isEvaluated);
@@ -27,6 +29,7 @@ export function useChatAssistantLogic() {
   const messages = useConversationStore(s => s.messages);
   const isLoading = useConversationStore(s => s.isLoading);
   const error = useConversationStore(s => s.error);
+  const sessionId = useConversationStore(s => s.sessionId);
   const catalogSearchReady = useConversationStore(s => s.catalogSearchReady);
   const setCatalogSearchReady = useConversationStore(
     s => s.setCatalogSearchReady,
@@ -54,6 +57,7 @@ export function useChatAssistantLogic() {
 
   // Request store
   const requestImages = useRequestStore(state => state.requestImages);
+  const regions = useRequestStore(state => state.regions);
 
   const p2TriggeredRef = useRef(false);
 
@@ -69,6 +73,10 @@ export function useChatAssistantLogic() {
   // Catalog search state
   const [catalogSearching, setCatalogSearching] = useState(false);
 
+  useEffect(() => {
+    setIsSupportInquiryOpen(false);
+  }, [sessionId]);
+
   // Helper to get the correct product setter
   const getSetProducts = useCallback(() => {
     return setFindApiProducts;
@@ -100,7 +108,7 @@ export function useChatAssistantLogic() {
 
   // Auto-scroll
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    messagesEndRef.current?.scrollIntoView({ behavior: 'auto', block: 'end' });
   }, [messages]);
 
   // ── Handlers ──
@@ -131,6 +139,11 @@ export function useChatAssistantLogic() {
 
   const handleOptionClick = useCallback(
     async (option: any) => {
+      if (option.action_type === 'request_support') {
+        setIsSupportInquiryOpen(true);
+        return;
+      }
+
       if (option.action_type === 'text_search_prompt') {
         setInputValue('');
         const store = useConversationStore.getState();
@@ -187,9 +200,23 @@ export function useChatAssistantLogic() {
           setProducts(restoreResults);
           setFullResultPool(restoreResults);
           store.setPreCatalogResults(null);
+          store.setRelatedPartsUsed(false);
+          const relatedPartsOption =
+            window.settings.vizo?.findRelatedParts &&
+            store.relatedPartsTableSuggestions.length > 0
+              ? [
+                  {
+                    label: `Find parts related to ${imageAnalysis?.specification?.product_category || 'request image'}`,
+                    action_type: 'find_related_parts' as const,
+                    key: 'find_related',
+                    value: 'find_related_parts',
+                  },
+                ]
+              : [];
           store.addMessage({
             role: 'assistant',
             content: `Restored your original ${restoreResults.length} result${restoreResults.length === 1 ? '' : 's'} from the initial image search. Feel free to keep filtering or run a new catalog search.`,
+            options: relatedPartsOption,
           });
         } else {
           store.addMessage({
@@ -300,12 +327,7 @@ export function useChatAssistantLogic() {
         const visibleProducts = currentProducts.slice(0, 30);
         const productList = visibleProducts.map((p: any, i: number) => ({
           rank: i + 1,
-          sku: p.sku || p.objectID || `product-${i}`,
-          title: p.title || p.name || 'Untitled',
-          brand: p.brand || '',
-          description: (p.description || '').substring(0, 150),
-          categories: p.categories || [],
-          mpn: p.customIds?.mpn || p.ids?.mpn || '',
+          metadata: getChatProductMetadata(p),
         }));
 
         const productImages = await Promise.all(
@@ -350,17 +372,12 @@ export function useChatAssistantLogic() {
 ${productContextNotice}
 
 PRODUCT LIST:
-Each result includes a unique SKU in brackets. Use the result thumbnails and metadata together when deciding which current results match the uploaded image. Return matched_indices as 1-based ranks from this list.
+Each JSON result includes a 1-based rank and complete product metadata, including identifiers when available. Use the result thumbnails and metadata together when deciding which current results match the uploaded image. Return matched_indices as 1-based rank values from this list.
 `,
         });
 
         productList.forEach((product, index) => {
-          const currentProduct = visibleProducts[index];
-          const tags = currentProduct?._tags;
-          const tagStr = tags
-            ? ` | TAGS: type=${tags.productType}, color=${tags.color}, shape=${tags.shape}, material=${tags.material}`
-            : '';
-          const metadata = `${product.rank}. [${product.sku}] ${product.title} | brand: ${product.brand} | mpn: ${product.mpn} | categories: ${JSON.stringify(product.categories)} | desc: ${product.description}${tagStr}`;
+          const metadata = JSON.stringify(product);
 
           if (hasVisualContext && productImages[index]?.base64) {
             parts.push({
@@ -730,6 +747,10 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
     activeProducts,
     productsFromAlgolia,
     findingRelatedParts,
+    isSupportInquiryOpen,
+    setIsSupportInquiryOpen,
+    requestImage: requestImages[0],
+    selectedRegion: regions[0],
 
     // Refs
     messagesEndRef,

package/src/components/Inquiry/InquiryModal.tsx

@@ -8,7 +8,7 @@ import { Icon } from '@nyris/nyris-react-components';
 import useRequestStore from 'stores/request/requestStore';
 import { getCroppedCanvas } from 'utils/misc';
 import { ToastHelper } from 'helpers/ToastHelper';
-import { Dialog, DialogContent } from 'components/Modal/Dialog';
+import { Dialog, DialogContent, DialogTitle } from 'components/Modal/Dialog';
 import { AutosizeTextarea } from 'components/AutosizeTextArea';
 import Tooltip from 'components/Tooltip/TooltipComponent';
 
@@ -21,6 +21,7 @@ interface Props {
   selectedRegion: any;
   setIsInquiryModalOpen: any;
   isInquiryModalOpen?: any;
+  allowEmailFallback?: boolean;
 }
 // eslint-disable-next-line
 const emailRegex = /.+\@.+\..+$/;
@@ -44,6 +45,7 @@ export default function InquiryModal({
   selectedRegion,
   setIsInquiryModalOpen,
   isInquiryModalOpen,
+  allowEmailFallback = false,
 }: Props) {
   const settings = window.settings;
   const preFilter = useRequestStore(state => state.preFilter);
@@ -56,6 +58,27 @@ export default function InquiryModal({
   const [emailValid, setEmailValid] = useState<boolean | undefined>(undefined);
 
   const [information, setInformation] = useState('');
+  const useEmailClient =
+    allowEmailFallback && !settings.support?.emailTemplateId;
+  // encodeURIComponent, not URLSearchParams: mailto (RFC 6068) needs spaces as %20, not +
+  const supportEmailHref = `mailto:support@nyris.io?subject=${encodeURIComponent(
+    'Vizo support request',
+  )}&body=${encodeURIComponent(`Email: ${email.trim()}\n\n${information}`)}`;
+  const submitStyle: React.CSSProperties = {
+    height: '66px',
+    display: 'flex',
+    alignItems: 'center',
+    width: '50%',
+    backgroundColor: emailValid
+      ? settings.theme?.primaryColor || '#0F766E'
+      : '#E9E9EC',
+    color: emailValid ? '#fff' : '#AAABB5',
+    fontSize: '14px',
+    paddingLeft: '16px',
+    border: 'none',
+    cursor: emailValid ? 'pointer' : 'default',
+    textDecoration: 'none',
+  };
 
   const setFormattedContent = React.useCallback(
     (text: string) => {
@@ -189,7 +212,8 @@ export default function InquiryModal({
     >
       <DialogContent
         closeButton={false}
-        className="w-[360px] desktop:w-[378px] flex flex-col bg-white p-0"
+        aria-describedby={undefined}
+        className="w-[360px] desktop:w-[378px] max-w-[calc(100vw-32px)] max-h-[calc(100dvh-32px)] overflow-y-auto flex flex-col bg-white p-0"
       >
         <div>
           <div
@@ -200,7 +224,8 @@ export default function InquiryModal({
               justifyContent: 'space-between',
             }}
           >
-            <p
+            <DialogTitle
+              className="text-sm leading-normal tracking-normal"
               style={{
                 color: '#2B2C46',
                 fontWeight: 'bold',
@@ -209,8 +234,10 @@ export default function InquiryModal({
               {requestImage
                 ? t('Submit your image for inquiry')
                 : t('Submit your inquiry')}
-            </p>
-            <div
+            </DialogTitle>
+            <button
+              type="button"
+              aria-label={t('Close')}
               onClick={() => setIsInquiryModalOpen(false)}
               style={{ display: 'flex', padding: '1px' }}
             >
@@ -222,7 +249,7 @@ export default function InquiryModal({
                   cursor: 'pointer',
                 }}
               />
-            </div>
+            </button>
           </div>
           {requestImage && (
             <div
@@ -381,26 +408,31 @@ export default function InquiryModal({
             >
               {t('Cancel')}
             </button>
-            <button
-              style={{
-                height: '66px',
-                display: 'flex',
-                alignItems: 'center',
-                width: '50%',
-                backgroundColor: emailValid
-                  ? settings.theme?.primaryColor
-                  : '#E9E9EC',
-                color: emailValid ? '#fff' : '#AAABB5',
-                fontSize: '14px',
-                paddingLeft: '16px',
-                border: 'none',
-                cursor: emailValid ? 'pointer' : 'normal',
-              }}
-              disabled={!emailValid}
-              onClick={handleInquiry}
-            >
-              {t('Send')}
-            </button>
+            {useEmailClient ? (
+              <a
+                style={submitStyle}
+                href={emailValid ? supportEmailHref : undefined}
+                aria-disabled={!emailValid}
+                tabIndex={emailValid ? 0 : -1}
+                onClick={event => {
+                  if (!emailValid) {
+                    event.preventDefault();
+                    return;
+                  }
+                  trackClick(CLICK_SUBTYPE.RAISE_INQUIRY);
+                }}
+              >
+                {t('Open email')}
+              </a>
+            ) : (
+              <button
+                style={submitStyle}
+                disabled={!emailValid}
+                onClick={handleInquiry}
+              >
+                {t('Send')}
+              </button>
+            )}
           </div>
         </div>
       </DialogContent>