IO-3515 Improved feedback layout.

This commit is contained in:
Patrick Fic
2026-03-19 14:54:40 -07:00
parent b2231007b6
commit 5812d53efc
2 changed files with 41 additions and 28 deletions

View File

@@ -79,7 +79,7 @@ function BillAiFeedback({ billForm, rawAIData }) {
return ( return (
<Form form={form} onFinish={submitFeedback} requiredMark={false}> <Form form={form} onFinish={submitFeedback} requiredMark={false}>
<Space align="top" size="large"> <Space wrap align="top" size="small">
<Form.Item name="rating" label={t("bills.labels.ai.feedback_prompt")} rules={[{ required: true }]}> <Form.Item name="rating" label={t("bills.labels.ai.feedback_prompt")} rules={[{ required: true }]}>
<Radio.Group optionType="button" buttonStyle="solid"> <Radio.Group optionType="button" buttonStyle="solid">
<Radio.Button value="up"> <Radio.Button value="up">
@@ -91,13 +91,19 @@ function BillAiFeedback({ billForm, rawAIData }) {
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Space wrap size="small" orientation="vertical">
<Form.Item name="comments"> <Form.Item name="comments">
<Input.TextArea rows={1} placeholder={t("bills.labels.ai.feedback_placeholder")} /> <Input.TextArea
rows={3}
style={{ minWidth: "400px" }}
placeholder={t("bills.labels.ai.feedback_placeholder")}
/>
</Form.Item> </Form.Item>
<Button onClick={() => form.submit()} loading={submitting} disabled={submitting}> <Button onClick={() => form.submit()} loading={submitting} disabled={submitting}>
{t("bills.labels.ai.submit_feedback")} {t("bills.labels.ai.submit_feedback")}
</Button> </Button>
</Space> </Space>
</Space>
</Form> </Form>
); );
} }

View File

@@ -1,6 +1,6 @@
import { useApolloClient, useMutation } from "@apollo/client/react"; import { useApolloClient, useMutation } from "@apollo/client/react";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react"; import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Button, Checkbox, Form, Modal, Space } from "antd"; import { Button, Checkbox, Divider, Form, Modal, Space } from "antd";
import _ from "lodash"; import _ from "lodash";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -477,8 +477,14 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
setLoading(false); setLoading(false);
}} }}
footer={ footer={
<Space align="top"> <Space orientation="vertical">
{isAiScan && <BillAiFeedback billForm={form} rawAIData={rawAIData} />} {isAiScan && (
<>
<BillAiFeedback billForm={form} rawAIData={rawAIData} />
<Divider orientation="horizontal" />
</>
)}
<Space wrap align="top">
<Checkbox checked={generateLabel} onChange={(e) => setGenerateLabel(e.target.checked)}> <Checkbox checked={generateLabel} onChange={(e) => setGenerateLabel(e.target.checked)}>
{t("bills.labels.generatepartslabel")} {t("bills.labels.generatepartslabel")}
</Checkbox> </Checkbox>
@@ -499,6 +505,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
</Button> </Button>
)} )}
</Space> </Space>
</Space>
} }
destroyOnHidden destroyOnHidden
> >