From a04fc87d35d4d8b502de2af455261ffb41eccf5c Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 29 May 2025 17:58:55 -0300
Subject: [PATCH 01/42] layout and basic style

---
 client/disputes/new-evidence/index.tsx  | 194 ++++++++++++++++++++----
 client/disputes/new-evidence/style.scss |  33 ++++
 2 files changed, 196 insertions(+), 31 deletions(-)
 create mode 100644 client/disputes/new-evidence/style.scss

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index d3bb3ee0147..01713f173c3 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -3,18 +3,27 @@
 /**
  * External dependencies
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 /**
  * Internal dependencies.
  */
-import { Button } from 'wcpay/components/wp-components-wrapped';
-import '../style.scss';
+import { Button, HorizontalRule } from 'wcpay/components/wp-components-wrapped';
+import { getAdminUrl } from 'wcpay/utils';
 import {
 	Stepper,
 	StepperPanel,
 	useStepperContext,
 } from 'wcpay/components/stepper';
+import {
+	Accordion,
+	AccordionBody,
+	AccordionRow,
+} from 'wcpay/components/accordion';
+import Page from 'wcpay/components/page';
+
+import '../style.scss';
+import './style.scss';
 
 interface StepProps {
 	name: string;
@@ -26,9 +35,6 @@ const StepOne: React.FC< StepProps > = () => {
 		<div>
 			<h2>General evidence</h2>
 			<p>Provide general evidence for your dispute.</p>
-			<Button variant="primary" onClick={ nextStep }>
-				Next
-			</Button>
 		</div>
 	);
 };
@@ -39,12 +45,6 @@ const StepTwo: React.FC< StepProps > = () => {
 		<div>
 			<h2>Shipping information</h2>
 			<p>Provide shipping details if applicable.</p>
-			<Button variant="secondary" onClick={ prevStep }>
-				Previous
-			</Button>
-			<Button variant="primary" onClick={ nextStep }>
-				Next
-			</Button>
 		</div>
 	);
 };
@@ -55,12 +55,6 @@ const StepThree: React.FC< StepProps > = () => {
 		<div>
 			<h2>Review</h2>
 			<p>Review your information before submitting.</p>
-			<Button variant="secondary" onClick={ prevStep }>
-				Previous
-			</Button>
-			<Button variant="primary" disabled>
-				Submit
-			</Button>
 		</div>
 	);
 };
@@ -69,20 +63,158 @@ const steps = [ 'General evidence', 'Shipping information', 'Review' ];
 
 export default () => {
 	const [ currentStep, setCurrentStep ] = useState( 0 );
+	const [ isAccordionOpen, setIsAccordionOpen ] = useState(
+		currentStep === 0
+	);
 
-	return (
-		<>
-			<StepperPanel steps={ steps } currentStep={ currentStep } />
-			<Stepper
-				initialStep={ steps[ currentStep ] }
-				onStepChange={ ( step ) =>
-					setCurrentStep( steps.indexOf( step ) )
-				}
+	useEffect( () => {
+		setIsAccordionOpen( currentStep === 0 );
+	}, [ currentStep ] );
+
+	// TODO: Replace with real dispute ID from props or router
+	const disputeId = '123';
+
+	const handleCancel = () => {
+		window.location.href = getAdminUrl( {
+			page: 'wc-admin',
+			path: '/payments/disputes/details',
+			id: disputeId,
+		} );
+	};
+
+	const handleSaveForLater = () => {
+		// TODO: Implement save for later logic
+		alert( 'Save for later (not implemented)' );
+	};
+
+	const handleNext = () => setCurrentStep( ( s ) => s + 1 );
+	const handleBack = () => setCurrentStep( ( s ) => s - 1 );
+	const handleSubmit = () => {
+		// TODO: Implement submit logic
+		alert( 'Submit (not implemented)' );
+	};
+
+	const renderButtons = () => {
+		if ( currentStep === 0 ) {
+			return (
+				<div
+					style={ {
+						display: 'flex',
+						justifyContent: 'space-between',
+						marginTop: 32,
+					} }
+				>
+					<Button variant="secondary" onClick={ handleCancel }>
+						Cancel
+					</Button>
+					<div>
+						<Button
+							variant="tertiary"
+							onClick={ handleSaveForLater }
+							style={ { marginRight: 8 } }
+						>
+							Save for later
+						</Button>
+						<Button variant="primary" onClick={ handleNext }>
+							Next
+						</Button>
+					</div>
+				</div>
+			);
+		}
+		if ( currentStep === 1 ) {
+			return (
+				<div
+					style={ {
+						display: 'flex',
+						justifyContent: 'space-between',
+						marginTop: 32,
+					} }
+				>
+					<Button variant="secondary" onClick={ handleBack }>
+						Back
+					</Button>
+					<div>
+						<Button
+							variant="tertiary"
+							onClick={ handleSaveForLater }
+							style={ { marginRight: 8 } }
+						>
+							Save for later
+						</Button>
+						<Button variant="primary" onClick={ handleNext }>
+							Next
+						</Button>
+					</div>
+				</div>
+			);
+		}
+		// Step 2 (index 2): Review
+		return (
+			<div
+				style={ {
+					display: 'flex',
+					justifyContent: 'space-between',
+					marginTop: 32,
+				} }
 			>
-				<StepOne name="General evidence" />
-				<StepTwo name="Shipping information" />
-				<StepThree name="Review" />
-			</Stepper>
-		</>
+				<Button variant="secondary" onClick={ handleBack }>
+					Back
+				</Button>
+				<div>
+					<Button
+						variant="tertiary"
+						onClick={ handleSaveForLater }
+						style={ { marginRight: 8 } }
+					>
+						Save for later
+					</Button>
+					<Button variant="primary" onClick={ handleSubmit }>
+						Submit
+					</Button>
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<Page maxWidth={ 1032 } className="wcpay-dispute-evidence">
+			<div className="wcpay-dispute-evidence-new">
+				{ /* Section 1: Accordion */ }
+				<Accordion highDensity>
+					<AccordionBody
+						title="Challenge dispute"
+						opened={ isAccordionOpen }
+						onToggle={ setIsAccordionOpen }
+					>
+						<AccordionRow>
+							<div className="evidence-summary__body">
+								{ /* Placeholder: Replace with summary and notice content in next step */ }
+								<p>Dispute summary and details go here.</p>
+							</div>
+						</AccordionRow>
+					</AccordionBody>
+				</Accordion>
+
+				{ /* Section 2: Stepper */ }
+				<div className="wcpay-dispute-evidence-new__stepper-section">
+					<StepperPanel steps={ steps } currentStep={ currentStep } />
+					<HorizontalRule className="wcpay-dispute-evidence-new__stepper-divider" />
+					<div className="wcpay-dispute-evidence-new__stepper-content">
+						<Stepper
+							initialStep={ steps[ currentStep ] }
+							onStepChange={ ( step ) =>
+								setCurrentStep( steps.indexOf( step ) )
+							}
+						>
+							<StepOne name="General evidence" />
+							<StepTwo name="Shipping information" />
+							<StepThree name="Review" />
+						</Stepper>
+						{ renderButtons() }
+					</div>
+				</div>
+			</div>
+		</Page>
 	);
 };
diff --git a/client/disputes/new-evidence/style.scss b/client/disputes/new-evidence/style.scss
new file mode 100644
index 00000000000..d51d72a095c
--- /dev/null
+++ b/client/disputes/new-evidence/style.scss
@@ -0,0 +1,33 @@
+// Container for the new-evidence page
+.wcpay-dispute-evidence-new {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+
+	&__stepper-divider {
+		margin: 0;
+	}
+}
+
+// Stepper section background to match accordion
+.wcpay-dispute-evidence-new__stepper-section {
+	background: $white; // Same as .wcpay-accordion
+	border: $border-width solid $gray-200;
+	padding: 0 24px 24px 24px;
+}
+
+// Optional: Card spacing and button spacing, copied from disputes style
+.wcpay-dispute-evidence-new .components-card {
+	margin-bottom: 24px;
+}
+
+.wcpay-dispute-evidence-new .components-button + .components-button {
+	margin-left: 10px;
+}
+
+// Limit the width of the stepper content and center it
+.wcpay-dispute-evidence-new__stepper-content {
+	max-width: 500px;
+	margin-left: auto;
+	margin-right: auto;
+}

From 067dd8982dd2ddfeccffd4c55dc548ce94b91205 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 29 May 2025 18:37:14 -0300
Subject: [PATCH 02/42] styles and fixing navigation

---
 client/disputes/new-evidence/index.tsx  | 132 +++++++++++-------------
 client/disputes/new-evidence/style.scss |  39 +++++++
 2 files changed, 97 insertions(+), 74 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 01713f173c3..53b51c45541 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -10,11 +10,7 @@ import React, { useState, useEffect } from 'react';
  */
 import { Button, HorizontalRule } from 'wcpay/components/wp-components-wrapped';
 import { getAdminUrl } from 'wcpay/utils';
-import {
-	Stepper,
-	StepperPanel,
-	useStepperContext,
-} from 'wcpay/components/stepper';
+import { StepperPanel } from 'wcpay/components/stepper';
 import {
 	Accordion,
 	AccordionBody,
@@ -22,44 +18,62 @@ import {
 } from 'wcpay/components/accordion';
 import Page from 'wcpay/components/page';
 
-import '../style.scss';
 import './style.scss';
 
 interface StepProps {
-	name: string;
+	heading: string;
+	subheading: string;
 }
 
-const StepOne: React.FC< StepProps > = () => {
-	const { nextStep } = useStepperContext();
+const Step: React.FC< StepProps > = ( { heading, subheading } ) => {
 	return (
 		<div>
-			<h2>General evidence</h2>
-			<p>Provide general evidence for your dispute.</p>
+			<h2 className="wcpay-dispute-evidence-new__stepper-title">
+				{ heading }
+			</h2>
+			<p className="wcpay-dispute-evidence-new__stepper-subheading">
+				{ subheading }
+			</p>
 		</div>
 	);
 };
 
-const StepTwo: React.FC< StepProps > = () => {
-	const { nextStep, prevStep } = useStepperContext();
-	return (
-		<div>
-			<h2>Shipping information</h2>
-			<p>Provide shipping details if applicable.</p>
-		</div>
-	);
-};
-
-const StepThree: React.FC< StepProps > = () => {
-	const { prevStep } = useStepperContext();
-	return (
-		<div>
-			<h2>Review</h2>
-			<p>Review your information before submitting.</p>
-		</div>
-	);
-};
-
-const steps = [ 'General evidence', 'Shipping information', 'Review' ];
+const panelHeadings = [ 'General evidence', 'Shipping information', 'Review' ];
+
+const steps = [
+	{
+		heading: 'Let’s gather the basics',
+		subheading:
+			'To make a stronger case, please provide as much info as possible. We prefilled some fields for you, please double check and upload all the necessary documents.',
+	},
+	{
+		heading: 'Shipping details',
+		subheading: 'Please make sure all the shipping information is correct.',
+	},
+	{
+		heading: 'Review the cover letter',
+		subheading:
+			'Please review the cover letter that will be submitted to the bank based on the information you provided. You can make changes to it or add additional details.',
+	},
+];
+
+const stepComponents = [
+	<Step
+		heading={ steps[ 0 ].heading }
+		subheading={ steps[ 0 ].subheading }
+		key="step-1"
+	/>,
+	<Step
+		heading={ steps[ 1 ].heading }
+		subheading={ steps[ 1 ].subheading }
+		key="step-2"
+	/>,
+	<Step
+		heading={ steps[ 2 ].heading }
+		subheading={ steps[ 2 ].subheading }
+		key="step-3"
+	/>,
+];
 
 export default () => {
 	const [ currentStep, setCurrentStep ] = useState( 0 );
@@ -97,21 +111,14 @@ export default () => {
 	const renderButtons = () => {
 		if ( currentStep === 0 ) {
 			return (
-				<div
-					style={ {
-						display: 'flex',
-						justifyContent: 'space-between',
-						marginTop: 32,
-					} }
-				>
+				<div className="wcpay-dispute-evidence-new__button-row">
 					<Button variant="secondary" onClick={ handleCancel }>
 						Cancel
 					</Button>
-					<div>
+					<div className="wcpay-dispute-evidence-new__button-group-right">
 						<Button
 							variant="tertiary"
 							onClick={ handleSaveForLater }
-							style={ { marginRight: 8 } }
 						>
 							Save for later
 						</Button>
@@ -124,21 +131,14 @@ export default () => {
 		}
 		if ( currentStep === 1 ) {
 			return (
-				<div
-					style={ {
-						display: 'flex',
-						justifyContent: 'space-between',
-						marginTop: 32,
-					} }
-				>
+				<div className="wcpay-dispute-evidence-new__button-row">
 					<Button variant="secondary" onClick={ handleBack }>
 						Back
 					</Button>
-					<div>
+					<div className="wcpay-dispute-evidence-new__button-group-right">
 						<Button
 							variant="tertiary"
 							onClick={ handleSaveForLater }
-							style={ { marginRight: 8 } }
 						>
 							Save for later
 						</Button>
@@ -151,22 +151,12 @@ export default () => {
 		}
 		// Step 2 (index 2): Review
 		return (
-			<div
-				style={ {
-					display: 'flex',
-					justifyContent: 'space-between',
-					marginTop: 32,
-				} }
-			>
+			<div className="wcpay-dispute-evidence-new__button-row">
 				<Button variant="secondary" onClick={ handleBack }>
 					Back
 				</Button>
-				<div>
-					<Button
-						variant="tertiary"
-						onClick={ handleSaveForLater }
-						style={ { marginRight: 8 } }
-					>
+				<div className="wcpay-dispute-evidence-new__button-group-right">
+					<Button variant="tertiary" onClick={ handleSaveForLater }>
 						Save for later
 					</Button>
 					<Button variant="primary" onClick={ handleSubmit }>
@@ -198,19 +188,13 @@ export default () => {
 
 				{ /* Section 2: Stepper */ }
 				<div className="wcpay-dispute-evidence-new__stepper-section">
-					<StepperPanel steps={ steps } currentStep={ currentStep } />
+					<StepperPanel
+						steps={ panelHeadings }
+						currentStep={ currentStep }
+					/>
 					<HorizontalRule className="wcpay-dispute-evidence-new__stepper-divider" />
 					<div className="wcpay-dispute-evidence-new__stepper-content">
-						<Stepper
-							initialStep={ steps[ currentStep ] }
-							onStepChange={ ( step ) =>
-								setCurrentStep( steps.indexOf( step ) )
-							}
-						>
-							<StepOne name="General evidence" />
-							<StepTwo name="Shipping information" />
-							<StepThree name="Review" />
-						</Stepper>
+						{ stepComponents[ currentStep ] }
 						{ renderButtons() }
 					</div>
 				</div>
diff --git a/client/disputes/new-evidence/style.scss b/client/disputes/new-evidence/style.scss
index d51d72a095c..e301177557d 100644
--- a/client/disputes/new-evidence/style.scss
+++ b/client/disputes/new-evidence/style.scss
@@ -31,3 +31,42 @@
 	margin-left: auto;
 	margin-right: auto;
 }
+
+.wcpay-dispute-evidence-new__stepper-title {
+	color: var( --Scales-Grays-gray-900, $gray-900 );
+	/* Heading XL */
+	font-size: var( --xl, 20px );
+	font-style: normal;
+	font-weight: var( --Medium, 500 );
+	line-height: var( --m, 24px ); /* 120% */
+
+	margin-top: 24px;
+	margin-bottom: 12px;
+}
+
+.wcpay-dispute-evidence-new__stepper-subheading {
+	color: var( --Scales-Grays-gray-700, $gray-700 );
+	/* Body MD */
+	font-size: var( --m, 13px );
+	font-style: normal;
+	font-weight: var( --Regular, 400 );
+	line-height: var( --s, 20px ); /* 153.846% */
+}
+
+.wcpay-dispute-evidence-new__button-row {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 32px;
+}
+
+.wcpay-dispute-evidence-new__button-group-right {
+	display: flex;
+	align-items: center;
+}
+
+// Add spacing between right-aligned buttons
+.wcpay-dispute-evidence-new__button-group-right
+	.components-button
+	+ .components-button {
+	margin-left: 8px;
+}

From f1960050cbfda42fffd523e2f42933653aeb0931 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 29 May 2025 19:33:23 -0300
Subject: [PATCH 03/42] add main logic

---
 client/disputes/new-evidence/fields.ts | 490 +++++++++++++++++++
 client/disputes/new-evidence/index.tsx | 648 +++++++++++++++++++++----
 2 files changed, 1032 insertions(+), 106 deletions(-)
 create mode 100644 client/disputes/new-evidence/fields.ts

diff --git a/client/disputes/new-evidence/fields.ts b/client/disputes/new-evidence/fields.ts
new file mode 100644
index 00000000000..ef8132ccfb4
--- /dev/null
+++ b/client/disputes/new-evidence/fields.ts
@@ -0,0 +1,490 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { includes } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Dispute reasons
+ */
+export type DisputeReason =
+	| 'fraudulent'
+	| 'product_not_received'
+	| 'product_unacceptable'
+	| 'duplicate'
+	| 'subscription_canceled'
+	| 'credit_not_processed'
+	| 'unrecognized';
+
+/**
+ * Product types
+ */
+export type ProductType =
+	| 'physical_product'
+	| 'digital_product_or_service'
+	| 'offline_service'
+	| 'multiple';
+
+export type FieldType = 'text' | 'textarea' | 'file' | 'date';
+
+export interface Field {
+	key: string;
+	label?: string;
+	description?: string | string[];
+	type: FieldType;
+	denormalized?: boolean;
+	productType?: ProductType;
+	maxLength?: number;
+}
+
+export interface Section {
+	key: string;
+	title: string;
+	description?: string;
+	fields: Field[];
+	reason?: DisputeReason | DisputeReason[];
+	productType?: ProductType;
+	denormalized?: boolean;
+}
+
+const sections: Section[] = [
+	{
+		key: 'general',
+		title: __( 'General evidence', 'woocommerce-payments' ),
+		description: __(
+			'Provide general evidence about the customer and the order.',
+			'woocommerce-payments'
+		),
+		fields: [
+			{
+				key: 'product_description',
+				label: __( 'Product description', 'woocommerce-payments' ),
+				maxLength: 20000,
+				type: 'textarea',
+				description: __(
+					'A description of the product or service and any relevant details on how this was presented to the customer at the time of purchase.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'customer_name',
+				label: __( 'Customer name', 'woocommerce-payments' ),
+				type: 'text',
+			},
+			{
+				key: 'customer_email_address',
+				label: __( 'Customer email', 'woocommerce-payments' ),
+				type: 'text',
+			},
+			{
+				key: 'customer_signature',
+				label: __( 'Customer signature', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					"A relevant document or contract showing the customer's signature (if available).",
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'billing_address',
+				label: __( 'Customer billing address', 'woocommerce-payments' ),
+				type: 'textarea',
+			},
+			{
+				key: 'customer_purchase_ip',
+				label: __( 'Customer IP address', 'woocommerce-payments' ),
+				type: 'text',
+			},
+			{
+				key: 'receipt',
+				label: __( 'Receipt', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					'Any receipt or message sent to the customer notifying them of the charge. This field will be automatically filled with a Stripe generated email receipt if any such receipt was sent.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'customer_communication',
+				label: __( 'Customer communication', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					'Any communication with the customer that you feel is relevant to your case (e.g. emails proving that they received the product or service, or demonstrating their use of or satisfaction with the product or service).',
+					'woocommerce-payments'
+				),
+			},
+		],
+	},
+	{
+		key: 'refund_policy_info',
+		title: __( 'Refund policy info', 'woocommerce-payments' ),
+		fields: [
+			{
+				key: 'refund_policy',
+				label: __( 'Refund policy', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					'Your refund policy, as shown or provided to the customer.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'refund_policy_disclosure',
+				label: __( 'Refund policy disclosure', 'woocommerce-payments' ),
+				maxLength: 20000,
+				type: 'textarea',
+				description: __(
+					'An explanation of how and when the customer was shown or provided your refund policy prior to purchase.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'refund_refusal_explanation',
+				label: __(
+					'Refund refusal explanation',
+					'woocommerce-payments'
+				),
+				maxLength: 20000,
+				type: 'textarea',
+				description: __(
+					'Your explanation for why the customer is not entitled to a refund.',
+					'woocommerce-payments'
+				),
+			},
+		],
+		reason: 'credit_not_processed',
+	},
+	{
+		key: 'duplicate_charge_info',
+		title: __( 'Duplicate charge info', 'woocommerce-payments' ),
+		fields: [
+			{
+				key: 'duplicate_charge_id',
+				label: __( 'Duplicate charge ID', 'woocommerce-payments' ),
+				type: 'text',
+				description: __(
+					'The charge ID for the previous payment that appears to be a duplicate of the one that is disputed.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'duplicate_charge_explanation',
+				label: __(
+					'Explanation of duplicate charge',
+					'woocommerce-payments'
+				),
+				maxLength: 20000,
+				type: 'textarea',
+				description: __(
+					'An explanation of the difference between the disputed payment and the prior one that appears to be a duplicate.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'duplicate_charge_documentation',
+				label: __(
+					'Duplicate charge documentation',
+					'woocommerce-payments'
+				),
+				type: 'file',
+				description: __(
+					'Upload documentation for the prior payment that can uniquely identify it, such as a separate receipt. This document should be paired with a similar document from the disputed payment that proves the two are separate. This should also include a separate shipping label or receipt for the other payment. If multiple products were shipped together, provide a packing list that shows each purchase.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'shipping_documentation',
+				label: __( 'Shipping documentation', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					'A shipping label or receipt for the disputed payment.',
+					'woocommerce-payments'
+				),
+				denormalized: true,
+				productType: 'physical_product',
+			},
+			{
+				key: 'service_documentation',
+				label: __( 'Service documentation', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					'A copy of a service agreement or documentation for the disputed payment.',
+					'woocommerce-payments'
+				),
+				denormalized: true,
+				productType: 'offline_service',
+			},
+		],
+		reason: 'duplicate',
+	},
+	{
+		key: 'shipping_information',
+		title: __( 'Shipping information', 'woocommerce-payments' ),
+		fields: [
+			{
+				key: 'shipping_carrier',
+				label: __( 'Shipping carrier', 'woocommerce-payments' ),
+				type: 'text',
+				description: __(
+					'The delivery service that shipped a physical product, such as Fedex, UPS, USPS, etc. If multiple carriers were used for this purchase, please separate them with commas.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'shipping_tracking_number',
+				label: __( 'Tracking number', 'woocommerce-payments' ),
+				type: 'text',
+				description: __(
+					'The tracking number (if available) for a physical product, obtained from the delivery service. If multiple tracking numbers were generated for this purchase, please separate them with commas. When we compile your evidence into a single document, these tracking numbers will be expanded to include detailed delivery information from the carrier.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'shipping_documentation',
+				label: __( 'Proof of shipping', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					'Provide documentation as proof that a product was shipped to the cardholder at the same address the cardholder provided to you. This could include a copy of the shipment receipt or label, and show the full shipping address of the cardholder, if possible.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'shipping_date',
+				label: __( 'Date of shipment', 'woocommerce-payments' ),
+				type: 'date',
+				description: __(
+					'The date on which a physical product began its route to the shipping address. This date should be prior to the date of the dispute.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'shipping_address',
+				label: __( 'Shipping address', 'woocommerce-payments' ),
+				type: 'textarea',
+				description: __(
+					'The address to which a physical product was shipped. The shipping address must match a billing address verified with AVS. (A signature is not required as evidence of delivery).',
+					'woocommerce-payments'
+				),
+			},
+		],
+		reason: [
+			'fraudulent',
+			'product_not_received',
+			'product_unacceptable',
+			'unrecognized',
+		],
+		productType: 'physical_product',
+	},
+	{
+		key: 'cancellation_policy_info',
+		title: __( 'Cancellation policy info', 'woocommerce-payments' ),
+		fields: [
+			{
+				key: 'cancellation_policy',
+				label: __( 'Cancellation policy', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					'Your subscription cancellation policy, as shown to the customer.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'cancellation_policy_disclosure',
+				label: __(
+					'Cancellation policy disclosure',
+					'woocommerce-payments'
+				),
+				maxLength: 20000,
+				type: 'textarea',
+				description: __(
+					'An explanation of how and when the customer was shown your cancellation policy prior to purchase.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'cancellation_rebuttal',
+				label: __( 'Cancellation rebuttal', 'woocommerce-payments' ),
+				maxLength: 20000,
+				type: 'textarea',
+				description: __(
+					"A justification for why the customer's subscription was not canceled.",
+					'woocommerce-payments'
+				),
+			},
+		],
+		reason: 'subscription_canceled',
+	},
+	{
+		key: 'download_and_activity_logs',
+		title: __( 'Download and activity logs', 'woocommerce-payments' ),
+		fields: [
+			{
+				key: 'access_activity_log',
+				type: 'file',
+				description: [
+					__(
+						'Provide at least two of the following pieces of information:',
+						'woocommerce-payments'
+					),
+					__(
+						"• Customer's IP address and their device's geographical location at the time of purchase",
+						'woocommerce-payments'
+					),
+					__(
+						'• Device ID and name of the device',
+						'woocommerce-payments'
+					),
+					__(
+						'• Customer name and email address linked to their customer profile',
+						'woocommerce-payments'
+					),
+					__(
+						'• Evidence that the customer logged into their account for your business before the transaction date',
+						'woocommerce-payments'
+					),
+					__(
+						'• Evidence that your website or app was accessed by the cardholder for purchase or services on or after the transaction date',
+						'woocommerce-payments'
+					),
+					__(
+						'• Evidence that the same device and card used in the disputed payment was used in a previous payment that was not disputed',
+						'woocommerce-payments'
+					),
+				],
+			},
+		],
+		reason: [ 'fraudulent', 'product_not_received' ],
+		productType: 'digital_product_or_service',
+	},
+	{
+		key: 'download_and_activity_logs',
+		title: __( 'Download and activity logs', 'woocommerce-payments' ),
+		fields: [
+			{
+				key: 'access_activity_log',
+				type: 'file',
+				description: __(
+					'Any server or activity logs showing proof that the cardholder accessed or downloaded the purchased digital product. This information should include IP addresses, corresponding timestamps, and any detailed recorded activity.',
+					'woocommerce-payments'
+				),
+			},
+		],
+		reason: [
+			'product_unacceptable',
+			'subscription_canceled',
+			'unrecognized',
+		],
+		productType: 'digital_product_or_service',
+		denormalized: true,
+	},
+	{
+		key: 'service_details',
+		title: __( 'Service details', 'woocommerce-payments' ),
+		fields: [
+			{
+				key: 'service_date',
+				label: __( 'Service date', 'woocommerce-payments' ),
+				type: 'date',
+				description: __(
+					'The date on which the cardholder received or began receiving the purchased service.',
+					'woocommerce-payments'
+				),
+			},
+			{
+				key: 'service_documentation',
+				label: __( 'Proof of service', 'woocommerce-payments' ),
+				type: 'file',
+				description: __(
+					'Documentation showing proof that a service was provided to the cardholder. This could include a copy of a signed contract, work order, or other form of written agreement.',
+					'woocommerce-payments'
+				),
+			},
+		],
+		reason: [
+			'fraudulent',
+			'product_not_received',
+			'product_unacceptable',
+			'subscription_canceled',
+			'unrecognized',
+		],
+		productType: 'offline_service',
+	},
+	{
+		key: 'uncategorized',
+		title: __( 'Additional details', 'woocommerce-payments' ),
+		description: __(
+			"Provide any extra evidence or statements you'd like the bank to see, either as text or by uploading a document.",
+			'woocommerce-payments'
+		),
+		fields: [
+			{
+				key: 'uncategorized_text',
+				label: __( 'Additional details', 'woocommerce-payments' ),
+				maxLength: 20000,
+				type: 'textarea',
+			},
+			{
+				key: 'uncategorized_file',
+				label: __( 'Additional document', 'woocommerce-payments' ),
+				type: 'file',
+			},
+		],
+	},
+];
+
+/**
+ * Return evidence fields that pertain to given reason and productType.
+ *
+ * Sections can optionally specify 'reason' as a string or array of strings, and/or 'productType'.
+ * Fields can optionally specify 'productType'.
+ * Sections and fields can specify denormalized: true to be omitted when all fields are shown.
+ *
+ * @param reason      Dispute reason for which to present fields.
+ * @param productType Product type for which to present fields.
+ *
+ * @return Sections of fields.
+ */
+export default function getEvidenceFields(
+	reason: DisputeReason,
+	productType: ProductType
+): Section[] {
+	if ( ! reason || ! productType ) {
+		return [];
+	}
+
+	if ( productType === 'multiple' ) {
+		return sections
+			.map( ( section ) => {
+				if ( section.denormalized ) {
+					return null;
+				}
+				return {
+					...section,
+					fields: section.fields.filter(
+						( field ) => ! field.denormalized
+					),
+				};
+			} )
+			.filter( Boolean ) as Section[];
+	}
+
+	return sections
+		.map( ( section ) => {
+			const reasonMismatch =
+				section.reason && ! includes( section.reason, reason );
+			const productTypeMismatch =
+				section.productType && section.productType !== productType;
+			if ( reasonMismatch || productTypeMismatch ) {
+				return null;
+			}
+			const fields = section.fields.filter( ( field ) => {
+				return ! field.productType || field.productType === productType;
+			} );
+			return { ...section, fields };
+		} )
+		.filter( Boolean ) as Section[];
+}
diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 53b51c45541..a4f4df19bd7 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -3,12 +3,35 @@
 /**
  * External dependencies
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
+import apiFetch from '@wordpress/api-fetch';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import useConfirmNavigation from 'utils/use-confirm-navigation';
+import { recordEvent } from 'tracks';
+import { FileUploadControl, UploadedReadOnly } from 'components/file-upload';
+import { TestModeNotice } from 'components/test-mode-notice';
+import ErrorBoundary from 'components/error-boundary';
+import Paragraphs from 'components/paragraphs';
+import { reasons } from 'wcpay/disputes/strings';
+import OrderLink from 'components/order-link';
+import DisputeNotice from 'payment-details/dispute-details/dispute-notice';
+import DisputeDueByDate from 'payment-details/dispute-details/dispute-due-by-date';
+import { ClickTooltip } from 'components/tooltip';
+import { HorizontalList } from 'components/horizontal-list';
+import { formatExplicitCurrency } from 'multi-currency/interface/functions';
+import { formatDateTimeFromTimestamp } from 'wcpay/utils/date-time';
+import { getBankName } from 'utils/charge';
+import evidenceFields, { DisputeReason, ProductType } from './fields';
 
 /**
  * Internal dependencies.
  */
-import { Button, HorizontalRule } from 'wcpay/components/wp-components-wrapped';
+import {
+	Button,
+	HorizontalRule,
+	SelectControl,
+} from 'wcpay/components/wp-components-wrapped';
 import { getAdminUrl } from 'wcpay/utils';
 import { StepperPanel } from 'wcpay/components/stepper';
 import {
@@ -20,29 +43,23 @@ import Page from 'wcpay/components/page';
 
 import './style.scss';
 
-interface StepProps {
-	heading: string;
-	subheading: string;
-}
-
-const Step: React.FC< StepProps > = ( { heading, subheading } ) => {
-	return (
-		<div>
-			<h2 className="wcpay-dispute-evidence-new__stepper-title">
-				{ heading }
-			</h2>
-			<p className="wcpay-dispute-evidence-new__stepper-subheading">
-				{ subheading }
-			</p>
-		</div>
-	);
-};
+// --- Utility: Determine if shipping is required for a given reason ---
+const ReasonsNeedShipping = [
+	'product_unacceptable',
+	'product_not_received',
+	'fraudulent',
+];
 
-const panelHeadings = [ 'General evidence', 'Shipping information', 'Review' ];
+const ReasonsNoShipping = [
+	'duplicate',
+	'subscription_canceled',
+	'credit_not_processed',
+];
 
+// Stepper headings/subheadings
 const steps = [
 	{
-		heading: 'Let’s gather the basics',
+		heading: "Let's gather the basics",
 		subheading:
 			'To make a stronger case, please provide as much info as possible. We prefilled some fields for you, please double check and upload all the necessary documents.',
 	},
@@ -57,148 +74,567 @@ const steps = [
 	},
 ];
 
-const stepComponents = [
-	<Step
-		heading={ steps[ 0 ].heading }
-		subheading={ steps[ 0 ].subheading }
-		key="step-1"
-	/>,
-	<Step
-		heading={ steps[ 1 ].heading }
-		subheading={ steps[ 1 ].subheading }
-		key="step-2"
-	/>,
-	<Step
-		heading={ steps[ 2 ].heading }
-		subheading={ steps[ 2 ].subheading }
-		key="step-3"
-	/>,
-];
+function needsShipping( reason: string | undefined ) {
+	if ( ! reason ) return true;
+	if ( ReasonsNoShipping.includes( reason ) ) return false;
+	if ( ReasonsNeedShipping.includes( reason ) ) return true;
+	return true;
+}
 
-export default () => {
+// --- Main Component ---
+export default ( { query }: { query: { id: string } } ) => {
+	const path = `/wc/v3/payments/disputes/${ query.id }`;
+	const [ dispute, setDispute ] = useState< any >();
+	const [ loading, setLoading ] = useState( false );
+	const [ evidence, setEvidence ] = useState< any >( {} );
+	const [ productType, setProductType ] = useState< string >( '' );
 	const [ currentStep, setCurrentStep ] = useState( 0 );
-	const [ isAccordionOpen, setIsAccordionOpen ] = useState(
-		currentStep === 0
-	);
+	const [ isAccordionOpen, setIsAccordionOpen ] = useState( true );
+	const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
+	const {
+		createSuccessNotice,
+		createErrorNotice,
+		createInfoNotice,
+	} = useDispatch( 'core/notices' );
+
+	// --- Data loading ---
+	useEffect( () => {
+		const fetchDispute = async () => {
+			setLoading( true );
+			try {
+				const d: any = await apiFetch( { path } );
+				setDispute( d );
+				setProductType( d.metadata?.__product_type || '' );
+			} finally {
+				setLoading( false );
+			}
+		};
+		fetchDispute();
+	}, [ path ] );
+
+	// --- Step logic ---
+	const disputeReason = dispute?.reason;
+	const hasShipping = needsShipping( disputeReason );
+	const panelHeadings = hasShipping
+		? [ 'General evidence', 'Shipping information', 'Review' ]
+		: [ 'General evidence', 'Review' ];
 
 	useEffect( () => {
 		setIsAccordionOpen( currentStep === 0 );
 	}, [ currentStep ] );
 
-	// TODO: Replace with real dispute ID from props or router
-	const disputeId = '123';
+	// --- Evidence fields ---
+	const fields = useMemo(
+		() =>
+			evidenceFields(
+				disputeReason as DisputeReason,
+				productType as ProductType
+			),
+		[ disputeReason, productType ]
+	);
+
+	// --- Read-only logic ---
+	const readOnly =
+		dispute &&
+		dispute.status !== 'needs_response' &&
+		dispute.status !== 'warning_needs_response';
 
-	const handleCancel = () => {
-		window.location.href = getAdminUrl( {
-			page: 'wc-admin',
-			path: '/payments/disputes/details',
-			id: disputeId,
-		} );
+	// --- Notices for error deduplication ---
+	const { getNotices } = useSelect(
+		( select: any ) => select( 'core/notices' ),
+		[]
+	);
+
+	// --- Evidence update helpers ---
+	const isEvidenceWithinLengthLimit = ( field: any, value: string ) => {
+		if ( field.maxLength && value.length >= field.maxLength ) {
+			return false;
+		}
+		// Optionally, add total length check here if needed
+		return true;
+	};
+	const updateEvidence = ( key: string, value: any, field?: any ) => {
+		if ( field && ! isEvidenceWithinLengthLimit( field, value ) ) {
+			const errorMessage = __(
+				'Reached maximum character count for evidence',
+				'woocommerce-payments'
+			);
+			if (
+				! getNotices().some(
+					( notice: any ) => notice.content === errorMessage
+				)
+			) {
+				createErrorNotice( errorMessage );
+			}
+			return;
+		}
+		setEvidence( ( e: any ) => ( { ...e, [ key ]: value } ) );
+	};
+	const updateProductType = ( newType: string ) => {
+		recordEvent( 'wcpay_dispute_product_selected', { selection: newType } );
+		setProductType( newType );
+	};
+
+	// --- File upload logic ---
+	const doUploadFile = async ( key: string, file: File ) => {
+		if ( ! file ) return;
+		// TODO: Add file size checks, error handling, etc.
+		try {
+			const body = new FormData();
+			body.append( 'file', file );
+			body.append( 'purpose', 'dispute_evidence' );
+			const uploadedFile: any = await apiFetch( {
+				path: '/wc/v3/payments/file',
+				method: 'post',
+				body,
+			} );
+			setEvidence( ( e: any ) => ( { ...e, [ key ]: uploadedFile.id } ) );
+		} catch ( err ) {
+			createErrorNotice( err.message );
+		}
 	};
+	const doRemoveFile = ( key: string ) =>
+		setEvidence( ( e: any ) => ( { ...e, [ key ]: '' } ) );
+
+	// --- Navigation warning ---
+	const pristine = useMemo(
+		() =>
+			JSON.stringify( evidence ) ===
+			JSON.stringify( dispute?.evidence || {} ),
+		[ evidence, dispute ]
+	);
+	const confirmationNavigationCallback = useConfirmNavigation( () => {
+		if ( pristine || redirectAfterSave ) return;
+		return __(
+			'There are unsaved changes on this page. Are you sure you want to leave and discard the unsaved changes?',
+			'woocommerce-payments'
+		);
+	} );
+	useEffect( () => {
+		confirmationNavigationCallback();
+	}, [ pristine, confirmationNavigationCallback, redirectAfterSave ] );
 
-	const handleSaveForLater = () => {
-		// TODO: Implement save for later logic
-		alert( 'Save for later (not implemented)' );
+	// --- Save/submit logic ---
+	const doSave = async ( submit: boolean ) => {
+		setLoading( true );
+		try {
+			await apiFetch( {
+				path,
+				method: 'post',
+				data: {
+					evidence: { ...dispute.evidence, ...evidence },
+					metadata: dispute.metadata,
+					submit,
+				},
+			} );
+			createSuccessNotice(
+				submit
+					? __( 'Evidence submitted!', 'woocommerce-payments' )
+					: __( 'Evidence saved!', 'woocommerce-payments' )
+			);
+			setRedirectAfterSave( true );
+		} catch ( err ) {
+			createErrorNotice( err.message );
+		} finally {
+			setLoading( false );
+		}
 	};
 
-	const handleNext = () => setCurrentStep( ( s ) => s + 1 );
-	const handleBack = () => setCurrentStep( ( s ) => s - 1 );
-	const handleSubmit = () => {
-		// TODO: Implement submit logic
-		alert( 'Submit (not implemented)' );
+	// --- Accordion summary content ---
+	const summaryItems = useMemo( () => {
+		if ( ! dispute ) return [];
+		const disputeReasonSummary = reasons[ dispute.reason ]?.summary || [];
+		return [
+			{
+				title: __( 'Dispute Amount', 'woocommerce-payments' ),
+				content: formatExplicitCurrency(
+					dispute.amount,
+					dispute.currency
+				),
+			},
+			{
+				title: __( 'Disputed On', 'woocommerce-payments' ),
+				content: dispute.created
+					? formatDateTimeFromTimestamp( dispute.created, {
+							separator: ', ',
+							includeTime: true,
+					  } )
+					: '–',
+			},
+			{
+				title: __( 'Reason', 'woocommerce-payments' ),
+				content: (
+					<>
+						{ reasons[ dispute.reason ]?.display || dispute.reason }
+						{ disputeReasonSummary.length > 0 && (
+							<ClickTooltip
+								buttonLabel={ __(
+									'Learn more',
+									'woocommerce-payments'
+								) }
+								content={
+									<div className="dispute-reason-tooltip">
+										<p>
+											{ reasons[ dispute.reason ]
+												?.display || dispute.reason }
+										</p>
+										<Paragraphs>
+											{ disputeReasonSummary }
+										</Paragraphs>
+										<p>
+											<a
+												href="https://woocommerce.com/document/woopayments/fraud-and-disputes/managing-disputes/"
+												target="_blank"
+												rel="noopener noreferrer"
+											>
+												{ __(
+													'Learn more',
+													'woocommerce-payments'
+												) }
+											</a>
+										</p>
+									</div>
+								}
+							/>
+						) }
+					</>
+				),
+			},
+			{
+				title: __( 'Respond By', 'woocommerce-payments' ),
+				content: (
+					<DisputeDueByDate
+						dueBy={ dispute.evidence_details?.due_by }
+					/>
+				),
+			},
+			{
+				title: __( 'Order', 'woocommerce-payments' ),
+				content: <OrderLink order={ dispute.order } />,
+			},
+		];
+	}, [ dispute ] );
+
+	// --- Step content ---
+	const renderStepContent = () => {
+		if ( ! fields.length ) return null;
+		// Helper to render a field with readOnly logic
+		const renderField = ( field: any ) => {
+			if ( field.type === 'file' ) {
+				return readOnly ? (
+					<UploadedReadOnly
+						key={ field.key }
+						field={ field }
+						fileName={ evidence[ field.key ] || '' }
+						showPreview={ false }
+						accept={ '.pdf, image/png, image/jpeg' }
+						isDone={ !! evidence[ field.key ] }
+						isLoading={ false }
+						error={ '' }
+						disabled={ true }
+						onFileChange={ async () => {} }
+						onFileRemove={ () => {} }
+					/>
+				) : (
+					<FileUploadControl
+						key={ field.key }
+						field={ field }
+						fileName={ evidence[ field.key ] || '' }
+						onFileChange={ ( _key: string, file: File ) =>
+							doUploadFile( field.key, file )
+						}
+						onFileRemove={ () => doRemoveFile( field.key ) }
+						accept={ '.pdf, image/png, image/jpeg' }
+						isDone={ !! evidence[ field.key ] }
+						isLoading={ false }
+						error={ '' }
+						disabled={ false }
+					/>
+				);
+			}
+			if ( field.type === 'text' ) {
+				return (
+					<input
+						key={ field.key }
+						type="text"
+						value={ evidence[ field.key ] || '' }
+						onChange={ ( e: any ) =>
+							updateEvidence( field.key, e.target.value, field )
+						}
+						className="components-text-control__input"
+						disabled={ readOnly }
+					/>
+				);
+			}
+			if ( field.type === 'date' ) {
+				return (
+					<input
+						key={ field.key }
+						type="date"
+						value={ evidence[ field.key ] || '' }
+						onChange={ ( e: any ) =>
+							updateEvidence( field.key, e.target.value, field )
+						}
+						className="components-text-control__input"
+						disabled={ readOnly }
+					/>
+				);
+			}
+			// textarea
+			return (
+				<textarea
+					key={ field.key }
+					value={ evidence[ field.key ] || '' }
+					onChange={ ( e: any ) =>
+						updateEvidence( field.key, e.target.value, field )
+					}
+					maxLength={ field.maxLength }
+					className="components-textarea-control__input"
+					disabled={ readOnly }
+				/>
+			);
+		};
+		if ( currentStep === 0 ) {
+			return (
+				<>
+					<h2 className="wcpay-dispute-evidence-new__stepper-title">
+						{ steps[ 0 ].heading }
+					</h2>
+					<p className="wcpay-dispute-evidence-new__stepper-subheading">
+						{ steps[ 0 ].subheading }
+					</p>
+					<SelectControl
+						label={ __( 'Product type', 'woocommerce-payments' ) }
+						value={ productType }
+						onChange={ updateProductType }
+						options={ [
+							{
+								label: __(
+									'Select one…',
+									'woocommerce-payments'
+								),
+								disabled: true,
+								value: '',
+							},
+							{
+								label: __(
+									'Physical product',
+									'woocommerce-payments'
+								),
+								value: 'physical_product',
+							},
+							{
+								label: __(
+									'Digital product or service',
+									'woocommerce-payments'
+								),
+								value: 'digital_product_or_service',
+							},
+							{
+								label: __(
+									'Offline service',
+									'woocommerce-payments'
+								),
+								value: 'offline_service',
+							},
+							{
+								label: __(
+									'Multiple product types',
+									'woocommerce-payments'
+								),
+								value: 'multiple',
+							},
+						] }
+						disabled={ readOnly }
+					/>
+					{ fields
+						.filter( ( s: any ) => s.key === 'general' )
+						.map( ( section: any ) => (
+							<div key={ section.key }>
+								{ section.fields.map( renderField ) }
+							</div>
+						) ) }
+				</>
+			);
+		}
+		if ( hasShipping && currentStep === 1 ) {
+			return (
+				<>
+					<h2 className="wcpay-dispute-evidence-new__stepper-title">
+						{ steps[ 1 ].heading }
+					</h2>
+					<p className="wcpay-dispute-evidence-new__stepper-subheading">
+						{ steps[ 1 ].subheading }
+					</p>
+					{ fields
+						.filter(
+							( s: any ) => s.key === 'shipping_information'
+						)
+						.map( ( section: any ) => (
+							<div key={ section.key }>
+								{ section.fields.map( renderField ) }
+							</div>
+						) ) }
+				</>
+			);
+		}
+		// Review step
+		const reviewStep = hasShipping ? 2 : 1;
+		if ( currentStep === reviewStep ) {
+			return (
+				<>
+					<h2 className="wcpay-dispute-evidence-new__stepper-title">
+						{ steps[ reviewStep ].heading }
+					</h2>
+					<p className="wcpay-dispute-evidence-new__stepper-subheading">
+						{ steps[ reviewStep ].subheading }
+					</p>
+					<div className="cover-letter-preview">
+						{ evidence.uncategorized_text ||
+							__(
+								'No additional details provided.',
+								'woocommerce-payments'
+							) }
+					</div>
+				</>
+			);
+		}
+		return null;
 	};
 
+	// --- Button rendering ---
 	const renderButtons = () => {
+		const reviewStep = hasShipping ? 2 : 1;
 		if ( currentStep === 0 ) {
 			return (
 				<div className="wcpay-dispute-evidence-new__button-row">
-					<Button variant="secondary" onClick={ handleCancel }>
-						Cancel
+					<Button
+						variant="secondary"
+						onClick={ () =>
+							( window.location.href = getAdminUrl( {
+								page: 'wc-admin',
+								path: '/payments/disputes/details',
+								id: dispute?.id,
+							} ) )
+						}
+					>
+						{ __( 'Cancel', 'woocommerce-payments' ) }
 					</Button>
 					<div className="wcpay-dispute-evidence-new__button-group-right">
 						<Button
 							variant="tertiary"
-							onClick={ handleSaveForLater }
+							onClick={ () => doSave( false ) }
 						>
-							Save for later
+							{ __( 'Save for later', 'woocommerce-payments' ) }
 						</Button>
-						<Button variant="primary" onClick={ handleNext }>
-							Next
+						<Button
+							variant="primary"
+							onClick={ () => setCurrentStep( ( s ) => s + 1 ) }
+						>
+							{ __( 'Next', 'woocommerce-payments' ) }
 						</Button>
 					</div>
 				</div>
 			);
 		}
-		if ( currentStep === 1 ) {
+		if ( currentStep < reviewStep ) {
 			return (
 				<div className="wcpay-dispute-evidence-new__button-row">
-					<Button variant="secondary" onClick={ handleBack }>
-						Back
+					<Button
+						variant="secondary"
+						onClick={ () => setCurrentStep( ( s ) => s - 1 ) }
+					>
+						{ __( 'Back', 'woocommerce-payments' ) }
 					</Button>
 					<div className="wcpay-dispute-evidence-new__button-group-right">
 						<Button
 							variant="tertiary"
-							onClick={ handleSaveForLater }
+							onClick={ () => doSave( false ) }
 						>
-							Save for later
+							{ __( 'Save for later', 'woocommerce-payments' ) }
 						</Button>
-						<Button variant="primary" onClick={ handleNext }>
-							Next
+						<Button
+							variant="primary"
+							onClick={ () => setCurrentStep( ( s ) => s + 1 ) }
+						>
+							{ __( 'Next', 'woocommerce-payments' ) }
 						</Button>
 					</div>
 				</div>
 			);
 		}
-		// Step 2 (index 2): Review
 		return (
 			<div className="wcpay-dispute-evidence-new__button-row">
-				<Button variant="secondary" onClick={ handleBack }>
-					Back
+				<Button
+					variant="secondary"
+					onClick={ () => setCurrentStep( ( s ) => s - 1 ) }
+				>
+					{ __( 'Back', 'woocommerce-payments' ) }
 				</Button>
 				<div className="wcpay-dispute-evidence-new__button-group-right">
-					<Button variant="tertiary" onClick={ handleSaveForLater }>
-						Save for later
+					<Button
+						variant="tertiary"
+						onClick={ () => doSave( false ) }
+					>
+						{ __( 'Save for later', 'woocommerce-payments' ) }
 					</Button>
-					<Button variant="primary" onClick={ handleSubmit }>
-						Submit
+					<Button variant="primary" onClick={ () => doSave( true ) }>
+						{ __( 'Submit', 'woocommerce-payments' ) }
 					</Button>
 				</div>
 			</div>
 		);
 	};
 
+	// --- Main render ---
 	return (
 		<Page maxWidth={ 1032 } className="wcpay-dispute-evidence">
-			<div className="wcpay-dispute-evidence-new">
-				{ /* Section 1: Accordion */ }
-				<Accordion highDensity>
-					<AccordionBody
-						title="Challenge dispute"
-						opened={ isAccordionOpen }
-						onToggle={ setIsAccordionOpen }
-					>
-						<AccordionRow>
-							<div className="evidence-summary__body">
-								{ /* Placeholder: Replace with summary and notice content in next step */ }
-								<p>Dispute summary and details go here.</p>
-							</div>
-						</AccordionRow>
-					</AccordionBody>
-				</Accordion>
-
-				{ /* Section 2: Stepper */ }
-				<div className="wcpay-dispute-evidence-new__stepper-section">
-					<StepperPanel
-						steps={ panelHeadings }
-						currentStep={ currentStep }
-					/>
-					<HorizontalRule className="wcpay-dispute-evidence-new__stepper-divider" />
-					<div className="wcpay-dispute-evidence-new__stepper-content">
-						{ stepComponents[ currentStep ] }
-						{ renderButtons() }
+			<TestModeNotice currentPage="disputes" isDetailsView={ true } />
+			<ErrorBoundary>
+				<div className="wcpay-dispute-evidence-new">
+					{ /* Section 1: Accordion */ }
+					<Accordion highDensity>
+						<AccordionBody
+							title="Challenge dispute"
+							opened={ isAccordionOpen }
+							onToggle={ setIsAccordionOpen }
+						>
+							<AccordionRow>
+								<div className="evidence-summary__body">
+									{ dispute && (
+										<DisputeNotice
+											dispute={ dispute }
+											isUrgent={
+												dispute.evidence_details
+													?.due_by <
+												Date.now() / 1000
+											}
+											paymentMethod={
+												dispute.payment_method_details
+													?.type || null
+											}
+											bankName={ getBankName( dispute ) }
+										/>
+									) }
+									<HorizontalList items={ summaryItems } />
+								</div>
+							</AccordionRow>
+						</AccordionBody>
+					</Accordion>
+					{ /* Section 2: Stepper */ }
+					<div className="wcpay-dispute-evidence-new__stepper-section">
+						<StepperPanel
+							steps={ panelHeadings }
+							currentStep={ currentStep }
+						/>
+						<HorizontalRule className="wcpay-dispute-evidence-new__stepper-divider" />
+						<div className="wcpay-dispute-evidence-new__stepper-content">
+							{ renderStepContent() }
+							{ renderButtons() }
+						</div>
 					</div>
 				</div>
-			</div>
+			</ErrorBoundary>
 		</Page>
 	);
 };

From 599d06c8f409d511489410a42840d31b7c8b638f Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 29 May 2025 19:56:42 -0300
Subject: [PATCH 04/42] fix fields not appearing

---
 client/disputes/new-evidence/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index a4f4df19bd7..021e6345e33 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -104,7 +104,8 @@ export default ( { query }: { query: { id: string } } ) => {
 			try {
 				const d: any = await apiFetch( { path } );
 				setDispute( d );
-				setProductType( d.metadata?.__product_type || '' );
+				// fallback to multiple if no product type is set
+				setProductType( d.metadata?.__product_type || 'multiple' );
 			} finally {
 				setLoading( false );
 			}

From d3c23c1f1b4552fb665008a2ef705d3db8e398e4 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 18:59:00 -0300
Subject: [PATCH 05/42] wrap new component

---
 .../wp-components-wrapped/index.tsx           | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/client/components/wp-components-wrapped/index.tsx b/client/components/wp-components-wrapped/index.tsx
index bcee3b3f6fc..d5572a6f716 100644
--- a/client/components/wp-components-wrapped/index.tsx
+++ b/client/components/wp-components-wrapped/index.tsx
@@ -23,6 +23,7 @@ import {
 	SelectControl as BundledWordPressComponentsSelectControl,
 	TextControl as BundledWordPressComponentsTextControl,
 	TextareaControl as BundledWordPressComponentsTextareaControl,
+	FormFileUpload as BundledWordPressComponentsFormFileUpload,
 } from '@wordpress/components';
 import BundledWordPressComponentsCardNotice from 'wcpay/components/card-notice';
 
@@ -391,6 +392,23 @@ const WrappedTextareaControl = (
 	return <TextareaControl { ...rest } />;
 };
 
+const WrappedFormFileUpload = (
+	props: ComponentProps< typeof BundledWordPressComponentsFormFileUpload > & {
+		useBundledComponent?: boolean;
+	}
+) => {
+	const { useBundledComponent, ...rest } = props;
+	const context = useContext( WordPressComponentsContext );
+
+	if ( ! context || useBundledComponent ) {
+		return <BundledWordPressComponentsFormFileUpload { ...rest } />;
+	}
+
+	const { FormFileUpload } = context;
+
+	return <FormFileUpload { ...rest } />;
+};
+
 export {
 	WrappedCard as Card,
 	WrappedCardBody as CardBody,
@@ -413,4 +431,5 @@ export {
 	WrappedSelectControl as SelectControl,
 	WrappedTextControl as TextControl,
 	WrappedTextareaControl as TextareaControl,
+	WrappedFormFileUpload as FormFileUpload,
 };

From b68eb395cb4d8e733f7f295d1c6125b820a233ea Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 19:02:55 -0300
Subject: [PATCH 06/42] add new field to the order

---
 client/data/payment-intents/test/hooks.ts     |   2 +
 client/types/orders.d.ts                      |   1 +
 .../class-wc-payments-api-client.php          | 589 +++++++++---------
 3 files changed, 298 insertions(+), 294 deletions(-)

diff --git a/client/data/payment-intents/test/hooks.ts b/client/data/payment-intents/test/hooks.ts
index 169cf5ace4a..c82040c7122 100644
--- a/client/data/payment-intents/test/hooks.ts
+++ b/client/data/payment-intents/test/hooks.ts
@@ -65,6 +65,7 @@ export const chargeMock: Charge = {
 		customer_name: '',
 		customer_email: '',
 		subscriptions: [],
+		ip_address: '127.0.0.1',
 	},
 	outcome: {
 		network_status: 'approved_by_network',
@@ -100,6 +101,7 @@ export const paymentIntentMock: PaymentIntent = {
 		customer_name: '',
 		customer_email: '',
 		fraud_meta_box_type: 'review',
+		ip_address: '127.0.0.1',
 	},
 };
 
diff --git a/client/types/orders.d.ts b/client/types/orders.d.ts
index bb67aa4efe9..398df86f95a 100644
--- a/client/types/orders.d.ts
+++ b/client/types/orders.d.ts
@@ -25,4 +25,5 @@ interface OrderDetails {
 	customer_name: null | string;
 	subscriptions?: SubscriptionDetails[];
 	fraud_meta_box_type?: string;
+	ip_address: string;
 }
diff --git a/includes/wc-payment-api/class-wc-payments-api-client.php b/includes/wc-payment-api/class-wc-payments-api-client.php
index 7147ef9b7e3..29002756c58 100644
--- a/includes/wc-payment-api/class-wc-payments-api-client.php
+++ b/includes/wc-payment-api/class-wc-payments-api-client.php
@@ -2174,6 +2174,283 @@ public function send_request( Request $request ) {
 		);
 	}
 
+	/**
+	 * Adds additional info to charge object.
+	 *
+	 * @param array $charge - Charge object.
+	 *
+	 * @return array
+	 */
+	public function add_additional_info_to_charge( array $charge ): array {
+		$charge = $this->add_order_info_to_charge_object( $charge['id'], $charge );
+		$charge = $this->add_formatted_address_to_charge_object( $charge );
+
+		return $charge;
+	}
+
+	/**
+	 * Adds the formatted address to the Charge object
+	 *
+	 * @param array $charge - Charge object.
+	 *
+	 * @return array
+	 */
+	public function add_formatted_address_to_charge_object( array $charge ): array {
+		$has_billing_details = isset( $charge['billing_details'] );
+
+		if ( $has_billing_details ) {
+			$raw_details     = $charge['billing_details']['address'];
+			$billing_details = [];
+
+			$billing_details['city']      = ( ! empty( $raw_details['city'] ) ) ? $raw_details['city'] : '';
+			$billing_details['country']   = ( ! empty( $raw_details['country'] ) ) ? $raw_details['country'] : '';
+			$billing_details['address_1'] = ( ! empty( $raw_details['line1'] ) ) ? $raw_details['line1'] : '';
+			$billing_details['address_2'] = ( ! empty( $raw_details['line2'] ) ) ? $raw_details['line2'] : '';
+			$billing_details['postcode']  = ( ! empty( $raw_details['postal_code'] ) ) ? $raw_details['postal_code'] : '';
+			$billing_details['state']     = ( ! empty( $raw_details['state'] ) ) ? $raw_details['state'] : '';
+
+			$charge['billing_details']['formatted_address'] = WC()->countries->get_formatted_address( $billing_details );
+		}
+
+		return $charge;
+	}
+
+	/**
+	 * Creates the array representing order for frontend.
+	 *
+	 * @param WC_Order $order The order.
+	 * @return array
+	 */
+	public function build_order_info( WC_Order $order ): array {
+		$order_info = [
+			'id'                  => $order->get_id(),
+			'number'              => $order->get_order_number(),
+			'url'                 => $order->get_edit_order_url(),
+			'customer_url'        => $this->get_customer_url( $order ),
+			'customer_name'       => trim( $order->get_formatted_billing_full_name() ),
+			'customer_email'      => $order->get_billing_email(),
+			'fraud_meta_box_type' => $order->get_meta( '_wcpay_fraud_meta_box_type' ),
+			'ip_address'          => $order->get_customer_ip_address(),
+		];
+
+		if ( function_exists( 'wcs_get_subscriptions_for_order' ) ) {
+			$order_info['subscriptions'] = [];
+
+			$subscriptions = wcs_get_subscriptions_for_order( $order, [ 'order_type' => [ 'parent', 'renewal' ] ] );
+			foreach ( $subscriptions as $subscription ) {
+				$order_info['subscriptions'][] = [
+					'number' => $subscription->get_order_number(),
+					'url'    => $subscription->get_edit_order_url(),
+				];
+			}
+		}
+		return $order_info;
+	}
+
+	/**
+	 * De-serialize an intention array into a payment intention object
+	 *
+	 * @param array $intention_array - The intention array to de-serialize.
+	 *
+	 * @return WC_Payments_API_Payment_Intention
+	 * @throws API_Exception - Unable to deserialize intention array.
+	 */
+	public function deserialize_payment_intention_object_from_array( array $intention_array ) {
+		// TODO: Throw an exception if the response array doesn't contain mandatory properties.
+		$created = new DateTime();
+		$created->setTimestamp( $intention_array['created'] );
+
+		// Metadata can be an empty stdClass object, so we need to check array type too.
+		// See https://github.com/Automattic/woocommerce-payments/pull/419/commits/c2c8438c3ed7be6d604435e059209fb87fb6d0c4.
+		$raw_metadata           = $intention_array['metadata'];
+		$metadata               = is_array( $raw_metadata ) && ! empty( $raw_metadata )
+			? $raw_metadata
+			: [];
+		$charge_array           = 0 < $intention_array['charges']['total_count'] ? end( $intention_array['charges']['data'] ) : null;
+		$next_action            = $intention_array['next_action'] ?? [];
+		$last_payment_error     = $intention_array['last_payment_error'] ?? [];
+		$customer               = $intention_array['customer'] ?? $charge_array['customer'] ?? null;
+		$payment_method         = $intention_array['payment_method'] ?? $intention_array['source'] ?? null;
+		$processing             = $intention_array[ Intent_Status::PROCESSING ] ?? [];
+		$payment_method_types   = $intention_array['payment_method_types'] ?? [];
+		$payment_method_options = $intention_array['payment_method_options'] ?? [];
+
+		$charge = ! empty( $charge_array ) ? self::deserialize_charge_object_from_array( $charge_array ) : null;
+		$order  = $this->get_order_info_from_intention_object( $intention_array['id'] );
+
+		$intent = new WC_Payments_API_Payment_Intention(
+			$intention_array['id'],
+			$intention_array['amount'],
+			$intention_array['currency'],
+			$customer,
+			$payment_method,
+			$created,
+			$intention_array['status'],
+			$intention_array['client_secret'],
+			$charge,
+			$next_action,
+			$last_payment_error,
+			$metadata,
+			$processing,
+			$payment_method_types,
+			$payment_method_options,
+			$order
+		);
+
+		return $intent;
+	}
+
+	/**
+	 * De-serialize an intention array into a setup intention object
+	 *
+	 * @param array $intention_array - The intention array to de-serialize.
+	 *
+	 * @return WC_Payments_API_Setup_Intention
+	 * @throws API_Exception - Unable to deserialize intention array.
+	 */
+	public function deserialize_setup_intention_object_from_array( array $intention_array ): WC_Payments_API_Setup_Intention {
+		$created = new DateTime();
+		$created->setTimestamp( $intention_array['created'] );
+
+		// Metadata can be an empty stdClass object, so we need to check array type too.
+		// See https://github.com/Automattic/woocommerce-payments/pull/419/commits/c2c8438c3ed7be6d604435e059209fb87fb6d0c4.
+		$raw_metadata           = $intention_array['metadata'];
+		$metadata               = is_array( $raw_metadata ) && ! empty( $raw_metadata )
+			? $raw_metadata
+			: [];
+		$next_action            = $intention_array['next_action'] ?? [];
+		$last_setup_error       = $intention_array['last_setup_error'] ?? [];
+		$customer               = $intention_array['customer'] ?? null;
+		$payment_method         = $intention_array['payment_method'] ?? $intention_array['source'] ?? null;
+		$payment_method_types   = $intention_array['payment_method_types'] ?? [];
+		$payment_method_options = $intention_array['payment_method_options'] ?? [];
+
+		$order = $this->get_order_info_from_intention_object( $intention_array['id'] );
+
+		$intent = new WC_Payments_API_Setup_Intention(
+			$intention_array['id'],
+			$customer,
+			$payment_method,
+			$created,
+			$intention_array['status'],
+			$intention_array['client_secret'],
+			$next_action,
+			$last_setup_error,
+			$metadata,
+			$payment_method_types,
+			$payment_method_options,
+			$order
+		);
+
+		return $intent;
+	}
+
+	/**
+	 * Fetch readers charge summary.
+	 *
+	 * @param string      $charge_date    Charge date for readers.
+	 * @param string|null $transaction_id Optional transaction ID to filter results.
+	 *
+	 * @return array reader objects.
+	 */
+	public function get_readers_charge_summary( string $charge_date, ?string $transaction_id = null ): array {
+		$params = [ 'charge_date' => $charge_date ];
+		if ( $transaction_id ) {
+			$params['transaction_id'] = $transaction_id;
+		}
+		return $this->request( $params, self::READERS_CHARGE_SUMMARY, self::GET );
+	}
+
+	/**
+	 * Fetches from the server the minimum amount that can be processed in recurring transactions for a given currency.
+	 *
+	 * @param string $currency The currency code.
+	 *
+	 * @return int The minimum amount that can be processed in cents (with no decimals).
+	 *
+	 * @throws API_Exception If an error occurs.
+	 */
+	public function get_currency_minimum_recurring_amount( $currency ) {
+		if ( ! preg_match( '/^\w+$/', $currency ) ) {
+			throw new API_Exception(
+				__( 'Route param validation failed.', 'woocommerce-payments' ),
+				'wcpay_route_validation_failure',
+				400
+			);
+		}
+
+		return (int) $this->request(
+			[],
+			self::MINIMUM_RECURRING_AMOUNT_API . '/' . $currency,
+			self::GET
+		);
+	}
+
+
+	/**
+	 * Return summary for authorizations.
+	 *
+	 * @return array     The authorizations summary.
+	 * @throws API_Exception Exception thrown on request failure.
+	 */
+	public function get_authorizations_summary() {
+		return $this->request( [], self::AUTHORIZATIONS_API . '/summary', self::GET );
+	}
+
+	/**
+	 * Fetch a single authorizations with provided payment intent id.
+	 *
+	 * @param string $payment_intent_id id of requested transaction.
+	 * @return array authorization object.
+	 * @throws API_Exception - Exception thrown in case route validation fails.
+	 */
+	public function get_authorization( string $payment_intent_id ) {
+		if ( ! preg_match( '/^\w+$/', $payment_intent_id ) ) {
+			throw new API_Exception(
+				__( 'Route param validation failed.', 'woocommerce-payments' ),
+				'wcpay_route_validation_failure',
+				400
+			);
+		}
+
+		return $this->request( [], self::AUTHORIZATIONS_API . '/' . $payment_intent_id, self::GET );
+	}
+
+	/**
+	 * Gets the WooPay compatibility list.
+	 *
+	 * @return array of incompatible extensions, adapted extensions and available countries.
+	 * @throws API_Exception When request fails.
+	 */
+	public function get_woopay_compatibility() {
+		return $this->request(
+			[],
+			self::WOOPAY_COMPATIBILITY_API,
+			self::GET,
+			false
+		);
+	}
+
+	/**
+	 * Delete account.
+	 *
+	 * @param bool $test_mode Whether we are in test mode or not.
+	 *
+	 * @return array
+	 * @throws API_Exception
+	 */
+	public function delete_account( bool $test_mode = false ) {
+		return $this->request(
+			[
+				'test_mode' => $test_mode,
+			],
+			self::ACCOUNTS_API . '/delete',
+			self::POST,
+			true,
+			true
+		);
+	}
+
 	/**
 	 * Send the request to the WooCommerce Payment API
 	 *
@@ -2426,25 +2703,6 @@ protected function check_response_for_errors( $response ) {
 		}
 	}
 
-	/**
-	 * If error code indicates fraudulent activity, trigger fraud prevention measures.
-	 *
-	 * @param string $error_code Error code.
-	 *
-	 * @return void
-	 */
-	private function maybe_act_on_fraud_prevention( string $error_code ) {
-		// Might be flagged by Stripe Radar or WCPay card testing prevention services.
-		$is_fraudulent = 'fraudulent' === $error_code || 'wcpay_card_testing_prevention' === $error_code;
-		if ( $is_fraudulent && WC()->session ) {
-			$fraud_prevention_service = Fraud_Prevention_Service::get_instance();
-			if ( $fraud_prevention_service->is_enabled() ) {
-				$fraud_prevention_service->regenerate_token();
-				// Here we tried triggering checkout refresh, but it clashes with AJAX handling.
-			}
-		}
-	}
-
 	/**
 	 * Returns true if the response is JSON, based on the content-type header.
 	 *
@@ -2453,48 +2711,26 @@ private function maybe_act_on_fraud_prevention( string $error_code ) {
 	 * @return bool True if content-type is application/json, false otherwise.
 	 */
 	protected function is_json_response( $response ) {
-		return 'application/json' === substr( wp_remote_retrieve_header( $response, 'content-type' ), 0, strlen( 'application/json' ) );
-	}
-
-	/**
-	 * Adds additional info to charge object.
-	 *
-	 * @param array $charge - Charge object.
-	 *
-	 * @return array
-	 */
-	public function add_additional_info_to_charge( array $charge ): array {
-		$charge = $this->add_order_info_to_charge_object( $charge['id'], $charge );
-		$charge = $this->add_formatted_address_to_charge_object( $charge );
-
-		return $charge;
-	}
-
-	/**
-	 * Adds the formatted address to the Charge object
-	 *
-	 * @param array $charge - Charge object.
-	 *
-	 * @return array
-	 */
-	public function add_formatted_address_to_charge_object( array $charge ): array {
-		$has_billing_details = isset( $charge['billing_details'] );
-
-		if ( $has_billing_details ) {
-			$raw_details     = $charge['billing_details']['address'];
-			$billing_details = [];
-
-			$billing_details['city']      = ( ! empty( $raw_details['city'] ) ) ? $raw_details['city'] : '';
-			$billing_details['country']   = ( ! empty( $raw_details['country'] ) ) ? $raw_details['country'] : '';
-			$billing_details['address_1'] = ( ! empty( $raw_details['line1'] ) ) ? $raw_details['line1'] : '';
-			$billing_details['address_2'] = ( ! empty( $raw_details['line2'] ) ) ? $raw_details['line2'] : '';
-			$billing_details['postcode']  = ( ! empty( $raw_details['postal_code'] ) ) ? $raw_details['postal_code'] : '';
-			$billing_details['state']     = ( ! empty( $raw_details['state'] ) ) ? $raw_details['state'] : '';
+		return 'application/json' === substr( wp_remote_retrieve_header( $response, 'content-type' ), 0, strlen( 'application/json' ) );
+	}
 
-			$charge['billing_details']['formatted_address'] = WC()->countries->get_formatted_address( $billing_details );
+	/**
+	 * If error code indicates fraudulent activity, trigger fraud prevention measures.
+	 *
+	 * @param string $error_code Error code.
+	 *
+	 * @return void
+	 */
+	private function maybe_act_on_fraud_prevention( string $error_code ) {
+		// Might be flagged by Stripe Radar or WCPay card testing prevention services.
+		$is_fraudulent = 'fraudulent' === $error_code || 'wcpay_card_testing_prevention' === $error_code;
+		if ( $is_fraudulent && WC()->session ) {
+			$fraud_prevention_service = Fraud_Prevention_Service::get_instance();
+			if ( $fraud_prevention_service->is_enabled() ) {
+				$fraud_prevention_service->regenerate_token();
+				// Here we tried triggering checkout refresh, but it clashes with AJAX handling.
+			}
 		}
-
-		return $charge;
 	}
 
 	/**
@@ -2546,37 +2782,6 @@ private function add_order_info_to_object( $order, $entity ) {
 		return $entity;
 	}
 
-	/**
-	 * Creates the array representing order for frontend.
-	 *
-	 * @param WC_Order $order The order.
-	 * @return array
-	 */
-	public function build_order_info( WC_Order $order ): array {
-		$order_info = [
-			'id'                  => $order->get_id(),
-			'number'              => $order->get_order_number(),
-			'url'                 => $order->get_edit_order_url(),
-			'customer_url'        => $this->get_customer_url( $order ),
-			'customer_name'       => trim( $order->get_formatted_billing_full_name() ),
-			'customer_email'      => $order->get_billing_email(),
-			'fraud_meta_box_type' => $order->get_meta( '_wcpay_fraud_meta_box_type' ),
-		];
-
-		if ( function_exists( 'wcs_get_subscriptions_for_order' ) ) {
-			$order_info['subscriptions'] = [];
-
-			$subscriptions = wcs_get_subscriptions_for_order( $order, [ 'order_type' => [ 'parent', 'renewal' ] ] );
-			foreach ( $subscriptions as $subscription ) {
-				$order_info['subscriptions'][] = [
-					'number' => $subscription->get_order_number(),
-					'url'    => $subscription->get_edit_order_url(),
-				];
-			}
-		}
-		return $order_info;
-	}
-
 	/**
 	 * Generates url to single customer in analytics table.
 	 *
@@ -2647,104 +2852,6 @@ private function deserialize_charge_object_from_array( array $charge_array ) {
 		return $charge;
 	}
 
-	/**
-	 * De-serialize an intention array into a payment intention object
-	 *
-	 * @param array $intention_array - The intention array to de-serialize.
-	 *
-	 * @return WC_Payments_API_Payment_Intention
-	 * @throws API_Exception - Unable to deserialize intention array.
-	 */
-	public function deserialize_payment_intention_object_from_array( array $intention_array ) {
-		// TODO: Throw an exception if the response array doesn't contain mandatory properties.
-		$created = new DateTime();
-		$created->setTimestamp( $intention_array['created'] );
-
-		// Metadata can be an empty stdClass object, so we need to check array type too.
-		// See https://github.com/Automattic/woocommerce-payments/pull/419/commits/c2c8438c3ed7be6d604435e059209fb87fb6d0c4.
-		$raw_metadata           = $intention_array['metadata'];
-		$metadata               = is_array( $raw_metadata ) && ! empty( $raw_metadata )
-			? $raw_metadata
-			: [];
-		$charge_array           = 0 < $intention_array['charges']['total_count'] ? end( $intention_array['charges']['data'] ) : null;
-		$next_action            = $intention_array['next_action'] ?? [];
-		$last_payment_error     = $intention_array['last_payment_error'] ?? [];
-		$customer               = $intention_array['customer'] ?? $charge_array['customer'] ?? null;
-		$payment_method         = $intention_array['payment_method'] ?? $intention_array['source'] ?? null;
-		$processing             = $intention_array[ Intent_Status::PROCESSING ] ?? [];
-		$payment_method_types   = $intention_array['payment_method_types'] ?? [];
-		$payment_method_options = $intention_array['payment_method_options'] ?? [];
-
-		$charge = ! empty( $charge_array ) ? self::deserialize_charge_object_from_array( $charge_array ) : null;
-		$order  = $this->get_order_info_from_intention_object( $intention_array['id'] );
-
-		$intent = new WC_Payments_API_Payment_Intention(
-			$intention_array['id'],
-			$intention_array['amount'],
-			$intention_array['currency'],
-			$customer,
-			$payment_method,
-			$created,
-			$intention_array['status'],
-			$intention_array['client_secret'],
-			$charge,
-			$next_action,
-			$last_payment_error,
-			$metadata,
-			$processing,
-			$payment_method_types,
-			$payment_method_options,
-			$order
-		);
-
-		return $intent;
-	}
-
-	/**
-	 * De-serialize an intention array into a setup intention object
-	 *
-	 * @param array $intention_array - The intention array to de-serialize.
-	 *
-	 * @return WC_Payments_API_Setup_Intention
-	 * @throws API_Exception - Unable to deserialize intention array.
-	 */
-	public function deserialize_setup_intention_object_from_array( array $intention_array ): WC_Payments_API_Setup_Intention {
-		$created = new DateTime();
-		$created->setTimestamp( $intention_array['created'] );
-
-		// Metadata can be an empty stdClass object, so we need to check array type too.
-		// See https://github.com/Automattic/woocommerce-payments/pull/419/commits/c2c8438c3ed7be6d604435e059209fb87fb6d0c4.
-		$raw_metadata           = $intention_array['metadata'];
-		$metadata               = is_array( $raw_metadata ) && ! empty( $raw_metadata )
-			? $raw_metadata
-			: [];
-		$next_action            = $intention_array['next_action'] ?? [];
-		$last_setup_error       = $intention_array['last_setup_error'] ?? [];
-		$customer               = $intention_array['customer'] ?? null;
-		$payment_method         = $intention_array['payment_method'] ?? $intention_array['source'] ?? null;
-		$payment_method_types   = $intention_array['payment_method_types'] ?? [];
-		$payment_method_options = $intention_array['payment_method_options'] ?? [];
-
-		$order = $this->get_order_info_from_intention_object( $intention_array['id'] );
-
-		$intent = new WC_Payments_API_Setup_Intention(
-			$intention_array['id'],
-			$customer,
-			$payment_method,
-			$created,
-			$intention_array['status'],
-			$intention_array['client_secret'],
-			$next_action,
-			$last_setup_error,
-			$metadata,
-			$payment_method_types,
-			$payment_method_options,
-			$order
-		);
-
-		return $intent;
-	}
-
 	/**
 	 * Returns a formatted intention description.
 	 *
@@ -2776,48 +2883,6 @@ private function uuid() {
 		return vsprintf( '%08x-%04x-%04x-%04x-%04x%08x', $arr );
 	}
 
-
-	/**
-	 * Fetch readers charge summary.
-	 *
-	 * @param string      $charge_date    Charge date for readers.
-	 * @param string|null $transaction_id Optional transaction ID to filter results.
-	 *
-	 * @return array reader objects.
-	 */
-	public function get_readers_charge_summary( string $charge_date, ?string $transaction_id = null ): array {
-		$params = [ 'charge_date' => $charge_date ];
-		if ( $transaction_id ) {
-			$params['transaction_id'] = $transaction_id;
-		}
-		return $this->request( $params, self::READERS_CHARGE_SUMMARY, self::GET );
-	}
-
-	/**
-	 * Fetches from the server the minimum amount that can be processed in recurring transactions for a given currency.
-	 *
-	 * @param string $currency The currency code.
-	 *
-	 * @return int The minimum amount that can be processed in cents (with no decimals).
-	 *
-	 * @throws API_Exception If an error occurs.
-	 */
-	public function get_currency_minimum_recurring_amount( $currency ) {
-		if ( ! preg_match( '/^\w+$/', $currency ) ) {
-			throw new API_Exception(
-				__( 'Route param validation failed.', 'woocommerce-payments' ),
-				'wcpay_route_validation_failure',
-				400
-			);
-		}
-
-		return (int) $this->request(
-			[],
-			self::MINIMUM_RECURRING_AMOUNT_API . '/' . $currency,
-			self::GET
-		);
-	}
-
 	/**
 	 * Returns a list of fingerprinting metadata to attach to order.
 	 *
@@ -2833,68 +2898,4 @@ private function get_fingerprint_metadata( $fingerprint = '' ): array {
 
 		return $customer_fingerprint_metadata;
 	}
-
-	/**
-	 * Return summary for authorizations.
-	 *
-	 * @return array     The authorizations summary.
-	 * @throws API_Exception Exception thrown on request failure.
-	 */
-	public function get_authorizations_summary() {
-		return $this->request( [], self::AUTHORIZATIONS_API . '/summary', self::GET );
-	}
-
-	/**
-	 * Fetch a single authorizations with provided payment intent id.
-	 *
-	 * @param string $payment_intent_id id of requested transaction.
-	 * @return array authorization object.
-	 * @throws API_Exception - Exception thrown in case route validation fails.
-	 */
-	public function get_authorization( string $payment_intent_id ) {
-		if ( ! preg_match( '/^\w+$/', $payment_intent_id ) ) {
-			throw new API_Exception(
-				__( 'Route param validation failed.', 'woocommerce-payments' ),
-				'wcpay_route_validation_failure',
-				400
-			);
-		}
-
-		return $this->request( [], self::AUTHORIZATIONS_API . '/' . $payment_intent_id, self::GET );
-	}
-
-	/**
-	 * Gets the WooPay compatibility list.
-	 *
-	 * @return array of incompatible extensions, adapted extensions and available countries.
-	 * @throws API_Exception When request fails.
-	 */
-	public function get_woopay_compatibility() {
-		return $this->request(
-			[],
-			self::WOOPAY_COMPATIBILITY_API,
-			self::GET,
-			false
-		);
-	}
-
-	/**
-	 * Delete account.
-	 *
-	 * @param bool $test_mode Whether we are in test mode or not.
-	 *
-	 * @return array
-	 * @throws API_Exception
-	 */
-	public function delete_account( bool $test_mode = false ) {
-		return $this->request(
-			[
-				'test_mode' => $test_mode,
-			],
-			self::ACCOUNTS_API . '/delete',
-			self::POST,
-			true,
-			true
-		);
-	}
 }

From b4cc912d72410b9297a6a4c07ea7220f6912d3df Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 19:09:10 -0300
Subject: [PATCH 07/42] add new components

---
 .../new-evidence/customer-details.tsx         | 68 ++++++++++++++++
 .../new-evidence/file-upload-control.tsx      | 80 +++++++++++++++++++
 .../disputes/new-evidence/product-details.tsx | 65 +++++++++++++++
 .../new-evidence/recommended-documents.tsx    | 55 +++++++++++++
 .../order-details/test/index.test.tsx         |  1 +
 client/transactions/list/test/index.tsx       |  3 +
 6 files changed, 272 insertions(+)
 create mode 100644 client/disputes/new-evidence/customer-details.tsx
 create mode 100644 client/disputes/new-evidence/file-upload-control.tsx
 create mode 100644 client/disputes/new-evidence/product-details.tsx
 create mode 100644 client/disputes/new-evidence/recommended-documents.tsx

diff --git a/client/disputes/new-evidence/customer-details.tsx b/client/disputes/new-evidence/customer-details.tsx
new file mode 100644
index 00000000000..502e1f5e90b
--- /dev/null
+++ b/client/disputes/new-evidence/customer-details.tsx
@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Dispute } from 'wcpay/types/disputes';
+
+interface CustomerDetailsProps {
+  dispute: Dispute;
+}
+
+const CustomerDetails: React.FC<CustomerDetailsProps> = ({ dispute }) => {
+  if (!dispute) return null;
+  const charge = typeof dispute.charge === 'object' && dispute.charge !== null ? dispute.charge : null;
+  const name = charge?.billing_details?.name || '-';
+  const phone = charge?.billing_details?.phone || '-';
+  const email = charge?.billing_details?.email || '-';
+  const ip = dispute.order?.ip_address || '-';
+  const address = charge?.billing_details.address;
+  const billingLine1 = address?.line1 || '';
+  const billingLine2 = address?.line2 || '';
+  const billingCity = address?.city || '';
+  const billingState = address?.state || '';
+  const billingPostcode = address?.postal_code || '';
+  const billingCountry = address?.country || '';
+  const billingAddress = `${billingLine1}, ${billingLine2}, ${billingCity}, ${billingState}, ${billingPostcode}, ${billingCountry}`;
+  return ( 
+    <section className="wcpay-dispute-evidence-customer-details">
+      <h3 className="wcpay-dispute-evidence-customer-details__heading">{__('Customer details', 'woocommerce-payments')}</h3>
+      <div className="wcpay-dispute-evidence-customer-details__row">
+        <div>
+          <div className="wcpay-dispute-evidence-customer-details__label">{__('NAME', 'woocommerce-payments')}</div>
+          {name !== '-' ? (
+            <a href="#" className="wcpay-dispute-evidence-customer-details__link">{name}</a>
+          ) : (
+            <span>{name}</span>
+          )}
+        </div>
+        <div>
+          <div className="wcpay-dispute-evidence-customer-details__label">{__('PHONE', 'woocommerce-payments')}</div>
+          <span>{phone}</span>
+        </div>
+        <div>
+          <div className="wcpay-dispute-evidence-customer-details__label">{__('EMAIL', 'woocommerce-payments')}</div>
+          {email !== '-' ? (
+            <a href={`mailto:${email}`} className="wcpay-dispute-evidence-customer-details__link">{email}</a>
+          ) : (
+            <span>{email}</span>
+          )}
+        </div>
+        <div>
+          <div className="wcpay-dispute-evidence-customer-details__label">{__('IP ADDRESS', 'woocommerce-payments')}</div>
+          <span>{ip}</span>
+        </div>
+      </div>
+      <div className="wcpay-dispute-evidence-customer-details__billing">
+        <div className="wcpay-dispute-evidence-customer-details__billing-label">{__('BILLING ADDRESS', 'woocommerce-payments')}</div>
+        <div className="wcpay-dispute-evidence-customer-details__billing-value">{billingAddress}</div>
+      </div>
+    </section>
+  );
+};
+
+export default CustomerDetails; 
\ No newline at end of file
diff --git a/client/disputes/new-evidence/file-upload-control.tsx b/client/disputes/new-evidence/file-upload-control.tsx
new file mode 100644
index 00000000000..30098e90360
--- /dev/null
+++ b/client/disputes/new-evidence/file-upload-control.tsx
@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { check, close, cloudUpload } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Button, FormFileUpload, Icon } from 'wcpay/components/wp-components-wrapped';
+
+interface FileUploadControlProps {
+  fileName?: string;
+  onFileChange: (file: File) => void;
+  onFileRemove: () => void;
+  disabled?: boolean;
+  isDone?: boolean;
+  accept?: string;
+  label: string;
+}
+
+const FileUploadControl: React.FC<FileUploadControlProps> = ({
+  fileName = '',
+  onFileChange,
+  onFileRemove,
+  disabled = false,
+  isDone = false,
+  accept = '.pdf, image/png, image/jpeg',
+  label,
+}) => {
+  return (
+    <div className="wcpay-dispute-evidence-file-upload-control">
+      {isDone && fileName ? ( 
+        <span className="wcpay-dispute-evidence-file-upload-control__check">
+          <Icon icon={check} size={20} />
+        </span>
+      ) : null}
+      <label className="wcpay-dispute-evidence-file-upload-control__label">{label}</label>
+      <div className="wcpay-dispute-evidence-file-upload-control__actions">
+        {isDone && fileName ? (
+          <>
+            <span className="wcpay-dispute-evidence-file-upload-control__filename" title={fileName}>
+              {fileName}
+            </span>
+            <Button
+              className="wcpay-dispute-evidence-file-upload-control__remove"
+              icon={<Icon icon={close} size={20} />}
+              onClick={onFileRemove}
+              disabled={disabled}
+              aria-label={__('Remove file', 'woocommerce-payments')}
+              isDestructive
+            />
+          </>
+        ) : null}
+          <FormFileUpload
+            accept={accept}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              if (event.target.files && event.target.files[0]) {
+                onFileChange(event.target.files[0]);
+                event.target.value = '';
+              }
+            }}
+            render={({ openFileDialog }) => (
+              <Button
+                className="wcpay-dispute-evidence-file-upload-control__upload"
+                icon={<Icon icon={cloudUpload} size={20} />}
+                onClick={openFileDialog}
+                disabled={disabled}
+                aria-label={__('Upload file', 'woocommerce-payments')}
+                style={{ background: 'var(--wp-admin-theme-color)', color: '#fff' }}
+              />
+            )}
+          />
+      </div>
+    </div>
+  );
+};
+
+export default FileUploadControl; 
\ No newline at end of file
diff --git a/client/disputes/new-evidence/product-details.tsx b/client/disputes/new-evidence/product-details.tsx
new file mode 100644
index 00000000000..61b7e54e5e3
--- /dev/null
+++ b/client/disputes/new-evidence/product-details.tsx
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { SelectControl, TextareaControl } from 'wcpay/components/wp-components-wrapped';
+
+interface ProductDetailsProps {
+  productType: string;
+  onProductTypeChange: (value: string) => void;
+  productDescription: string;
+  onProductDescriptionChange: (value: string) => void;
+  readOnly?: boolean;
+}
+
+const ProductDetails: React.FC<ProductDetailsProps> = ({
+  productType,
+  onProductTypeChange,
+  productDescription,
+  onProductDescriptionChange,
+  readOnly = false,
+}) => {
+  return (
+    <section className="wcpay-dispute-evidence-product-details">
+      <h3 className="wcpay-dispute-evidence-product-details__heading">
+        {__('Product details', 'woocommerce-payments')}
+      </h3>
+      <div className="wcpay-dispute-evidence-product-details__field-group">
+        <SelectControl
+          // @ts-ignore
+          __next40pxDefaultSize
+          __nextHasNoMarginBottom
+          label={__('PRODUCT TYPE', 'woocommerce-payments')}
+          help={__('First select the kind of product you fulfilled.', 'woocommerce-payments')}
+          value={productType}
+          onChange={onProductTypeChange}
+          options={[
+            { label: __('Physical products', 'woocommerce-payments'), value: 'physical_product' },
+            { label: __('Digital products', 'woocommerce-payments'), value: 'digital_product_or_service' },
+            { label: __('Offline service', 'woocommerce-payments'), value: 'offline_service' },
+            { label: __('Multiple product types', 'woocommerce-payments'), value: 'multiple' },
+          ]}
+          disabled={readOnly}
+        />
+      </div>
+      <div className="wcpay-dispute-evidence-product-details__field-group">
+        <TextareaControl
+          // @ts-ignore
+          __nextHasNoMarginBottom
+          label={__('PRODUCT DESCRIPTION', 'woocommerce-payments')}
+          help={__('Please make sure this is an accurate description of the product.', 'woocommerce-payments')}
+          value={ productDescription }
+          onChange={ ( value ) => onProductDescriptionChange( value ) }
+          disabled={readOnly}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default ProductDetails; 
\ No newline at end of file
diff --git a/client/disputes/new-evidence/recommended-documents.tsx b/client/disputes/new-evidence/recommended-documents.tsx
new file mode 100644
index 00000000000..5737f893862
--- /dev/null
+++ b/client/disputes/new-evidence/recommended-documents.tsx
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import FileUploadControl from './file-upload-control';
+
+interface DocumentField {
+  key: string;
+  label: string;
+  fileName?: string;
+  onFileChange: (key: string, file: File) => Promise<void>;
+  onFileRemove: () => Promise<void>;
+  uploaded?: boolean;
+  readOnly?: boolean;
+}
+
+interface RecommendedDocumentsProps {
+  fields: DocumentField[];
+  readOnly?: boolean;
+}
+
+const RecommendedDocuments: React.FC<RecommendedDocumentsProps> = ({ fields, readOnly = false }) => {
+  return (
+    <section className="wcpay-dispute-evidence-recommended-documents">
+      <h3 className="wcpay-dispute-evidence-recommended-documents__heading">
+        {__('Recommended documents', 'woocommerce-payments')}
+      </h3>
+      <div className="wcpay-dispute-evidence-recommended-documents__subheading">
+        {__('We recommend providing the following documents. All fields are optional.', 'woocommerce-payments')}
+      </div>
+      <ul className="wcpay-dispute-evidence-recommended-documents__list">
+        {fields.map((field) => (
+          <li key={field.key} className="wcpay-dispute-evidence-recommended-documents__item">
+            <FileUploadControl
+              label={field.label}
+              fileName={field.fileName || ''}
+              onFileChange={async (file: File) => field.onFileChange(field.key, file)}
+              onFileRemove={async () => field.onFileRemove()}
+              disabled={readOnly || field.readOnly}
+              isDone={!!field.uploaded}
+              accept={'.pdf, image/png, image/jpeg'}
+            />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default RecommendedDocuments; 
\ No newline at end of file
diff --git a/client/payment-details/order-details/test/index.test.tsx b/client/payment-details/order-details/test/index.test.tsx
index bb1254503a3..8a5632f0d61 100644
--- a/client/payment-details/order-details/test/index.test.tsx
+++ b/client/payment-details/order-details/test/index.test.tsx
@@ -75,6 +75,7 @@ const chargeFromOrderMock = {
 		customer_email: '',
 		subscriptions: [],
 		fraud_meta_box_type: 'succeeded',
+		ip_address: '127.0.0.1',
 	},
 	paid: false,
 	paydown: null,
diff --git a/client/transactions/list/test/index.tsx b/client/transactions/list/test/index.tsx
index eaf1ce5c0f1..ae8cc7b25ec 100644
--- a/client/transactions/list/test/index.tsx
+++ b/client/transactions/list/test/index.tsx
@@ -120,6 +120,7 @@ const getMockTransactions: () => Transaction[] = () => [
 			customer_url: 'https://example.com/customer/my-name',
 			customer_name: '',
 			customer_email: '',
+			ip_address: '127.0.0.1',
 		},
 		channel: 'online',
 		source_identifier: '1234',
@@ -152,6 +153,7 @@ const getMockTransactions: () => Transaction[] = () => [
 			customer_url: 'https://example.com/customer/my-name',
 			customer_name: '',
 			customer_email: '',
+			ip_address: '127.0.0.1',
 		},
 		channel: 'online',
 		source_identifier: '1234',
@@ -184,6 +186,7 @@ const getMockTransactions: () => Transaction[] = () => [
 			customer_url: 'https://example.com/customer/my-name',
 			customer_name: '',
 			customer_email: '',
+			ip_address: '127.0.0.1',
 		},
 		channel: 'in_person',
 		source_identifier: '1234',

From 7d1135828b03c07f1398c12ca2e53c2be149c13d Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 19:10:00 -0300
Subject: [PATCH 08/42] update the main page

---
 client/disputes/new-evidence/index.tsx  | 167 ++++++++++-------
 client/disputes/new-evidence/style.scss | 240 ++++++++++++++++++++++--
 2 files changed, 328 insertions(+), 79 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 021e6345e33..e36780dd66e 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -5,7 +5,7 @@
  */
 import React, { useState, useEffect, useMemo } from 'react';
 import apiFetch from '@wordpress/api-fetch';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import useConfirmNavigation from 'utils/use-confirm-navigation';
 import { recordEvent } from 'tracks';
@@ -23,6 +23,10 @@ import { formatExplicitCurrency } from 'multi-currency/interface/functions';
 import { formatDateTimeFromTimestamp } from 'wcpay/utils/date-time';
 import { getBankName } from 'utils/charge';
 import evidenceFields, { DisputeReason, ProductType } from './fields';
+import CustomerDetails from './customer-details';
+import ProductDetails from './product-details';
+import RecommendedDocuments from './recommended-documents';
+import InlineNotice from 'components/inline-notice';
 
 /**
  * Internal dependencies.
@@ -42,6 +46,7 @@ import {
 import Page from 'wcpay/components/page';
 
 import './style.scss';
+import { createInterpolateElement } from '@wordpress/element';
 
 // --- Utility: Determine if shipping is required for a given reason ---
 const ReasonsNeedShipping = [
@@ -91,6 +96,7 @@ export default ( { query }: { query: { id: string } } ) => {
 	const [ currentStep, setCurrentStep ] = useState( 0 );
 	const [ isAccordionOpen, setIsAccordionOpen ] = useState( true );
 	const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
+	const [ productDescription, setProductDescription ] = useState('');
 	const {
 		createSuccessNotice,
 		createErrorNotice,
@@ -191,7 +197,11 @@ export default ( { query }: { query: { id: string } } ) => {
 			} );
 			setEvidence( ( e: any ) => ( { ...e, [ key ]: uploadedFile.id } ) );
 		} catch ( err ) {
-			createErrorNotice( err.message );
+			if (err instanceof Error) {
+				createErrorNotice(err.message);
+			} else {
+				createErrorNotice(String(err));
+			}
 		}
 	};
 	const doRemoveFile = ( key: string ) =>
@@ -235,7 +245,11 @@ export default ( { query }: { query: { id: string } } ) => {
 			);
 			setRedirectAfterSave( true );
 		} catch ( err ) {
-			createErrorNotice( err.message );
+			if (err instanceof Error) {
+				createErrorNotice(err.message);
+			} else {
+				createErrorNotice(String(err));
+			}
 		} finally {
 			setLoading( false );
 		}
@@ -316,6 +330,41 @@ export default ( { query }: { query: { id: string } } ) => {
 		];
 	}, [ dispute ] );
 
+	// --- Recommended documents ---
+	const recommendedDocumentFields = [
+		{
+			key: 'order_receipt',
+			label: __('Order receipt', 'woocommerce-payments'),
+		},
+		{
+			key: 'customer_communication',
+			label: __('Customer communication', 'woocommerce-payments'),
+		},
+		{
+			key: 'customer_signature',
+			label: __('Customer signature', 'woocommerce-payments'),
+		},
+		{
+			key: 'refund_policy',
+			label: __('Copy of the store refund policy', 'woocommerce-payments'),
+		},
+		{
+			key: 'additional_documents',
+			label: __('Any additional documents you think will support the case', 'woocommerce-payments'),
+		},
+	];
+
+	const recommendedDocumentsFields = recommendedDocumentFields.map((field) => ({
+		key: field.key,
+		label: field.label,
+		fileName: evidence[field.key] || '',
+		uploaded: !!evidence[field.key],
+		onFileChange: (_key: string, file: File) => Promise.resolve(doUploadFile(field.key, file)),
+		onFileRemove: () => Promise.resolve(doRemoveFile(field.key)),
+	}));
+
+	const bankName = dispute?.charge ? getBankName( dispute.charge ) : null;
+
 	// --- Step content ---
 	const renderStepContent = () => {
 		if ( ! fields.length ) return null;
@@ -344,7 +393,7 @@ export default ( { query }: { query: { id: string } } ) => {
 						onFileChange={ ( _key: string, file: File ) =>
 							doUploadFile( field.key, file )
 						}
-						onFileRemove={ () => doRemoveFile( field.key ) }
+						onFileRemove={ field.onFileRemove }
 						accept={ '.pdf, image/png, image/jpeg' }
 						isDone={ !! evidence[ field.key ] }
 						isLoading={ false }
@@ -404,57 +453,39 @@ export default ( { query }: { query: { id: string } } ) => {
 					<p className="wcpay-dispute-evidence-new__stepper-subheading">
 						{ steps[ 0 ].subheading }
 					</p>
-					<SelectControl
-						label={ __( 'Product type', 'woocommerce-payments' ) }
-						value={ productType }
-						onChange={ updateProductType }
-						options={ [
-							{
-								label: __(
-									'Select one…',
-									'woocommerce-payments'
-								),
-								disabled: true,
-								value: '',
-							},
-							{
-								label: __(
-									'Physical product',
-									'woocommerce-payments'
-								),
-								value: 'physical_product',
-							},
-							{
-								label: __(
-									'Digital product or service',
-									'woocommerce-payments'
-								),
-								value: 'digital_product_or_service',
-							},
-							{
-								label: __(
-									'Offline service',
-									'woocommerce-payments'
-								),
-								value: 'offline_service',
-							},
-							{
-								label: __(
-									'Multiple product types',
-									'woocommerce-payments'
-								),
-								value: 'multiple',
-							},
-						] }
-						disabled={ readOnly }
+					<CustomerDetails dispute={dispute} />
+					<ProductDetails
+						productType={productType}
+						onProductTypeChange={updateProductType}
+						productDescription={productDescription}
+						onProductDescriptionChange={setProductDescription}
+						readOnly={readOnly}
 					/>
-					{ fields
-						.filter( ( s: any ) => s.key === 'general' )
-						.map( ( section: any ) => (
-							<div key={ section.key }>
-								{ section.fields.map( renderField ) }
-							</div>
-						) ) }
+					<RecommendedDocuments fields={recommendedDocumentsFields} />
+					<InlineNotice
+						icon
+						isDismissible={ false }
+						status="info"
+						className="dispute-steps__notice-content"
+					>
+						{ createInterpolateElement(
+							bankName
+								? sprintf(
+										__(
+											'<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. <strong>%1$s</strong> makes the decision in this process.',
+											'woocommerce-payments'
+										),
+										bankName
+									)
+								: __(
+										"<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. The cardholder's bank makes the decision in this process.",
+										'woocommerce-payments'
+									),
+							{
+								strong: <strong />,
+							}
+						) }
+					</InlineNotice>
 				</>
 			);
 		}
@@ -482,7 +513,7 @@ export default ( { query }: { query: { id: string } } ) => {
 		// Review step
 		const reviewStep = hasShipping ? 2 : 1;
 		if ( currentStep === reviewStep ) {
-			return (
+	return (
 				<>
 					<h2 className="wcpay-dispute-evidence-new__stepper-title">
 						{ steps[ reviewStep ].heading }
@@ -496,7 +527,7 @@ export default ( { query }: { query: { id: string } } ) => {
 								'No additional details provided.',
 								'woocommerce-payments'
 							) }
-					</div>
+		</div>
 				</>
 			);
 		}
@@ -539,7 +570,7 @@ export default ( { query }: { query: { id: string } } ) => {
 			);
 		}
 		if ( currentStep < reviewStep ) {
-			return (
+	return (
 				<div className="wcpay-dispute-evidence-new__button-row">
 					<Button
 						variant="secondary"
@@ -553,18 +584,18 @@ export default ( { query }: { query: { id: string } } ) => {
 							onClick={ () => doSave( false ) }
 						>
 							{ __( 'Save for later', 'woocommerce-payments' ) }
-						</Button>
+			</Button>
 						<Button
 							variant="primary"
 							onClick={ () => setCurrentStep( ( s ) => s + 1 ) }
 						>
 							{ __( 'Next', 'woocommerce-payments' ) }
-						</Button>
+			</Button>
 					</div>
-				</div>
-			);
+		</div>
+	);
 		}
-		return (
+	return (
 			<div className="wcpay-dispute-evidence-new__button-row">
 				<Button
 					variant="secondary"
@@ -578,14 +609,14 @@ export default ( { query }: { query: { id: string } } ) => {
 						onClick={ () => doSave( false ) }
 					>
 						{ __( 'Save for later', 'woocommerce-payments' ) }
-					</Button>
+			</Button>
 					<Button variant="primary" onClick={ () => doSave( true ) }>
 						{ __( 'Submit', 'woocommerce-payments' ) }
-					</Button>
+			</Button>
 				</div>
-			</div>
-		);
-	};
+		</div>
+	);
+};
 
 	// --- Main render ---
 	return (
@@ -614,7 +645,7 @@ export default ( { query }: { query: { id: string } } ) => {
 												dispute.payment_method_details
 													?.type || null
 											}
-											bankName={ getBankName( dispute ) }
+											bankName={ bankName }
 										/>
 									) }
 									<HorizontalList items={ summaryItems } />
diff --git a/client/disputes/new-evidence/style.scss b/client/disputes/new-evidence/style.scss
index e301177557d..6f34dc8385d 100644
--- a/client/disputes/new-evidence/style.scss
+++ b/client/disputes/new-evidence/style.scss
@@ -1,3 +1,40 @@
+// Define mixins here
+@mixin heading-xl {
+  /* Heading XL */
+	font-size: var( --xl, 20px );
+	font-style: normal;
+	font-weight: var( --Medium, 500 );
+	line-height: var( --m, 24px ); /* 120% */
+}
+@mixin heading-md {
+  /* Heading MD */
+  font-size: var(--m, 13px);
+  font-style: normal;
+  font-weight: var(--Medium, 500);
+  line-height: var(--s, 20px); /* 153.846% */
+}
+@mixin heading-s {
+  /* Heading S */
+  font-size: var(--xs, 11px);
+  font-style: normal;
+  font-weight: var(--Medium, 500);
+  line-height: var(--xs, 16px); /* 145.455% */
+}
+@mixin body-md {
+  /* Body MD */
+	font-size: var( --m, 13px );
+	font-style: normal;
+	font-weight: var( --Regular, 400 );
+	line-height: var( --s, 20px ); /* 153.846% */
+}
+@mixin body-sm {
+  /* Body SM */
+  font-size: var(--s, 12px);
+  font-style: normal;
+  font-weight: var(--Regular, 400);
+  line-height: var(--xs, 16px); /* 133.333% */ 
+}
+
 // Container for the new-evidence page
 .wcpay-dispute-evidence-new {
 	display: flex;
@@ -33,24 +70,15 @@
 }
 
 .wcpay-dispute-evidence-new__stepper-title {
+  @include heading-xl;
 	color: var( --Scales-Grays-gray-900, $gray-900 );
-	/* Heading XL */
-	font-size: var( --xl, 20px );
-	font-style: normal;
-	font-weight: var( --Medium, 500 );
-	line-height: var( --m, 24px ); /* 120% */
-
 	margin-top: 24px;
 	margin-bottom: 12px;
 }
 
 .wcpay-dispute-evidence-new__stepper-subheading {
 	color: var( --Scales-Grays-gray-700, $gray-700 );
-	/* Body MD */
-	font-size: var( --m, 13px );
-	font-style: normal;
-	font-weight: var( --Regular, 400 );
-	line-height: var( --s, 20px ); /* 153.846% */
+  @include body-md;
 }
 
 .wcpay-dispute-evidence-new__button-row {
@@ -70,3 +98,193 @@
 	+ .components-button {
 	margin-left: 8px;
 }
+
+// Customer details section
+.wcpay-dispute-evidence-customer-details {
+	margin-top: 24px;
+	margin-bottom: 40px;
+
+	&__heading {
+    @include heading-md;
+    color: var(--Scales-Grays-gray-900, $gray-900);
+    margin-bottom: 16px;
+	}
+
+	&__row {
+		display: flex;
+    align-items: flex-start;
+		gap: 32px;
+		margin-bottom: 24px;
+	}
+
+	&__row > div {
+		flex: 0 0 auto;
+		min-width: 70px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+
+    & > span {
+      color: var( --Scales-Grays-gray-700, $gray-700 );
+      @include body-md;
+    }
+	}
+
+	&__label,
+	&__billing-label {
+    color: var(--Scales-Grays-gray-900, $gray-900);
+    text-transform: uppercase;
+    @include heading-s;
+	}
+
+	&__link {
+		color: var( --wp-admin-theme-color );
+    @include body-sm; 
+		text-decoration: underline;
+		word-break: break-all;
+	}
+
+	&__billing {
+		margin-top: 8px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch; 
+	}
+
+	&__billing-value {
+		color: var(--Scales-Grays-gray-900, $gray-700);
+		@include body-sm;
+		word-break: break-word;
+	}
+
+	@media (max-width: 700px) {
+		&__row {
+			flex-direction: column;
+			gap: 8px;
+		}
+		&__row > div {
+			min-width: 0;
+		}
+	}
+}
+
+// Product details section
+.wcpay-dispute-evidence-product-details {
+  margin-bottom: 40px;
+
+	&__heading {
+    @include heading-md;
+    color: var(--Scales-Grays-gray-900, $gray-900);
+    margin-bottom: 16px;
+	} 
+
+  &__field-group {
+    margin-bottom: 24px;
+  }
+}
+
+.wcpay-dispute-evidence-recommended-documents {
+  margin-bottom: 40px;
+
+	&__heading {
+    @include heading-md;
+    color: var(--Scales-Grays-gray-900, $gray-900);
+    margin-bottom: 16px;
+	}
+
+  &__subheading {
+    color: var(--Scales-Grays-gray-700, $gray-700);
+    @include body-md;
+  }
+}
+
+.wcpay-dispute-evidence-file-upload-control {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-bottom: 16px;
+
+  &__label {
+    flex: 1 0 220px;
+    color: var(--Scales-Grays-gray-900, $gray-900);
+    @include body-md;
+    margin-right: 16px;
+    text-align: left;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__upload .components-button {
+    background: var(--wp-admin-theme-color);;
+    color: #fff;
+    border-radius: 8px;
+    min-width: 48px;
+    min-height: 48px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    border: none;
+    transition: background 0.2s;
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--wp-admin-theme-color) 10%, transparent);
+    }
+    &:disabled {
+      background: #e0e6f7;
+      color: #b3b3b3;
+      cursor: not-allowed;
+    }
+  }
+
+  &__check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__filename {
+    max-width: 260px;
+    background: color-mix(in srgb, var(--wp-admin-theme-color) 10%, transparent);
+    color: var(--wp-admin-theme-color);
+    border-radius: 24px;
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 32px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &__remove .components-button {
+    background: transparent;
+    color: var(--wp-admin-theme-color);
+    border: none;
+    min-width: 32px;
+    min-height: 32px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:hover:not(:disabled) {
+      background: #e0e6f7;
+    }
+    &:disabled {
+      color: #b3b3b3;
+      cursor: not-allowed;
+    }
+  }
+}
\ No newline at end of file

From 25570459fbc675e653c1ab4b67b3da182d530cff Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 19:11:08 -0300
Subject: [PATCH 09/42] lint

---
 .../new-evidence/customer-details.tsx         | 131 ++++++++++------
 .../new-evidence/file-upload-control.tsx      | 148 ++++++++++--------
 client/disputes/new-evidence/index.tsx        |  95 ++++++-----
 .../disputes/new-evidence/product-details.tsx | 138 ++++++++++------
 .../new-evidence/recommended-documents.tsx    |  83 +++++-----
 5 files changed, 351 insertions(+), 244 deletions(-)

diff --git a/client/disputes/new-evidence/customer-details.tsx b/client/disputes/new-evidence/customer-details.tsx
index 502e1f5e90b..3d4ab0efb3d 100644
--- a/client/disputes/new-evidence/customer-details.tsx
+++ b/client/disputes/new-evidence/customer-details.tsx
@@ -10,59 +10,86 @@ import { __ } from '@wordpress/i18n';
 import { Dispute } from 'wcpay/types/disputes';
 
 interface CustomerDetailsProps {
-  dispute: Dispute;
+	dispute: Dispute;
 }
 
-const CustomerDetails: React.FC<CustomerDetailsProps> = ({ dispute }) => {
-  if (!dispute) return null;
-  const charge = typeof dispute.charge === 'object' && dispute.charge !== null ? dispute.charge : null;
-  const name = charge?.billing_details?.name || '-';
-  const phone = charge?.billing_details?.phone || '-';
-  const email = charge?.billing_details?.email || '-';
-  const ip = dispute.order?.ip_address || '-';
-  const address = charge?.billing_details.address;
-  const billingLine1 = address?.line1 || '';
-  const billingLine2 = address?.line2 || '';
-  const billingCity = address?.city || '';
-  const billingState = address?.state || '';
-  const billingPostcode = address?.postal_code || '';
-  const billingCountry = address?.country || '';
-  const billingAddress = `${billingLine1}, ${billingLine2}, ${billingCity}, ${billingState}, ${billingPostcode}, ${billingCountry}`;
-  return ( 
-    <section className="wcpay-dispute-evidence-customer-details">
-      <h3 className="wcpay-dispute-evidence-customer-details__heading">{__('Customer details', 'woocommerce-payments')}</h3>
-      <div className="wcpay-dispute-evidence-customer-details__row">
-        <div>
-          <div className="wcpay-dispute-evidence-customer-details__label">{__('NAME', 'woocommerce-payments')}</div>
-          {name !== '-' ? (
-            <a href="#" className="wcpay-dispute-evidence-customer-details__link">{name}</a>
-          ) : (
-            <span>{name}</span>
-          )}
-        </div>
-        <div>
-          <div className="wcpay-dispute-evidence-customer-details__label">{__('PHONE', 'woocommerce-payments')}</div>
-          <span>{phone}</span>
-        </div>
-        <div>
-          <div className="wcpay-dispute-evidence-customer-details__label">{__('EMAIL', 'woocommerce-payments')}</div>
-          {email !== '-' ? (
-            <a href={`mailto:${email}`} className="wcpay-dispute-evidence-customer-details__link">{email}</a>
-          ) : (
-            <span>{email}</span>
-          )}
-        </div>
-        <div>
-          <div className="wcpay-dispute-evidence-customer-details__label">{__('IP ADDRESS', 'woocommerce-payments')}</div>
-          <span>{ip}</span>
-        </div>
-      </div>
-      <div className="wcpay-dispute-evidence-customer-details__billing">
-        <div className="wcpay-dispute-evidence-customer-details__billing-label">{__('BILLING ADDRESS', 'woocommerce-payments')}</div>
-        <div className="wcpay-dispute-evidence-customer-details__billing-value">{billingAddress}</div>
-      </div>
-    </section>
-  );
+const CustomerDetails: React.FC< CustomerDetailsProps > = ( { dispute } ) => {
+	if ( ! dispute ) return null;
+	const charge =
+		typeof dispute.charge === 'object' && dispute.charge !== null
+			? dispute.charge
+			: null;
+	const name = charge?.billing_details?.name || '-';
+	const phone = charge?.billing_details?.phone || '-';
+	const email = charge?.billing_details?.email || '-';
+	const ip = dispute.order?.ip_address || '-';
+	const address = charge?.billing_details.address;
+	const billingLine1 = address?.line1 || '';
+	const billingLine2 = address?.line2 || '';
+	const billingCity = address?.city || '';
+	const billingState = address?.state || '';
+	const billingPostcode = address?.postal_code || '';
+	const billingCountry = address?.country || '';
+	const billingAddress = `${ billingLine1 }, ${ billingLine2 }, ${ billingCity }, ${ billingState }, ${ billingPostcode }, ${ billingCountry }`;
+	return (
+		<section className="wcpay-dispute-evidence-customer-details">
+			<h3 className="wcpay-dispute-evidence-customer-details__heading">
+				{ __( 'Customer details', 'woocommerce-payments' ) }
+			</h3>
+			<div className="wcpay-dispute-evidence-customer-details__row">
+				<div>
+					<div className="wcpay-dispute-evidence-customer-details__label">
+						{ __( 'NAME', 'woocommerce-payments' ) }
+					</div>
+					{ name !== '-' ? (
+						<a
+							href="#"
+							className="wcpay-dispute-evidence-customer-details__link"
+						>
+							{ name }
+						</a>
+					) : (
+						<span>{ name }</span>
+					) }
+				</div>
+				<div>
+					<div className="wcpay-dispute-evidence-customer-details__label">
+						{ __( 'PHONE', 'woocommerce-payments' ) }
+					</div>
+					<span>{ phone }</span>
+				</div>
+				<div>
+					<div className="wcpay-dispute-evidence-customer-details__label">
+						{ __( 'EMAIL', 'woocommerce-payments' ) }
+					</div>
+					{ email !== '-' ? (
+						<a
+							href={ `mailto:${ email }` }
+							className="wcpay-dispute-evidence-customer-details__link"
+						>
+							{ email }
+						</a>
+					) : (
+						<span>{ email }</span>
+					) }
+				</div>
+				<div>
+					<div className="wcpay-dispute-evidence-customer-details__label">
+						{ __( 'IP ADDRESS', 'woocommerce-payments' ) }
+					</div>
+					<span>{ ip }</span>
+				</div>
+			</div>
+			<div className="wcpay-dispute-evidence-customer-details__billing">
+				<div className="wcpay-dispute-evidence-customer-details__billing-label">
+					{ __( 'BILLING ADDRESS', 'woocommerce-payments' ) }
+				</div>
+				<div className="wcpay-dispute-evidence-customer-details__billing-value">
+					{ billingAddress }
+				</div>
+			</div>
+		</section>
+	);
 };
 
-export default CustomerDetails; 
\ No newline at end of file
+export default CustomerDetails;
diff --git a/client/disputes/new-evidence/file-upload-control.tsx b/client/disputes/new-evidence/file-upload-control.tsx
index 30098e90360..f3c64ba083e 100644
--- a/client/disputes/new-evidence/file-upload-control.tsx
+++ b/client/disputes/new-evidence/file-upload-control.tsx
@@ -8,73 +8,93 @@ import { check, close, cloudUpload } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { Button, FormFileUpload, Icon } from 'wcpay/components/wp-components-wrapped';
+import {
+	Button,
+	FormFileUpload,
+	Icon,
+} from 'wcpay/components/wp-components-wrapped';
 
 interface FileUploadControlProps {
-  fileName?: string;
-  onFileChange: (file: File) => void;
-  onFileRemove: () => void;
-  disabled?: boolean;
-  isDone?: boolean;
-  accept?: string;
-  label: string;
+	fileName?: string;
+	onFileChange: ( file: File ) => void;
+	onFileRemove: () => void;
+	disabled?: boolean;
+	isDone?: boolean;
+	accept?: string;
+	label: string;
 }
 
-const FileUploadControl: React.FC<FileUploadControlProps> = ({
-  fileName = '',
-  onFileChange,
-  onFileRemove,
-  disabled = false,
-  isDone = false,
-  accept = '.pdf, image/png, image/jpeg',
-  label,
-}) => {
-  return (
-    <div className="wcpay-dispute-evidence-file-upload-control">
-      {isDone && fileName ? ( 
-        <span className="wcpay-dispute-evidence-file-upload-control__check">
-          <Icon icon={check} size={20} />
-        </span>
-      ) : null}
-      <label className="wcpay-dispute-evidence-file-upload-control__label">{label}</label>
-      <div className="wcpay-dispute-evidence-file-upload-control__actions">
-        {isDone && fileName ? (
-          <>
-            <span className="wcpay-dispute-evidence-file-upload-control__filename" title={fileName}>
-              {fileName}
-            </span>
-            <Button
-              className="wcpay-dispute-evidence-file-upload-control__remove"
-              icon={<Icon icon={close} size={20} />}
-              onClick={onFileRemove}
-              disabled={disabled}
-              aria-label={__('Remove file', 'woocommerce-payments')}
-              isDestructive
-            />
-          </>
-        ) : null}
-          <FormFileUpload
-            accept={accept}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              if (event.target.files && event.target.files[0]) {
-                onFileChange(event.target.files[0]);
-                event.target.value = '';
-              }
-            }}
-            render={({ openFileDialog }) => (
-              <Button
-                className="wcpay-dispute-evidence-file-upload-control__upload"
-                icon={<Icon icon={cloudUpload} size={20} />}
-                onClick={openFileDialog}
-                disabled={disabled}
-                aria-label={__('Upload file', 'woocommerce-payments')}
-                style={{ background: 'var(--wp-admin-theme-color)', color: '#fff' }}
-              />
-            )}
-          />
-      </div>
-    </div>
-  );
+const FileUploadControl: React.FC< FileUploadControlProps > = ( {
+	fileName = '',
+	onFileChange,
+	onFileRemove,
+	disabled = false,
+	isDone = false,
+	accept = '.pdf, image/png, image/jpeg',
+	label,
+} ) => {
+	return (
+		<div className="wcpay-dispute-evidence-file-upload-control">
+			{ isDone && fileName ? (
+				<span className="wcpay-dispute-evidence-file-upload-control__check">
+					<Icon icon={ check } size={ 20 } />
+				</span>
+			) : null }
+			<label className="wcpay-dispute-evidence-file-upload-control__label">
+				{ label }
+			</label>
+			<div className="wcpay-dispute-evidence-file-upload-control__actions">
+				{ isDone && fileName ? (
+					<>
+						<span
+							className="wcpay-dispute-evidence-file-upload-control__filename"
+							title={ fileName }
+						>
+							{ fileName }
+						</span>
+						<Button
+							className="wcpay-dispute-evidence-file-upload-control__remove"
+							icon={ <Icon icon={ close } size={ 20 } /> }
+							onClick={ onFileRemove }
+							disabled={ disabled }
+							aria-label={ __(
+								'Remove file',
+								'woocommerce-payments'
+							) }
+							isDestructive
+						/>
+					</>
+				) : null }
+				<FormFileUpload
+					accept={ accept }
+					onChange={ (
+						event: React.ChangeEvent< HTMLInputElement >
+					) => {
+						if ( event.target.files && event.target.files[ 0 ] ) {
+							onFileChange( event.target.files[ 0 ] );
+							event.target.value = '';
+						}
+					} }
+					render={ ( { openFileDialog } ) => (
+						<Button
+							className="wcpay-dispute-evidence-file-upload-control__upload"
+							icon={ <Icon icon={ cloudUpload } size={ 20 } /> }
+							onClick={ openFileDialog }
+							disabled={ disabled }
+							aria-label={ __(
+								'Upload file',
+								'woocommerce-payments'
+							) }
+							style={ {
+								background: 'var(--wp-admin-theme-color)',
+								color: '#fff',
+							} }
+						/>
+					) }
+				/>
+			</div>
+		</div>
+	);
 };
 
-export default FileUploadControl; 
\ No newline at end of file
+export default FileUploadControl;
diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index e36780dd66e..b161d80dc55 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -96,7 +96,7 @@ export default ( { query }: { query: { id: string } } ) => {
 	const [ currentStep, setCurrentStep ] = useState( 0 );
 	const [ isAccordionOpen, setIsAccordionOpen ] = useState( true );
 	const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
-	const [ productDescription, setProductDescription ] = useState('');
+	const [ productDescription, setProductDescription ] = useState( '' );
 	const {
 		createSuccessNotice,
 		createErrorNotice,
@@ -197,10 +197,10 @@ export default ( { query }: { query: { id: string } } ) => {
 			} );
 			setEvidence( ( e: any ) => ( { ...e, [ key ]: uploadedFile.id } ) );
 		} catch ( err ) {
-			if (err instanceof Error) {
-				createErrorNotice(err.message);
+			if ( err instanceof Error ) {
+				createErrorNotice( err.message );
 			} else {
-				createErrorNotice(String(err));
+				createErrorNotice( String( err ) );
 			}
 		}
 	};
@@ -245,10 +245,10 @@ export default ( { query }: { query: { id: string } } ) => {
 			);
 			setRedirectAfterSave( true );
 		} catch ( err ) {
-			if (err instanceof Error) {
-				createErrorNotice(err.message);
+			if ( err instanceof Error ) {
+				createErrorNotice( err.message );
 			} else {
-				createErrorNotice(String(err));
+				createErrorNotice( String( err ) );
 			}
 		} finally {
 			setLoading( false );
@@ -334,34 +334,43 @@ export default ( { query }: { query: { id: string } } ) => {
 	const recommendedDocumentFields = [
 		{
 			key: 'order_receipt',
-			label: __('Order receipt', 'woocommerce-payments'),
+			label: __( 'Order receipt', 'woocommerce-payments' ),
 		},
 		{
 			key: 'customer_communication',
-			label: __('Customer communication', 'woocommerce-payments'),
+			label: __( 'Customer communication', 'woocommerce-payments' ),
 		},
 		{
 			key: 'customer_signature',
-			label: __('Customer signature', 'woocommerce-payments'),
+			label: __( 'Customer signature', 'woocommerce-payments' ),
 		},
 		{
 			key: 'refund_policy',
-			label: __('Copy of the store refund policy', 'woocommerce-payments'),
+			label: __(
+				'Copy of the store refund policy',
+				'woocommerce-payments'
+			),
 		},
 		{
 			key: 'additional_documents',
-			label: __('Any additional documents you think will support the case', 'woocommerce-payments'),
+			label: __(
+				'Any additional documents you think will support the case',
+				'woocommerce-payments'
+			),
 		},
 	];
 
-	const recommendedDocumentsFields = recommendedDocumentFields.map((field) => ({
-		key: field.key,
-		label: field.label,
-		fileName: evidence[field.key] || '',
-		uploaded: !!evidence[field.key],
-		onFileChange: (_key: string, file: File) => Promise.resolve(doUploadFile(field.key, file)),
-		onFileRemove: () => Promise.resolve(doRemoveFile(field.key)),
-	}));
+	const recommendedDocumentsFields = recommendedDocumentFields.map(
+		( field ) => ( {
+			key: field.key,
+			label: field.label,
+			fileName: evidence[ field.key ] || '',
+			uploaded: !! evidence[ field.key ],
+			onFileChange: ( _key: string, file: File ) =>
+				Promise.resolve( doUploadFile( field.key, file ) ),
+			onFileRemove: () => Promise.resolve( doRemoveFile( field.key ) ),
+		} )
+	);
 
 	const bankName = dispute?.charge ? getBankName( dispute.charge ) : null;
 
@@ -453,15 +462,17 @@ export default ( { query }: { query: { id: string } } ) => {
 					<p className="wcpay-dispute-evidence-new__stepper-subheading">
 						{ steps[ 0 ].subheading }
 					</p>
-					<CustomerDetails dispute={dispute} />
+					<CustomerDetails dispute={ dispute } />
 					<ProductDetails
-						productType={productType}
-						onProductTypeChange={updateProductType}
-						productDescription={productDescription}
-						onProductDescriptionChange={setProductDescription}
-						readOnly={readOnly}
+						productType={ productType }
+						onProductTypeChange={ updateProductType }
+						productDescription={ productDescription }
+						onProductDescriptionChange={ setProductDescription }
+						readOnly={ readOnly }
+					/>
+					<RecommendedDocuments
+						fields={ recommendedDocumentsFields }
 					/>
-					<RecommendedDocuments fields={recommendedDocumentsFields} />
 					<InlineNotice
 						icon
 						isDismissible={ false }
@@ -476,11 +487,11 @@ export default ( { query }: { query: { id: string } } ) => {
 											'woocommerce-payments'
 										),
 										bankName
-									)
+								  )
 								: __(
 										"<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. The cardholder's bank makes the decision in this process.",
 										'woocommerce-payments'
-									),
+								  ),
 							{
 								strong: <strong />,
 							}
@@ -513,7 +524,7 @@ export default ( { query }: { query: { id: string } } ) => {
 		// Review step
 		const reviewStep = hasShipping ? 2 : 1;
 		if ( currentStep === reviewStep ) {
-	return (
+			return (
 				<>
 					<h2 className="wcpay-dispute-evidence-new__stepper-title">
 						{ steps[ reviewStep ].heading }
@@ -527,7 +538,7 @@ export default ( { query }: { query: { id: string } } ) => {
 								'No additional details provided.',
 								'woocommerce-payments'
 							) }
-		</div>
+					</div>
 				</>
 			);
 		}
@@ -570,7 +581,7 @@ export default ( { query }: { query: { id: string } } ) => {
 			);
 		}
 		if ( currentStep < reviewStep ) {
-	return (
+			return (
 				<div className="wcpay-dispute-evidence-new__button-row">
 					<Button
 						variant="secondary"
@@ -584,18 +595,18 @@ export default ( { query }: { query: { id: string } } ) => {
 							onClick={ () => doSave( false ) }
 						>
 							{ __( 'Save for later', 'woocommerce-payments' ) }
-			</Button>
+						</Button>
 						<Button
 							variant="primary"
 							onClick={ () => setCurrentStep( ( s ) => s + 1 ) }
 						>
 							{ __( 'Next', 'woocommerce-payments' ) }
-			</Button>
+						</Button>
 					</div>
-		</div>
-	);
+				</div>
+			);
 		}
-	return (
+		return (
 			<div className="wcpay-dispute-evidence-new__button-row">
 				<Button
 					variant="secondary"
@@ -609,14 +620,14 @@ export default ( { query }: { query: { id: string } } ) => {
 						onClick={ () => doSave( false ) }
 					>
 						{ __( 'Save for later', 'woocommerce-payments' ) }
-			</Button>
+					</Button>
 					<Button variant="primary" onClick={ () => doSave( true ) }>
 						{ __( 'Submit', 'woocommerce-payments' ) }
-			</Button>
+					</Button>
 				</div>
-		</div>
-	);
-};
+			</div>
+		);
+	};
 
 	// --- Main render ---
 	return (
diff --git a/client/disputes/new-evidence/product-details.tsx b/client/disputes/new-evidence/product-details.tsx
index 61b7e54e5e3..9cdccba1798 100644
--- a/client/disputes/new-evidence/product-details.tsx
+++ b/client/disputes/new-evidence/product-details.tsx
@@ -7,59 +7,97 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { SelectControl, TextareaControl } from 'wcpay/components/wp-components-wrapped';
+import {
+	SelectControl,
+	TextareaControl,
+} from 'wcpay/components/wp-components-wrapped';
 
 interface ProductDetailsProps {
-  productType: string;
-  onProductTypeChange: (value: string) => void;
-  productDescription: string;
-  onProductDescriptionChange: (value: string) => void;
-  readOnly?: boolean;
+	productType: string;
+	onProductTypeChange: ( value: string ) => void;
+	productDescription: string;
+	onProductDescriptionChange: ( value: string ) => void;
+	readOnly?: boolean;
 }
 
-const ProductDetails: React.FC<ProductDetailsProps> = ({
-  productType,
-  onProductTypeChange,
-  productDescription,
-  onProductDescriptionChange,
-  readOnly = false,
-}) => {
-  return (
-    <section className="wcpay-dispute-evidence-product-details">
-      <h3 className="wcpay-dispute-evidence-product-details__heading">
-        {__('Product details', 'woocommerce-payments')}
-      </h3>
-      <div className="wcpay-dispute-evidence-product-details__field-group">
-        <SelectControl
-          // @ts-ignore
-          __next40pxDefaultSize
-          __nextHasNoMarginBottom
-          label={__('PRODUCT TYPE', 'woocommerce-payments')}
-          help={__('First select the kind of product you fulfilled.', 'woocommerce-payments')}
-          value={productType}
-          onChange={onProductTypeChange}
-          options={[
-            { label: __('Physical products', 'woocommerce-payments'), value: 'physical_product' },
-            { label: __('Digital products', 'woocommerce-payments'), value: 'digital_product_or_service' },
-            { label: __('Offline service', 'woocommerce-payments'), value: 'offline_service' },
-            { label: __('Multiple product types', 'woocommerce-payments'), value: 'multiple' },
-          ]}
-          disabled={readOnly}
-        />
-      </div>
-      <div className="wcpay-dispute-evidence-product-details__field-group">
-        <TextareaControl
-          // @ts-ignore
-          __nextHasNoMarginBottom
-          label={__('PRODUCT DESCRIPTION', 'woocommerce-payments')}
-          help={__('Please make sure this is an accurate description of the product.', 'woocommerce-payments')}
-          value={ productDescription }
-          onChange={ ( value ) => onProductDescriptionChange( value ) }
-          disabled={readOnly}
-        />
-      </div>
-    </section>
-  );
+const ProductDetails: React.FC< ProductDetailsProps > = ( {
+	productType,
+	onProductTypeChange,
+	productDescription,
+	onProductDescriptionChange,
+	readOnly = false,
+} ) => {
+	return (
+		<section className="wcpay-dispute-evidence-product-details">
+			<h3 className="wcpay-dispute-evidence-product-details__heading">
+				{ __( 'Product details', 'woocommerce-payments' ) }
+			</h3>
+			<div className="wcpay-dispute-evidence-product-details__field-group">
+				<SelectControl
+					// @ts-ignore
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'PRODUCT TYPE', 'woocommerce-payments' ) }
+					help={ __(
+						'First select the kind of product you fulfilled.',
+						'woocommerce-payments'
+					) }
+					value={ productType }
+					onChange={ onProductTypeChange }
+					options={ [
+						{
+							label: __(
+								'Physical products',
+								'woocommerce-payments'
+							),
+							value: 'physical_product',
+						},
+						{
+							label: __(
+								'Digital products',
+								'woocommerce-payments'
+							),
+							value: 'digital_product_or_service',
+						},
+						{
+							label: __(
+								'Offline service',
+								'woocommerce-payments'
+							),
+							value: 'offline_service',
+						},
+						{
+							label: __(
+								'Multiple product types',
+								'woocommerce-payments'
+							),
+							value: 'multiple',
+						},
+					] }
+					disabled={ readOnly }
+				/>
+			</div>
+			<div className="wcpay-dispute-evidence-product-details__field-group">
+				<TextareaControl
+					// @ts-ignore
+					__nextHasNoMarginBottom
+					label={ __(
+						'PRODUCT DESCRIPTION',
+						'woocommerce-payments'
+					) }
+					help={ __(
+						'Please make sure this is an accurate description of the product.',
+						'woocommerce-payments'
+					) }
+					value={ productDescription }
+					onChange={ ( value ) =>
+						onProductDescriptionChange( value )
+					}
+					disabled={ readOnly }
+				/>
+			</div>
+		</section>
+	);
 };
 
-export default ProductDetails; 
\ No newline at end of file
+export default ProductDetails;
diff --git a/client/disputes/new-evidence/recommended-documents.tsx b/client/disputes/new-evidence/recommended-documents.tsx
index 5737f893862..6ef8daa45a5 100644
--- a/client/disputes/new-evidence/recommended-documents.tsx
+++ b/client/disputes/new-evidence/recommended-documents.tsx
@@ -10,46 +10,57 @@ import { __ } from '@wordpress/i18n';
 import FileUploadControl from './file-upload-control';
 
 interface DocumentField {
-  key: string;
-  label: string;
-  fileName?: string;
-  onFileChange: (key: string, file: File) => Promise<void>;
-  onFileRemove: () => Promise<void>;
-  uploaded?: boolean;
-  readOnly?: boolean;
+	key: string;
+	label: string;
+	fileName?: string;
+	onFileChange: ( key: string, file: File ) => Promise< void >;
+	onFileRemove: () => Promise< void >;
+	uploaded?: boolean;
+	readOnly?: boolean;
 }
 
 interface RecommendedDocumentsProps {
-  fields: DocumentField[];
-  readOnly?: boolean;
+	fields: DocumentField[];
+	readOnly?: boolean;
 }
 
-const RecommendedDocuments: React.FC<RecommendedDocumentsProps> = ({ fields, readOnly = false }) => {
-  return (
-    <section className="wcpay-dispute-evidence-recommended-documents">
-      <h3 className="wcpay-dispute-evidence-recommended-documents__heading">
-        {__('Recommended documents', 'woocommerce-payments')}
-      </h3>
-      <div className="wcpay-dispute-evidence-recommended-documents__subheading">
-        {__('We recommend providing the following documents. All fields are optional.', 'woocommerce-payments')}
-      </div>
-      <ul className="wcpay-dispute-evidence-recommended-documents__list">
-        {fields.map((field) => (
-          <li key={field.key} className="wcpay-dispute-evidence-recommended-documents__item">
-            <FileUploadControl
-              label={field.label}
-              fileName={field.fileName || ''}
-              onFileChange={async (file: File) => field.onFileChange(field.key, file)}
-              onFileRemove={async () => field.onFileRemove()}
-              disabled={readOnly || field.readOnly}
-              isDone={!!field.uploaded}
-              accept={'.pdf, image/png, image/jpeg'}
-            />
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
+const RecommendedDocuments: React.FC< RecommendedDocumentsProps > = ( {
+	fields,
+	readOnly = false,
+} ) => {
+	return (
+		<section className="wcpay-dispute-evidence-recommended-documents">
+			<h3 className="wcpay-dispute-evidence-recommended-documents__heading">
+				{ __( 'Recommended documents', 'woocommerce-payments' ) }
+			</h3>
+			<div className="wcpay-dispute-evidence-recommended-documents__subheading">
+				{ __(
+					'We recommend providing the following documents. All fields are optional.',
+					'woocommerce-payments'
+				) }
+			</div>
+			<ul className="wcpay-dispute-evidence-recommended-documents__list">
+				{ fields.map( ( field ) => (
+					<li
+						key={ field.key }
+						className="wcpay-dispute-evidence-recommended-documents__item"
+					>
+						<FileUploadControl
+							label={ field.label }
+							fileName={ field.fileName || '' }
+							onFileChange={ async ( file: File ) =>
+								field.onFileChange( field.key, file )
+							}
+							onFileRemove={ async () => field.onFileRemove() }
+							disabled={ readOnly || field.readOnly }
+							isDone={ !! field.uploaded }
+							accept={ '.pdf, image/png, image/jpeg' }
+						/>
+					</li>
+				) ) }
+			</ul>
+		</section>
+	);
 };
 
-export default RecommendedDocuments; 
\ No newline at end of file
+export default RecommendedDocuments;

From 7cbf35679612847ebb94eaab35c7588da2bf8aad Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 23:05:54 -0300
Subject: [PATCH 10/42] add cover letter

---
 client/disputes/new-evidence/cover-letter.tsx | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 client/disputes/new-evidence/cover-letter.tsx

diff --git a/client/disputes/new-evidence/cover-letter.tsx b/client/disputes/new-evidence/cover-letter.tsx
new file mode 100644
index 00000000000..e66f861f043
--- /dev/null
+++ b/client/disputes/new-evidence/cover-letter.tsx
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TextareaControl,
+	Button,
+	Icon,
+} from 'wcpay/components/wp-components-wrapped';
+import { external } from '@wordpress/icons';
+
+interface CoverLetterProps {
+	value: string;
+	onChange: ( value: string ) => void;
+}
+
+const CoverLetter: React.FC< CoverLetterProps > = ( { value, onChange } ) => {
+	return (
+		<section className="wcpay-dispute-evidence-cover-letter">
+			<TextareaControl
+				label={ __( 'COVER LETTER', 'woocommerce-payments' ) }
+				value={ value }
+				onChange={ onChange }
+				rows={ 30 }
+				className="wcpay-dispute-evidence-cover-letter__textarea"
+			/>
+			<Button
+				className="wcpay-dispute-evidence-cover-letter__print"
+				variant="primary"
+				onClick={ () => window.print() }
+				icon={ <Icon icon={ external } size={ 24 } /> }
+			>
+				{ __( 'View cover letter', 'woocommerce-payments' ) }
+			</Button>
+			{ /* Print-only formatted letter */ }
+			<pre className="wcpay-dispute-evidence-cover-letter__printonly">
+				{ value }
+			</pre>
+		</section>
+	);
+};
+
+export default CoverLetter;

From a1ef17389d5da52c11164f82a59b18abbc795afd Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 23:06:44 -0300
Subject: [PATCH 11/42] add shipping details

---
 .../new-evidence/shipping-details.tsx         | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 client/disputes/new-evidence/shipping-details.tsx

diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
new file mode 100644
index 00000000000..9c81e5d9b6d
--- /dev/null
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { TextControl } from 'wcpay/components/wp-components-wrapped';
+
+interface ShippingDetailsProps {
+	dispute: any;
+	readOnly?: boolean;
+}
+
+const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
+	dispute,
+	readOnly = false,
+} ) => {
+	if ( ! dispute ) return null;
+	// These would typically come from dispute.evidence or dispute.order
+	const evidence = dispute.evidence || {};
+	const carrier = evidence.shipping_carrier || '-';
+	const tracking = evidence.shipping_tracking_number || '-';
+	const address = evidence.shipping_address || '-';
+	const date = evidence.shipping_date || new Date();
+
+	return (
+		<section className="wcpay-dispute-evidence-shipping-details">
+			<h3 className="wcpay-dispute-evidence-shipping-details__heading">
+				{ __( 'Delivery details', 'woocommerce-payments' ) }
+			</h3>
+			<div className="wcpay-dispute-evidence-shipping-details__field-group">
+				<TextControl
+					// @ts-ignore
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'SHIPPING CARRIER', 'woocommerce-payments' ) }
+					onChange={ () => {} }
+					value={ carrier }
+				/>
+			</div>
+			<div className="wcpay-dispute-evidence-shipping-details__field-group">
+				<TextControl
+					// @ts-ignore
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'SHIPPING DATE', 'woocommerce-payments' ) }
+					onChange={ () => {} }
+					value={ date.toLocaleDateString() }
+				/>
+			</div>
+			<div className="wcpay-dispute-evidence-shipping-details__field-group">
+				<TextControl
+					// @ts-ignore
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'TRACKING NUMBER', 'woocommerce-payments' ) }
+					help={ __(
+						'Please make sure the tracking number is accurate.',
+						'woocommerce-payments'
+					) }
+					onChange={ () => {} }
+					value={ tracking }
+				/>
+			</div>
+			<div className="wcpay-dispute-evidence-shipping-details__field-group">
+				<TextControl
+					// @ts-ignore
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'SHIPPING ADDRESS', 'woocommerce-payments' ) }
+					help={ __(
+						'We prefilled the shipping address for you, please make sure it’s accurate.',
+						'woocommerce-payments'
+					) }
+					onChange={ () => {} }
+					value={ address }
+				/>
+			</div>
+		</section>
+	);
+};
+
+export default ShippingDetails;

From 8c70f399585a6938fedebbb9719e2d5c724f9c6d Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 23:07:05 -0300
Subject: [PATCH 12/42] fix file upload controls

---
 .../new-evidence/file-upload-control.tsx      | 50 +++++++++----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/client/disputes/new-evidence/file-upload-control.tsx b/client/disputes/new-evidence/file-upload-control.tsx
index f3c64ba083e..9bf00a310a1 100644
--- a/client/disputes/new-evidence/file-upload-control.tsx
+++ b/client/disputes/new-evidence/file-upload-control.tsx
@@ -35,36 +35,32 @@ const FileUploadControl: React.FC< FileUploadControlProps > = ( {
 } ) => {
 	return (
 		<div className="wcpay-dispute-evidence-file-upload-control">
-			{ isDone && fileName ? (
-				<span className="wcpay-dispute-evidence-file-upload-control__check">
-					<Icon icon={ check } size={ 20 } />
-				</span>
-			) : null }
+			{ isDone && fileName ? <Icon icon={ check } size={ 48 } /> : null }
 			<label className="wcpay-dispute-evidence-file-upload-control__label">
 				{ label }
 			</label>
+			{ isDone && fileName ? (
+				<span
+					className="wcpay-dispute-evidence-file-upload-control__filename"
+					title={ fileName }
+				>
+					<span className="wcpay-dispute-evidence-file-upload-control__filename-text">
+						{ fileName }
+					</span>
+					<Button
+						className="wcpay-dispute-evidence-file-upload-control__remove"
+						icon={ <Icon icon={ close } size={ 24 } /> }
+						onClick={ onFileRemove }
+						disabled={ disabled }
+						aria-label={ __(
+							'Remove file',
+							'woocommerce-payments'
+						) }
+						isDestructive
+					/>
+				</span>
+			) : null }
 			<div className="wcpay-dispute-evidence-file-upload-control__actions">
-				{ isDone && fileName ? (
-					<>
-						<span
-							className="wcpay-dispute-evidence-file-upload-control__filename"
-							title={ fileName }
-						>
-							{ fileName }
-						</span>
-						<Button
-							className="wcpay-dispute-evidence-file-upload-control__remove"
-							icon={ <Icon icon={ close } size={ 20 } /> }
-							onClick={ onFileRemove }
-							disabled={ disabled }
-							aria-label={ __(
-								'Remove file',
-								'woocommerce-payments'
-							) }
-							isDestructive
-						/>
-					</>
-				) : null }
 				<FormFileUpload
 					accept={ accept }
 					onChange={ (
@@ -78,7 +74,7 @@ const FileUploadControl: React.FC< FileUploadControlProps > = ( {
 					render={ ( { openFileDialog } ) => (
 						<Button
 							className="wcpay-dispute-evidence-file-upload-control__upload"
-							icon={ <Icon icon={ cloudUpload } size={ 20 } /> }
+							icon={ <Icon icon={ cloudUpload } size={ 24 } /> }
 							onClick={ openFileDialog }
 							disabled={ disabled }
 							aria-label={ __(

From 4d6ffc3193859f75f771e841b5ec773f1cc11c2d Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 30 May 2025 23:08:03 -0300
Subject: [PATCH 13/42] update main page to use the new components

---
 client/disputes/new-evidence/index.tsx  | 158 +++++++++++++++++-------
 client/disputes/new-evidence/style.scss | 103 ++++++++++++---
 2 files changed, 199 insertions(+), 62 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index b161d80dc55..6a676d3feee 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -27,15 +27,13 @@ import CustomerDetails from './customer-details';
 import ProductDetails from './product-details';
 import RecommendedDocuments from './recommended-documents';
 import InlineNotice from 'components/inline-notice';
+import ShippingDetails from './shipping-details';
+import CoverLetter from './cover-letter';
 
 /**
  * Internal dependencies.
  */
-import {
-	Button,
-	HorizontalRule,
-	SelectControl,
-} from 'wcpay/components/wp-components-wrapped';
+import { Button, HorizontalRule } from 'wcpay/components/wp-components-wrapped';
 import { getAdminUrl } from 'wcpay/utils';
 import { StepperPanel } from 'wcpay/components/stepper';
 import {
@@ -97,6 +95,7 @@ export default ( { query }: { query: { id: string } } ) => {
 	const [ isAccordionOpen, setIsAccordionOpen ] = useState( true );
 	const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
 	const [ productDescription, setProductDescription ] = useState( '' );
+	const [ coverLetter, setCoverLetter ] = useState( '' );
 	const {
 		createSuccessNotice,
 		createErrorNotice,
@@ -112,6 +111,54 @@ export default ( { query }: { query: { id: string } } ) => {
 				setDispute( d );
 				// fallback to multiple if no product type is set
 				setProductType( d.metadata?.__product_type || 'multiple' );
+
+				// Generate default cover letter
+				const merchantName = d?.merchant_name || 'Sellthosejeans';
+				const merchantAddress =
+					d?.merchant_address ||
+					'123 High Street, LONDON, SW1A 1AA, UNITED KINGDOM';
+				const merchantEmail = d?.merchant_email || 'paul@gmail.com';
+				const merchantPhone = d?.merchant_phone || '+13334445566';
+				const today = new Date().toLocaleDateString( undefined, {
+					year: 'numeric',
+					month: 'long',
+					day: 'numeric',
+				} );
+				const acquiringBank =
+					'[Acquiring Bank or Payment Processor Name]';
+				const caseNumber = '[Chargeback Case Number]';
+				const transactionId = '[Transaction ID]';
+				const transactionDate = '[Transaction Date]';
+				const customerName = '[Customer Name]';
+				const product = '[Product]';
+				const orderDate = '[Order Date]';
+				const defaultLetter = `${ merchantName }
+${ merchantAddress }
+${ merchantEmail }
+${ merchantPhone }
+${ today }
+
+To: ${ acquiringBank }
+Subject: Chargeback Dispute – Case # ${ caseNumber }
+
+Dear Dispute Resolution Team,
+
+We are submitting evidence in response to chargeback # ${ caseNumber } for transaction # ${ transactionId } on ${ transactionDate }.
+
+Our records indicate that the customer and legitimate cardholder, ${ customerName }, ordered ${ product } on ${ orderDate }.
+
+To support our case, we are providing the following documentation:
+• AVS/CVV Match: Billing address and security code matched (Attachment A)
+• IP/Device Data: Location and device info used at purchase (Attachment B)
+• Customer Confirmation: Email or chat confirming purchase (Attachment C)
+• Usage Data: Login records for the digital goods (Attachment D)
+
+Based on this information, we respectfully request that the chargeback be reversed. Please let us know if any further details are required.
+
+Thank you,
+Paul McCartney
+${ merchantName }`;
+				setCoverLetter( defaultLetter );
 			} finally {
 				setLoading( false );
 			}
@@ -360,6 +407,14 @@ export default ( { query }: { query: { id: string } } ) => {
 		},
 	];
 
+	// --- Recommended shipping documents ---
+	const recommendedShippingDocumentFields = [
+		{
+			key: 'shipping_receipt',
+			label: __( 'Proof of shipping', 'woocommerce-payments' ),
+		},
+	];
+
 	const recommendedDocumentsFields = recommendedDocumentFields.map(
 		( field ) => ( {
 			key: field.key,
@@ -372,8 +427,47 @@ export default ( { query }: { query: { id: string } } ) => {
 		} )
 	);
 
+	const recommendedShippingDocumentsFields = recommendedShippingDocumentFields.map(
+		( field ) => ( {
+			key: field.key,
+			label: field.label,
+			fileName: evidence[ field.key ] || '',
+			uploaded: !! evidence[ field.key ],
+			onFileChange: ( _key: string, file: File ) =>
+				Promise.resolve( doUploadFile( field.key, file ) ),
+			onFileRemove: () => Promise.resolve( doRemoveFile( field.key ) ),
+		} )
+	);
+
 	const bankName = dispute?.charge ? getBankName( dispute.charge ) : null;
 
+	const inlineNotice = ( bankName: string | null ) => (
+		<InlineNotice
+			icon
+			isDismissible={ false }
+			status="info"
+			className="dispute-steps__notice-content"
+		>
+			{ createInterpolateElement(
+				bankName
+					? sprintf(
+							__(
+								'<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. <strong>%1$s</strong> makes the decision in this process.',
+								'woocommerce-payments'
+							),
+							bankName
+					  )
+					: __(
+							"<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. The cardholder's bank makes the decision in this process.",
+							'woocommerce-payments'
+					  ),
+				{
+					strong: <strong />,
+				}
+			) }
+		</InlineNotice>
+	);
+
 	// --- Step content ---
 	const renderStepContent = () => {
 		if ( ! fields.length ) return null;
@@ -473,30 +567,7 @@ export default ( { query }: { query: { id: string } } ) => {
 					<RecommendedDocuments
 						fields={ recommendedDocumentsFields }
 					/>
-					<InlineNotice
-						icon
-						isDismissible={ false }
-						status="info"
-						className="dispute-steps__notice-content"
-					>
-						{ createInterpolateElement(
-							bankName
-								? sprintf(
-										__(
-											'<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. <strong>%1$s</strong> makes the decision in this process.',
-											'woocommerce-payments'
-										),
-										bankName
-								  )
-								: __(
-										"<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. The cardholder's bank makes the decision in this process.",
-										'woocommerce-payments'
-								  ),
-							{
-								strong: <strong />,
-							}
-						) }
-					</InlineNotice>
+					{ inlineNotice( bankName ) }
 				</>
 			);
 		}
@@ -509,15 +580,14 @@ export default ( { query }: { query: { id: string } } ) => {
 					<p className="wcpay-dispute-evidence-new__stepper-subheading">
 						{ steps[ 1 ].subheading }
 					</p>
-					{ fields
-						.filter(
-							( s: any ) => s.key === 'shipping_information'
-						)
-						.map( ( section: any ) => (
-							<div key={ section.key }>
-								{ section.fields.map( renderField ) }
-							</div>
-						) ) }
+					<ShippingDetails
+						dispute={ dispute }
+						readOnly={ readOnly }
+					/>
+					<RecommendedDocuments
+						fields={ recommendedShippingDocumentsFields }
+					/>
+					{ inlineNotice( bankName ) }
 				</>
 			);
 		}
@@ -532,13 +602,11 @@ export default ( { query }: { query: { id: string } } ) => {
 					<p className="wcpay-dispute-evidence-new__stepper-subheading">
 						{ steps[ reviewStep ].subheading }
 					</p>
-					<div className="cover-letter-preview">
-						{ evidence.uncategorized_text ||
-							__(
-								'No additional details provided.',
-								'woocommerce-payments'
-							) }
-					</div>
+					<CoverLetter
+						value={ coverLetter }
+						onChange={ setCoverLetter }
+					/>
+					{ inlineNotice( bankName ) }
 				</>
 			);
 		}
diff --git a/client/disputes/new-evidence/style.scss b/client/disputes/new-evidence/style.scss
index 6f34dc8385d..1faaee23eff 100644
--- a/client/disputes/new-evidence/style.scss
+++ b/client/disputes/new-evidence/style.scss
@@ -189,6 +189,20 @@
   }
 }
 
+.wcpay-dispute-evidence-shipping-details {
+  margin-bottom: 40px;
+
+  &__heading {
+    @include heading-md;
+    color: var(--Scales-Grays-gray-900, $gray-900);
+    margin-bottom: 16px;
+  }
+
+  &__field-group {
+    margin-bottom: 24px;
+  }
+}
+  
 .wcpay-dispute-evidence-recommended-documents {
   margin-bottom: 40px;
 
@@ -226,7 +240,7 @@
   }
 
   &__upload .components-button {
-    background: var(--wp-admin-theme-color);;
+    background: var(--wp-admin-theme-color);
     color: #fff;
     border-radius: 8px;
     min-width: 48px;
@@ -248,43 +262,98 @@
     }
   }
 
-  &__check {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   &__filename {
-    max-width: 260px;
+    max-width: 320px;
+    min-width: 120px;
     background: color-mix(in srgb, var(--wp-admin-theme-color) 10%, transparent);
-    color: var(--wp-admin-theme-color);
     border-radius: 24px;
-    padding: 0 20px;
+    padding: 0 12px 0 12px;
     font-size: 14px;
     line-height: 32px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline-block;
-    vertical-align: middle;
+    position: relative;
   }
 
-  &__remove .components-button {
-    background: transparent;
+  &__filename-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     color: var(--wp-admin-theme-color);
+  }
+
+  &__remove .components-button {
     border: none;
-    min-width: 32px;
-    min-height: 32px;
+    min-width: 24px;
+    min-height: 24px;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    color: var(--wp-admin-theme-color);
+    background: transparent;
+    svg {
+      color: inherit;
+      fill: currentColor;
+    }
     &:hover:not(:disabled) {
-      background: #e0e6f7;
+      background: color-mix(in srgb, #fff 10%, transparent);
+      color: var(--wp-admin-theme-color);
     }
     &:disabled {
       color: #b3b3b3;
       cursor: not-allowed;
     }
   }
+}
+
+.wcpay-dispute-evidence-cover-letter__printonly {
+  display: none;
+}
+
+@media print {
+  body * {
+    visibility: hidden !important;
+  }
+  .wcpay-dispute-evidence-cover-letter,
+  .wcpay-dispute-evidence-cover-letter * {
+    visibility: visible !important;
+  }
+  .wcpay-dispute-evidence-cover-letter {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    max-width: 700px;
+    margin: 0 auto !important;
+    background: #fff;
+    z-index: 9999;
+    padding: 40px;
+    box-sizing: border-box;
+    page-break-inside: avoid;
+  }
+  .wcpay-dispute-evidence-cover-letter__print,
+  .wcpay-dispute-evidence-cover-letter__textarea {
+    display: none !important;
+  }
+  .wcpay-dispute-evidence-cover-letter__printonly {
+    display: block !important;
+    white-space: pre-wrap;
+    font-family: inherit;
+    font-size: 16px;
+    color: #000;
+    background: #fff;
+    border: none;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    width: 100%;
+  }
 }
\ No newline at end of file

From 2147b55318f58209f533d4c3c0af753c0c4ea337 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Sat, 31 May 2025 18:38:24 -0300
Subject: [PATCH 14/42] last fixes and tests

---
 client/disputes/new-evidence/cover-letter.tsx |   7 +-
 .../new-evidence/customer-details.tsx         |   2 +-
 client/disputes/new-evidence/fields.ts        | 490 ------------------
 client/disputes/new-evidence/index.tsx        | 152 +-----
 .../disputes/new-evidence/product-details.tsx |   5 -
 .../new-evidence/shipping-details.tsx         |  22 +-
 client/disputes/new-evidence/style.scss       |   5 -
 .../new-evidence/test/cover-letter.test.tsx   |  40 ++
 .../test/customer-details.test.tsx            |  58 +++
 .../test/file-upload-control.test.tsx         |  84 +++
 .../test/product-details.test.tsx             |  53 ++
 .../test/recommended-documents.test.tsx       |  83 +++
 .../test/shipping-details.test.tsx            |  63 +++
 13 files changed, 410 insertions(+), 654 deletions(-)
 delete mode 100644 client/disputes/new-evidence/fields.ts
 create mode 100644 client/disputes/new-evidence/test/cover-letter.test.tsx
 create mode 100644 client/disputes/new-evidence/test/customer-details.test.tsx
 create mode 100644 client/disputes/new-evidence/test/file-upload-control.test.tsx
 create mode 100644 client/disputes/new-evidence/test/product-details.test.tsx
 create mode 100644 client/disputes/new-evidence/test/recommended-documents.test.tsx
 create mode 100644 client/disputes/new-evidence/test/shipping-details.test.tsx

diff --git a/client/disputes/new-evidence/cover-letter.tsx b/client/disputes/new-evidence/cover-letter.tsx
index e66f861f043..962281f240f 100644
--- a/client/disputes/new-evidence/cover-letter.tsx
+++ b/client/disputes/new-evidence/cover-letter.tsx
@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import { __ } from '@wordpress/i18n';
+import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -12,7 +13,6 @@ import {
 	Button,
 	Icon,
 } from 'wcpay/components/wp-components-wrapped';
-import { external } from '@wordpress/icons';
 
 interface CoverLetterProps {
 	value: string;
@@ -34,6 +34,11 @@ const CoverLetter: React.FC< CoverLetterProps > = ( { value, onChange } ) => {
 				variant="primary"
 				onClick={ () => window.print() }
 				icon={ <Icon icon={ external } size={ 24 } /> }
+				style={ {
+					background: '#3B5AFB',
+					color: '#fff',
+					marginBottom: 16,
+				} }
 			>
 				{ __( 'View cover letter', 'woocommerce-payments' ) }
 			</Button>
diff --git a/client/disputes/new-evidence/customer-details.tsx b/client/disputes/new-evidence/customer-details.tsx
index 3d4ab0efb3d..74b573df063 100644
--- a/client/disputes/new-evidence/customer-details.tsx
+++ b/client/disputes/new-evidence/customer-details.tsx
@@ -23,7 +23,7 @@ const CustomerDetails: React.FC< CustomerDetailsProps > = ( { dispute } ) => {
 	const phone = charge?.billing_details?.phone || '-';
 	const email = charge?.billing_details?.email || '-';
 	const ip = dispute.order?.ip_address || '-';
-	const address = charge?.billing_details.address;
+	const address = charge?.billing_details?.address;
 	const billingLine1 = address?.line1 || '';
 	const billingLine2 = address?.line2 || '';
 	const billingCity = address?.city || '';
diff --git a/client/disputes/new-evidence/fields.ts b/client/disputes/new-evidence/fields.ts
deleted file mode 100644
index ef8132ccfb4..00000000000
--- a/client/disputes/new-evidence/fields.ts
+++ /dev/null
@@ -1,490 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { includes } from 'lodash';
-
-/**
- * Internal dependencies
- */
-
-/**
- * Dispute reasons
- */
-export type DisputeReason =
-	| 'fraudulent'
-	| 'product_not_received'
-	| 'product_unacceptable'
-	| 'duplicate'
-	| 'subscription_canceled'
-	| 'credit_not_processed'
-	| 'unrecognized';
-
-/**
- * Product types
- */
-export type ProductType =
-	| 'physical_product'
-	| 'digital_product_or_service'
-	| 'offline_service'
-	| 'multiple';
-
-export type FieldType = 'text' | 'textarea' | 'file' | 'date';
-
-export interface Field {
-	key: string;
-	label?: string;
-	description?: string | string[];
-	type: FieldType;
-	denormalized?: boolean;
-	productType?: ProductType;
-	maxLength?: number;
-}
-
-export interface Section {
-	key: string;
-	title: string;
-	description?: string;
-	fields: Field[];
-	reason?: DisputeReason | DisputeReason[];
-	productType?: ProductType;
-	denormalized?: boolean;
-}
-
-const sections: Section[] = [
-	{
-		key: 'general',
-		title: __( 'General evidence', 'woocommerce-payments' ),
-		description: __(
-			'Provide general evidence about the customer and the order.',
-			'woocommerce-payments'
-		),
-		fields: [
-			{
-				key: 'product_description',
-				label: __( 'Product description', 'woocommerce-payments' ),
-				maxLength: 20000,
-				type: 'textarea',
-				description: __(
-					'A description of the product or service and any relevant details on how this was presented to the customer at the time of purchase.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'customer_name',
-				label: __( 'Customer name', 'woocommerce-payments' ),
-				type: 'text',
-			},
-			{
-				key: 'customer_email_address',
-				label: __( 'Customer email', 'woocommerce-payments' ),
-				type: 'text',
-			},
-			{
-				key: 'customer_signature',
-				label: __( 'Customer signature', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					"A relevant document or contract showing the customer's signature (if available).",
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'billing_address',
-				label: __( 'Customer billing address', 'woocommerce-payments' ),
-				type: 'textarea',
-			},
-			{
-				key: 'customer_purchase_ip',
-				label: __( 'Customer IP address', 'woocommerce-payments' ),
-				type: 'text',
-			},
-			{
-				key: 'receipt',
-				label: __( 'Receipt', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					'Any receipt or message sent to the customer notifying them of the charge. This field will be automatically filled with a Stripe generated email receipt if any such receipt was sent.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'customer_communication',
-				label: __( 'Customer communication', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					'Any communication with the customer that you feel is relevant to your case (e.g. emails proving that they received the product or service, or demonstrating their use of or satisfaction with the product or service).',
-					'woocommerce-payments'
-				),
-			},
-		],
-	},
-	{
-		key: 'refund_policy_info',
-		title: __( 'Refund policy info', 'woocommerce-payments' ),
-		fields: [
-			{
-				key: 'refund_policy',
-				label: __( 'Refund policy', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					'Your refund policy, as shown or provided to the customer.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'refund_policy_disclosure',
-				label: __( 'Refund policy disclosure', 'woocommerce-payments' ),
-				maxLength: 20000,
-				type: 'textarea',
-				description: __(
-					'An explanation of how and when the customer was shown or provided your refund policy prior to purchase.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'refund_refusal_explanation',
-				label: __(
-					'Refund refusal explanation',
-					'woocommerce-payments'
-				),
-				maxLength: 20000,
-				type: 'textarea',
-				description: __(
-					'Your explanation for why the customer is not entitled to a refund.',
-					'woocommerce-payments'
-				),
-			},
-		],
-		reason: 'credit_not_processed',
-	},
-	{
-		key: 'duplicate_charge_info',
-		title: __( 'Duplicate charge info', 'woocommerce-payments' ),
-		fields: [
-			{
-				key: 'duplicate_charge_id',
-				label: __( 'Duplicate charge ID', 'woocommerce-payments' ),
-				type: 'text',
-				description: __(
-					'The charge ID for the previous payment that appears to be a duplicate of the one that is disputed.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'duplicate_charge_explanation',
-				label: __(
-					'Explanation of duplicate charge',
-					'woocommerce-payments'
-				),
-				maxLength: 20000,
-				type: 'textarea',
-				description: __(
-					'An explanation of the difference between the disputed payment and the prior one that appears to be a duplicate.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'duplicate_charge_documentation',
-				label: __(
-					'Duplicate charge documentation',
-					'woocommerce-payments'
-				),
-				type: 'file',
-				description: __(
-					'Upload documentation for the prior payment that can uniquely identify it, such as a separate receipt. This document should be paired with a similar document from the disputed payment that proves the two are separate. This should also include a separate shipping label or receipt for the other payment. If multiple products were shipped together, provide a packing list that shows each purchase.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'shipping_documentation',
-				label: __( 'Shipping documentation', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					'A shipping label or receipt for the disputed payment.',
-					'woocommerce-payments'
-				),
-				denormalized: true,
-				productType: 'physical_product',
-			},
-			{
-				key: 'service_documentation',
-				label: __( 'Service documentation', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					'A copy of a service agreement or documentation for the disputed payment.',
-					'woocommerce-payments'
-				),
-				denormalized: true,
-				productType: 'offline_service',
-			},
-		],
-		reason: 'duplicate',
-	},
-	{
-		key: 'shipping_information',
-		title: __( 'Shipping information', 'woocommerce-payments' ),
-		fields: [
-			{
-				key: 'shipping_carrier',
-				label: __( 'Shipping carrier', 'woocommerce-payments' ),
-				type: 'text',
-				description: __(
-					'The delivery service that shipped a physical product, such as Fedex, UPS, USPS, etc. If multiple carriers were used for this purchase, please separate them with commas.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'shipping_tracking_number',
-				label: __( 'Tracking number', 'woocommerce-payments' ),
-				type: 'text',
-				description: __(
-					'The tracking number (if available) for a physical product, obtained from the delivery service. If multiple tracking numbers were generated for this purchase, please separate them with commas. When we compile your evidence into a single document, these tracking numbers will be expanded to include detailed delivery information from the carrier.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'shipping_documentation',
-				label: __( 'Proof of shipping', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					'Provide documentation as proof that a product was shipped to the cardholder at the same address the cardholder provided to you. This could include a copy of the shipment receipt or label, and show the full shipping address of the cardholder, if possible.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'shipping_date',
-				label: __( 'Date of shipment', 'woocommerce-payments' ),
-				type: 'date',
-				description: __(
-					'The date on which a physical product began its route to the shipping address. This date should be prior to the date of the dispute.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'shipping_address',
-				label: __( 'Shipping address', 'woocommerce-payments' ),
-				type: 'textarea',
-				description: __(
-					'The address to which a physical product was shipped. The shipping address must match a billing address verified with AVS. (A signature is not required as evidence of delivery).',
-					'woocommerce-payments'
-				),
-			},
-		],
-		reason: [
-			'fraudulent',
-			'product_not_received',
-			'product_unacceptable',
-			'unrecognized',
-		],
-		productType: 'physical_product',
-	},
-	{
-		key: 'cancellation_policy_info',
-		title: __( 'Cancellation policy info', 'woocommerce-payments' ),
-		fields: [
-			{
-				key: 'cancellation_policy',
-				label: __( 'Cancellation policy', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					'Your subscription cancellation policy, as shown to the customer.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'cancellation_policy_disclosure',
-				label: __(
-					'Cancellation policy disclosure',
-					'woocommerce-payments'
-				),
-				maxLength: 20000,
-				type: 'textarea',
-				description: __(
-					'An explanation of how and when the customer was shown your cancellation policy prior to purchase.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'cancellation_rebuttal',
-				label: __( 'Cancellation rebuttal', 'woocommerce-payments' ),
-				maxLength: 20000,
-				type: 'textarea',
-				description: __(
-					"A justification for why the customer's subscription was not canceled.",
-					'woocommerce-payments'
-				),
-			},
-		],
-		reason: 'subscription_canceled',
-	},
-	{
-		key: 'download_and_activity_logs',
-		title: __( 'Download and activity logs', 'woocommerce-payments' ),
-		fields: [
-			{
-				key: 'access_activity_log',
-				type: 'file',
-				description: [
-					__(
-						'Provide at least two of the following pieces of information:',
-						'woocommerce-payments'
-					),
-					__(
-						"• Customer's IP address and their device's geographical location at the time of purchase",
-						'woocommerce-payments'
-					),
-					__(
-						'• Device ID and name of the device',
-						'woocommerce-payments'
-					),
-					__(
-						'• Customer name and email address linked to their customer profile',
-						'woocommerce-payments'
-					),
-					__(
-						'• Evidence that the customer logged into their account for your business before the transaction date',
-						'woocommerce-payments'
-					),
-					__(
-						'• Evidence that your website or app was accessed by the cardholder for purchase or services on or after the transaction date',
-						'woocommerce-payments'
-					),
-					__(
-						'• Evidence that the same device and card used in the disputed payment was used in a previous payment that was not disputed',
-						'woocommerce-payments'
-					),
-				],
-			},
-		],
-		reason: [ 'fraudulent', 'product_not_received' ],
-		productType: 'digital_product_or_service',
-	},
-	{
-		key: 'download_and_activity_logs',
-		title: __( 'Download and activity logs', 'woocommerce-payments' ),
-		fields: [
-			{
-				key: 'access_activity_log',
-				type: 'file',
-				description: __(
-					'Any server or activity logs showing proof that the cardholder accessed or downloaded the purchased digital product. This information should include IP addresses, corresponding timestamps, and any detailed recorded activity.',
-					'woocommerce-payments'
-				),
-			},
-		],
-		reason: [
-			'product_unacceptable',
-			'subscription_canceled',
-			'unrecognized',
-		],
-		productType: 'digital_product_or_service',
-		denormalized: true,
-	},
-	{
-		key: 'service_details',
-		title: __( 'Service details', 'woocommerce-payments' ),
-		fields: [
-			{
-				key: 'service_date',
-				label: __( 'Service date', 'woocommerce-payments' ),
-				type: 'date',
-				description: __(
-					'The date on which the cardholder received or began receiving the purchased service.',
-					'woocommerce-payments'
-				),
-			},
-			{
-				key: 'service_documentation',
-				label: __( 'Proof of service', 'woocommerce-payments' ),
-				type: 'file',
-				description: __(
-					'Documentation showing proof that a service was provided to the cardholder. This could include a copy of a signed contract, work order, or other form of written agreement.',
-					'woocommerce-payments'
-				),
-			},
-		],
-		reason: [
-			'fraudulent',
-			'product_not_received',
-			'product_unacceptable',
-			'subscription_canceled',
-			'unrecognized',
-		],
-		productType: 'offline_service',
-	},
-	{
-		key: 'uncategorized',
-		title: __( 'Additional details', 'woocommerce-payments' ),
-		description: __(
-			"Provide any extra evidence or statements you'd like the bank to see, either as text or by uploading a document.",
-			'woocommerce-payments'
-		),
-		fields: [
-			{
-				key: 'uncategorized_text',
-				label: __( 'Additional details', 'woocommerce-payments' ),
-				maxLength: 20000,
-				type: 'textarea',
-			},
-			{
-				key: 'uncategorized_file',
-				label: __( 'Additional document', 'woocommerce-payments' ),
-				type: 'file',
-			},
-		],
-	},
-];
-
-/**
- * Return evidence fields that pertain to given reason and productType.
- *
- * Sections can optionally specify 'reason' as a string or array of strings, and/or 'productType'.
- * Fields can optionally specify 'productType'.
- * Sections and fields can specify denormalized: true to be omitted when all fields are shown.
- *
- * @param reason      Dispute reason for which to present fields.
- * @param productType Product type for which to present fields.
- *
- * @return Sections of fields.
- */
-export default function getEvidenceFields(
-	reason: DisputeReason,
-	productType: ProductType
-): Section[] {
-	if ( ! reason || ! productType ) {
-		return [];
-	}
-
-	if ( productType === 'multiple' ) {
-		return sections
-			.map( ( section ) => {
-				if ( section.denormalized ) {
-					return null;
-				}
-				return {
-					...section,
-					fields: section.fields.filter(
-						( field ) => ! field.denormalized
-					),
-				};
-			} )
-			.filter( Boolean ) as Section[];
-	}
-
-	return sections
-		.map( ( section ) => {
-			const reasonMismatch =
-				section.reason && ! includes( section.reason, reason );
-			const productTypeMismatch =
-				section.productType && section.productType !== productType;
-			if ( reasonMismatch || productTypeMismatch ) {
-				return null;
-			}
-			const fields = section.fields.filter( ( field ) => {
-				return ! field.productType || field.productType === productType;
-			} );
-			return { ...section, fields };
-		} )
-		.filter( Boolean ) as Section[];
-}
diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 6a676d3feee..ef8931aec1a 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -6,10 +6,9 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import apiFetch from '@wordpress/api-fetch';
 import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import useConfirmNavigation from 'utils/use-confirm-navigation';
 import { recordEvent } from 'tracks';
-import { FileUploadControl, UploadedReadOnly } from 'components/file-upload';
 import { TestModeNotice } from 'components/test-mode-notice';
 import ErrorBoundary from 'components/error-boundary';
 import Paragraphs from 'components/paragraphs';
@@ -22,7 +21,6 @@ import { HorizontalList } from 'components/horizontal-list';
 import { formatExplicitCurrency } from 'multi-currency/interface/functions';
 import { formatDateTimeFromTimestamp } from 'wcpay/utils/date-time';
 import { getBankName } from 'utils/charge';
-import evidenceFields, { DisputeReason, ProductType } from './fields';
 import CustomerDetails from './customer-details';
 import ProductDetails from './product-details';
 import RecommendedDocuments from './recommended-documents';
@@ -88,7 +86,6 @@ function needsShipping( reason: string | undefined ) {
 export default ( { query }: { query: { id: string } } ) => {
 	const path = `/wc/v3/payments/disputes/${ query.id }`;
 	const [ dispute, setDispute ] = useState< any >();
-	const [ loading, setLoading ] = useState( false );
 	const [ evidence, setEvidence ] = useState< any >( {} );
 	const [ productType, setProductType ] = useState< string >( '' );
 	const [ currentStep, setCurrentStep ] = useState( 0 );
@@ -96,16 +93,13 @@ export default ( { query }: { query: { id: string } } ) => {
 	const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
 	const [ productDescription, setProductDescription ] = useState( '' );
 	const [ coverLetter, setCoverLetter ] = useState( '' );
-	const {
-		createSuccessNotice,
-		createErrorNotice,
-		createInfoNotice,
-	} = useDispatch( 'core/notices' );
+	const { createSuccessNotice, createErrorNotice } = useDispatch(
+		'core/notices'
+	);
 
 	// --- Data loading ---
 	useEffect( () => {
 		const fetchDispute = async () => {
-			setLoading( true );
 			try {
 				const d: any = await apiFetch( { path } );
 				setDispute( d );
@@ -159,12 +153,12 @@ Thank you,
 Paul McCartney
 ${ merchantName }`;
 				setCoverLetter( defaultLetter );
-			} finally {
-				setLoading( false );
+			} catch ( error ) {
+				createErrorNotice( String( error ) );
 			}
 		};
 		fetchDispute();
-	}, [ path ] );
+	}, [ path, createErrorNotice ] );
 
 	// --- Step logic ---
 	const disputeReason = dispute?.reason;
@@ -177,53 +171,12 @@ ${ merchantName }`;
 		setIsAccordionOpen( currentStep === 0 );
 	}, [ currentStep ] );
 
-	// --- Evidence fields ---
-	const fields = useMemo(
-		() =>
-			evidenceFields(
-				disputeReason as DisputeReason,
-				productType as ProductType
-			),
-		[ disputeReason, productType ]
-	);
-
 	// --- Read-only logic ---
 	const readOnly =
 		dispute &&
 		dispute.status !== 'needs_response' &&
 		dispute.status !== 'warning_needs_response';
 
-	// --- Notices for error deduplication ---
-	const { getNotices } = useSelect(
-		( select: any ) => select( 'core/notices' ),
-		[]
-	);
-
-	// --- Evidence update helpers ---
-	const isEvidenceWithinLengthLimit = ( field: any, value: string ) => {
-		if ( field.maxLength && value.length >= field.maxLength ) {
-			return false;
-		}
-		// Optionally, add total length check here if needed
-		return true;
-	};
-	const updateEvidence = ( key: string, value: any, field?: any ) => {
-		if ( field && ! isEvidenceWithinLengthLimit( field, value ) ) {
-			const errorMessage = __(
-				'Reached maximum character count for evidence',
-				'woocommerce-payments'
-			);
-			if (
-				! getNotices().some(
-					( notice: any ) => notice.content === errorMessage
-				)
-			) {
-				createErrorNotice( errorMessage );
-			}
-			return;
-		}
-		setEvidence( ( e: any ) => ( { ...e, [ key ]: value } ) );
-	};
 	const updateProductType = ( newType: string ) => {
 		recordEvent( 'wcpay_dispute_product_selected', { selection: newType } );
 		setProductType( newType );
@@ -274,7 +227,6 @@ ${ merchantName }`;
 
 	// --- Save/submit logic ---
 	const doSave = async ( submit: boolean ) => {
-		setLoading( true );
 		try {
 			await apiFetch( {
 				path,
@@ -297,8 +249,6 @@ ${ merchantName }`;
 			} else {
 				createErrorNotice( String( err ) );
 			}
-		} finally {
-			setLoading( false );
 		}
 	};
 
@@ -421,7 +371,7 @@ ${ merchantName }`;
 			label: field.label,
 			fileName: evidence[ field.key ] || '',
 			uploaded: !! evidence[ field.key ],
-			onFileChange: ( _key: string, file: File ) =>
+			onFileChange: ( key: string, file: File ) =>
 				Promise.resolve( doUploadFile( field.key, file ) ),
 			onFileRemove: () => Promise.resolve( doRemoveFile( field.key ) ),
 		} )
@@ -433,7 +383,7 @@ ${ merchantName }`;
 			label: field.label,
 			fileName: evidence[ field.key ] || '',
 			uploaded: !! evidence[ field.key ],
-			onFileChange: ( _key: string, file: File ) =>
+			onFileChange: ( key: string, file: File ) =>
 				Promise.resolve( doUploadFile( field.key, file ) ),
 			onFileRemove: () => Promise.resolve( doRemoveFile( field.key ) ),
 		} )
@@ -441,7 +391,7 @@ ${ merchantName }`;
 
 	const bankName = dispute?.charge ? getBankName( dispute.charge ) : null;
 
-	const inlineNotice = ( bankName: string | null ) => (
+	const inlineNotice = ( bankNameValue: string | null ) => (
 		<InlineNotice
 			icon
 			isDismissible={ false }
@@ -449,13 +399,13 @@ ${ merchantName }`;
 			className="dispute-steps__notice-content"
 		>
 			{ createInterpolateElement(
-				bankName
+				bankNameValue
 					? sprintf(
 							__(
 								'<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. <strong>%1$s</strong> makes the decision in this process.',
 								'woocommerce-payments'
 							),
-							bankName
+							bankNameValue
 					  )
 					: __(
 							"<strong>WooPayments does not determine the outcome of the dispute process</strong> and is not liable for any chargebacks. The cardholder's bank makes the decision in this process.",
@@ -470,83 +420,7 @@ ${ merchantName }`;
 
 	// --- Step content ---
 	const renderStepContent = () => {
-		if ( ! fields.length ) return null;
-		// Helper to render a field with readOnly logic
-		const renderField = ( field: any ) => {
-			if ( field.type === 'file' ) {
-				return readOnly ? (
-					<UploadedReadOnly
-						key={ field.key }
-						field={ field }
-						fileName={ evidence[ field.key ] || '' }
-						showPreview={ false }
-						accept={ '.pdf, image/png, image/jpeg' }
-						isDone={ !! evidence[ field.key ] }
-						isLoading={ false }
-						error={ '' }
-						disabled={ true }
-						onFileChange={ async () => {} }
-						onFileRemove={ () => {} }
-					/>
-				) : (
-					<FileUploadControl
-						key={ field.key }
-						field={ field }
-						fileName={ evidence[ field.key ] || '' }
-						onFileChange={ ( _key: string, file: File ) =>
-							doUploadFile( field.key, file )
-						}
-						onFileRemove={ field.onFileRemove }
-						accept={ '.pdf, image/png, image/jpeg' }
-						isDone={ !! evidence[ field.key ] }
-						isLoading={ false }
-						error={ '' }
-						disabled={ false }
-					/>
-				);
-			}
-			if ( field.type === 'text' ) {
-				return (
-					<input
-						key={ field.key }
-						type="text"
-						value={ evidence[ field.key ] || '' }
-						onChange={ ( e: any ) =>
-							updateEvidence( field.key, e.target.value, field )
-						}
-						className="components-text-control__input"
-						disabled={ readOnly }
-					/>
-				);
-			}
-			if ( field.type === 'date' ) {
-				return (
-					<input
-						key={ field.key }
-						type="date"
-						value={ evidence[ field.key ] || '' }
-						onChange={ ( e: any ) =>
-							updateEvidence( field.key, e.target.value, field )
-						}
-						className="components-text-control__input"
-						disabled={ readOnly }
-					/>
-				);
-			}
-			// textarea
-			return (
-				<textarea
-					key={ field.key }
-					value={ evidence[ field.key ] || '' }
-					onChange={ ( e: any ) =>
-						updateEvidence( field.key, e.target.value, field )
-					}
-					maxLength={ field.maxLength }
-					className="components-textarea-control__input"
-					disabled={ readOnly }
-				/>
-			);
-		};
+		// if ( ! fields.length ) return null;
 		if ( currentStep === 0 ) {
 			return (
 				<>
diff --git a/client/disputes/new-evidence/product-details.tsx b/client/disputes/new-evidence/product-details.tsx
index 9cdccba1798..1b3af2735c9 100644
--- a/client/disputes/new-evidence/product-details.tsx
+++ b/client/disputes/new-evidence/product-details.tsx
@@ -34,9 +34,6 @@ const ProductDetails: React.FC< ProductDetailsProps > = ( {
 			</h3>
 			<div className="wcpay-dispute-evidence-product-details__field-group">
 				<SelectControl
-					// @ts-ignore
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
 					label={ __( 'PRODUCT TYPE', 'woocommerce-payments' ) }
 					help={ __(
 						'First select the kind of product you fulfilled.',
@@ -79,8 +76,6 @@ const ProductDetails: React.FC< ProductDetailsProps > = ( {
 			</div>
 			<div className="wcpay-dispute-evidence-product-details__field-group">
 				<TextareaControl
-					// @ts-ignore
-					__nextHasNoMarginBottom
 					label={ __(
 						'PRODUCT DESCRIPTION',
 						'woocommerce-payments'
diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index 9c81e5d9b6d..d3de8b7176c 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -33,50 +33,46 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 			</h3>
 			<div className="wcpay-dispute-evidence-shipping-details__field-group">
 				<TextControl
-					// @ts-ignore
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
 					label={ __( 'SHIPPING CARRIER', 'woocommerce-payments' ) }
+					// eslint-disable-next-line @typescript-eslint/no-empty-function
 					onChange={ () => {} }
 					value={ carrier }
+					disabled={ readOnly }
 				/>
 			</div>
 			<div className="wcpay-dispute-evidence-shipping-details__field-group">
 				<TextControl
-					// @ts-ignore
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
 					label={ __( 'SHIPPING DATE', 'woocommerce-payments' ) }
+					// eslint-disable-next-line @typescript-eslint/no-empty-function
 					onChange={ () => {} }
 					value={ date.toLocaleDateString() }
+					disabled={ readOnly }
 				/>
 			</div>
 			<div className="wcpay-dispute-evidence-shipping-details__field-group">
 				<TextControl
-					// @ts-ignore
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
 					label={ __( 'TRACKING NUMBER', 'woocommerce-payments' ) }
 					help={ __(
 						'Please make sure the tracking number is accurate.',
 						'woocommerce-payments'
 					) }
+					// eslint-disable-next-line @typescript-eslint/no-empty-function
 					onChange={ () => {} }
 					value={ tracking }
+					disabled={ readOnly }
 				/>
 			</div>
 			<div className="wcpay-dispute-evidence-shipping-details__field-group">
 				<TextControl
-					// @ts-ignore
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
 					label={ __( 'SHIPPING ADDRESS', 'woocommerce-payments' ) }
 					help={ __(
-						'We prefilled the shipping address for you, please make sure it’s accurate.',
+						"We prefilled the shipping address for you, please make sure it's accurate.",
 						'woocommerce-payments'
 					) }
+					// eslint-disable-next-line @typescript-eslint/no-empty-function
 					onChange={ () => {} }
 					value={ address }
+					disabled={ readOnly }
 				/>
 			</div>
 		</section>
diff --git a/client/disputes/new-evidence/style.scss b/client/disputes/new-evidence/style.scss
index 1faaee23eff..aaece1e2dae 100644
--- a/client/disputes/new-evidence/style.scss
+++ b/client/disputes/new-evidence/style.scss
@@ -326,11 +326,6 @@
     visibility: visible !important;
   }
   .wcpay-dispute-evidence-cover-letter {
-    display: flex !important;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
     max-width: 700px;
     margin: 0 auto !important;
     background: #fff;
diff --git a/client/disputes/new-evidence/test/cover-letter.test.tsx b/client/disputes/new-evidence/test/cover-letter.test.tsx
new file mode 100644
index 00000000000..5081c48180d
--- /dev/null
+++ b/client/disputes/new-evidence/test/cover-letter.test.tsx
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import CoverLetter from '../cover-letter';
+
+describe( 'CoverLetter', () => {
+	const baseProps = {
+		value: 'Cover letter text',
+		onChange: jest.fn(),
+	};
+
+	it( 'renders textarea and print button', () => {
+		render( <CoverLetter { ...baseProps } /> );
+		expect( screen.getByLabelText( /COVER LETTER/i ) ).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', { name: /View cover letter/i } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'calls onChange when textarea changes', () => {
+		render( <CoverLetter { ...baseProps } /> );
+		fireEvent.change( screen.getByLabelText( /COVER LETTER/i ), {
+			target: { value: 'New text' },
+		} );
+		expect( baseProps.onChange ).toHaveBeenCalledWith( 'New text' );
+	} );
+
+	it( 'renders print-only pre with value', () => {
+		render( <CoverLetter { ...baseProps } /> );
+		const all = screen.getAllByText( 'Cover letter text' );
+		const pre = all.find( ( el ) => el.tagName === 'PRE' );
+		expect( pre ).toBeTruthy();
+	} );
+} );
diff --git a/client/disputes/new-evidence/test/customer-details.test.tsx b/client/disputes/new-evidence/test/customer-details.test.tsx
new file mode 100644
index 00000000000..482d80be057
--- /dev/null
+++ b/client/disputes/new-evidence/test/customer-details.test.tsx
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import CustomerDetails from '../customer-details';
+
+describe( 'CustomerDetails', () => {
+	const baseDispute = {
+		charge: {
+			billing_details: {
+				name: 'John Doe',
+				phone: '123-456-7890',
+				email: 'john@example.com',
+				address: {
+					line1: '123 Main St',
+					line2: '',
+					city: 'City',
+					state: 'ST',
+					postal_code: '12345',
+					country: 'US',
+				},
+			},
+		},
+		order: { ip_address: '1.2.3.4' },
+	};
+
+	it( 'renders all customer fields', () => {
+		render( <CustomerDetails dispute={ baseDispute as any } /> );
+		expect( screen.getByText( 'Customer details' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'John Doe' ) ).toBeInTheDocument();
+		expect( screen.getByText( '123-456-7890' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'john@example.com' ) ).toBeInTheDocument();
+		expect( screen.getByText( '1.2.3.4' ) ).toBeInTheDocument();
+		expect( screen.getByText( /123 Main St/ ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders dashes for missing data', () => {
+		const dispute = { charge: {}, order: {} };
+		render( <CustomerDetails dispute={ dispute as any } /> );
+		expect( screen.getAllByText( '-' ).length ).toBeGreaterThan( 0 );
+	} );
+
+	it( 'renders email as mailto link', () => {
+		render( <CustomerDetails dispute={ baseDispute as any } /> );
+		const emailLink = screen.getByRole( 'link', {
+			name: 'john@example.com',
+		} );
+		expect( emailLink ).toHaveAttribute(
+			'href',
+			'mailto:john@example.com'
+		);
+	} );
+} );
diff --git a/client/disputes/new-evidence/test/file-upload-control.test.tsx b/client/disputes/new-evidence/test/file-upload-control.test.tsx
new file mode 100644
index 00000000000..94f2b69a96e
--- /dev/null
+++ b/client/disputes/new-evidence/test/file-upload-control.test.tsx
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import FileUploadControl from '../file-upload-control';
+
+// Mock FormFileUpload to directly render an input for testing
+jest.mock( 'wcpay/components/wp-components-wrapped', () => {
+	const original = jest.requireActual(
+		'wcpay/components/wp-components-wrapped'
+	);
+	return {
+		...original,
+		FormFileUpload: ( { onChange, render: renderProp }: any ) => (
+			<>
+				<input
+					aria-label="Upload file"
+					type="file"
+					onChange={ onChange }
+					data-testid="mock-upload-input"
+				/>
+				{ /* eslint-disable-next-line @typescript-eslint/no-empty-function */ }
+				{ renderProp( { openFileDialog: () => {} } ) }
+			</>
+		),
+	};
+} );
+
+describe( 'FileUploadControl', () => {
+	const baseProps = {
+		label: 'Order receipt',
+		fileName: '',
+		onFileChange: jest.fn(),
+		onFileRemove: jest.fn(),
+		disabled: false,
+		isDone: false,
+		accept: '.pdf',
+	};
+
+	it( 'renders label and upload button', () => {
+		render( <FileUploadControl { ...baseProps } /> );
+		expect( screen.getByText( 'Order receipt' ) ).toBeInTheDocument();
+		const uploadInputs = screen.getAllByLabelText( /Upload file/i );
+		expect( uploadInputs.length ).toBeGreaterThan( 0 );
+	} );
+
+	it( 'renders file name pill and remove button when uploaded', () => {
+		render(
+			<FileUploadControl
+				{ ...baseProps }
+				fileName="file.pdf"
+				isDone={ true }
+			/>
+		);
+		expect( screen.getByText( 'file.pdf' ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( /Remove file/i ) ).toBeInTheDocument();
+	} );
+
+	it( 'calls onFileChange when file is selected', () => {
+		render( <FileUploadControl { ...baseProps } /> );
+		const fileInput = screen.getByTestId( 'mock-upload-input' );
+		fireEvent.change( fileInput, {
+			target: { files: [ new File( [ '' ], 'test.pdf' ) ] },
+		} );
+		expect( baseProps.onFileChange ).toHaveBeenCalled();
+	} );
+
+	it( 'calls onFileRemove when remove button is clicked', () => {
+		render(
+			<FileUploadControl
+				{ ...baseProps }
+				fileName="file.pdf"
+				isDone={ true }
+			/>
+		);
+		fireEvent.click( screen.getByLabelText( /Remove file/i ) );
+		expect( baseProps.onFileRemove ).toHaveBeenCalled();
+	} );
+} );
diff --git a/client/disputes/new-evidence/test/product-details.test.tsx b/client/disputes/new-evidence/test/product-details.test.tsx
new file mode 100644
index 00000000000..6d0b8bd55ec
--- /dev/null
+++ b/client/disputes/new-evidence/test/product-details.test.tsx
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ProductDetails from '../product-details';
+
+describe( 'ProductDetails', () => {
+	const baseProps = {
+		productType: 'physical_product',
+		onProductTypeChange: jest.fn(),
+		productDescription: 'A great product',
+		onProductDescriptionChange: jest.fn(),
+		readOnly: false,
+	};
+
+	it( 'renders product type selector and description', () => {
+		render( <ProductDetails { ...baseProps } /> );
+		expect( screen.getByLabelText( /PRODUCT TYPE/i ) ).toBeInTheDocument();
+		expect(
+			screen.getByLabelText( /PRODUCT DESCRIPTION/i )
+		).toBeInTheDocument();
+		expect(
+			screen.getByDisplayValue( 'A great product' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'disables fields when readOnly', () => {
+		render( <ProductDetails { ...baseProps } readOnly={ true } /> );
+		expect( screen.getByLabelText( /PRODUCT TYPE/i ) ).toBeDisabled();
+		expect(
+			screen.getByLabelText( /PRODUCT DESCRIPTION/i )
+		).toBeDisabled();
+	} );
+
+	it( 'calls change handlers', () => {
+		render( <ProductDetails { ...baseProps } /> );
+		fireEvent.change( screen.getByLabelText( /PRODUCT DESCRIPTION/i ), {
+			target: { value: 'New desc' },
+		} );
+		expect( baseProps.onProductDescriptionChange ).toHaveBeenCalledWith(
+			'New desc'
+		);
+		fireEvent.change( screen.getByLabelText( /PRODUCT TYPE/i ), {
+			target: { value: 'digital_product_or_service' },
+		} );
+		expect( baseProps.onProductTypeChange ).toHaveBeenCalled();
+	} );
+} );
diff --git a/client/disputes/new-evidence/test/recommended-documents.test.tsx b/client/disputes/new-evidence/test/recommended-documents.test.tsx
new file mode 100644
index 00000000000..8972b40dabe
--- /dev/null
+++ b/client/disputes/new-evidence/test/recommended-documents.test.tsx
@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import RecommendedDocuments from '../recommended-documents';
+
+// Mock FormFileUpload to directly render an input for testing
+jest.mock( 'wcpay/components/wp-components-wrapped', () => {
+	const original = jest.requireActual(
+		'wcpay/components/wp-components-wrapped'
+	);
+	return {
+		...original,
+		FormFileUpload: ( { onChange, render: renderProp }: any ) => (
+			<>
+				<input
+					aria-label="Upload file"
+					type="file"
+					onChange={ onChange }
+					data-testid="mock-upload-input"
+				/>
+				{ /* eslint-disable-next-line @typescript-eslint/no-empty-function */ }
+				{ renderProp( { openFileDialog: () => {} } ) }
+			</>
+		),
+	};
+} );
+
+describe( 'RecommendedDocuments', () => {
+	const fields = [
+		{
+			key: 'doc1',
+			label: 'Order receipt',
+			fileName: '',
+			onFileChange: jest.fn(),
+			onFileRemove: jest.fn(),
+			uploaded: false,
+			readOnly: false,
+		},
+		{
+			key: 'doc2',
+			label: 'Customer communication',
+			fileName: 'file.pdf',
+			onFileChange: jest.fn(),
+			onFileRemove: jest.fn(),
+			uploaded: true,
+			readOnly: false,
+		},
+	];
+
+	it( 'renders all document fields', () => {
+		render( <RecommendedDocuments fields={ fields } /> );
+		expect( screen.getByText( 'Order receipt' ) ).toBeInTheDocument();
+		expect(
+			screen.getByText( 'Customer communication' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'disables controls when readOnly', () => {
+		render( <RecommendedDocuments fields={ fields } readOnly={ true } /> );
+		const buttons = screen.getAllByRole( 'button' );
+		buttons.forEach( ( btn ) => expect( btn ).toBeDisabled() );
+	} );
+
+	it( 'calls upload/remove handlers', () => {
+		render( <RecommendedDocuments fields={ fields } /> );
+		// Simulate file upload for first field
+		const fileInput = screen.getAllByTestId( 'mock-upload-input' )[ 0 ];
+		fireEvent.change( fileInput, {
+			target: { files: [ new File( [ '' ], 'test.pdf' ) ] },
+		} );
+		expect( fields[ 0 ].onFileChange ).toHaveBeenCalled();
+		// Simulate remove for second field
+		const removeButtons = screen.getAllByLabelText( /Remove file/i );
+		fireEvent.click( removeButtons[ 0 ] );
+		expect( fields[ 1 ].onFileRemove ).toHaveBeenCalled();
+	} );
+} );
diff --git a/client/disputes/new-evidence/test/shipping-details.test.tsx b/client/disputes/new-evidence/test/shipping-details.test.tsx
new file mode 100644
index 00000000000..e97c37308a4
--- /dev/null
+++ b/client/disputes/new-evidence/test/shipping-details.test.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ShippingDetails from '../shipping-details';
+
+describe( 'ShippingDetails', () => {
+	const baseDispute = {
+		evidence: {
+			shipping_carrier: 'UPS',
+			shipping_tracking_number: '1Z999',
+			shipping_address: '123 Ship St',
+			shipping_date: new Date( '2023-01-01' ),
+		},
+	};
+
+	beforeAll( () => {
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+	} );
+	afterAll( () => {
+		// eslint-disable-next-line no-console
+		( console.error as jest.Mock ).mockRestore();
+	} );
+
+	it( 'renders all shipping fields', () => {
+		render( <ShippingDetails dispute={ baseDispute } /> );
+		expect(
+			screen.getByLabelText( /SHIPPING CARRIER/i )
+		).toBeInTheDocument();
+		expect( screen.getByLabelText( /SHIPPING DATE/i ) ).toBeInTheDocument();
+		expect(
+			screen.getByLabelText( /TRACKING NUMBER/i )
+		).toBeInTheDocument();
+		expect(
+			screen.getByLabelText( /SHIPPING ADDRESS/i )
+		).toBeInTheDocument();
+		expect( screen.getByDisplayValue( 'UPS' ) ).toBeInTheDocument();
+		expect( screen.getByDisplayValue( '1Z999' ) ).toBeInTheDocument();
+		expect( screen.getByDisplayValue( '123 Ship St' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders dashes for missing data', () => {
+		const dispute = { evidence: {} };
+		render( <ShippingDetails dispute={ dispute } /> );
+		expect( screen.getAllByDisplayValue( '-' ).length ).toBeGreaterThan(
+			0
+		);
+	} );
+
+	it( 'disables inputs when readOnly', () => {
+		render( <ShippingDetails dispute={ baseDispute } readOnly={ true } /> );
+		expect( screen.getByLabelText( /SHIPPING CARRIER/i ) ).toBeDisabled();
+		expect( screen.getByLabelText( /SHIPPING DATE/i ) ).toBeDisabled();
+		expect( screen.getByLabelText( /TRACKING NUMBER/i ) ).toBeDisabled();
+		expect( screen.getByLabelText( /SHIPPING ADDRESS/i ) ).toBeDisabled();
+	} );
+} );

From 95e0f406351eeb6e02db935b106bdb7690068105 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Sat, 31 May 2025 18:45:19 -0300
Subject: [PATCH 15/42] use customer link

---
 client/disputes/new-evidence/customer-details.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/disputes/new-evidence/customer-details.tsx b/client/disputes/new-evidence/customer-details.tsx
index 74b573df063..4af8d603175 100644
--- a/client/disputes/new-evidence/customer-details.tsx
+++ b/client/disputes/new-evidence/customer-details.tsx
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { Dispute } from 'wcpay/types/disputes';
+import CustomerLink from 'wcpay/components/customer-link';
 
 interface CustomerDetailsProps {
 	dispute: Dispute;
@@ -42,12 +43,10 @@ const CustomerDetails: React.FC< CustomerDetailsProps > = ( { dispute } ) => {
 						{ __( 'NAME', 'woocommerce-payments' ) }
 					</div>
 					{ name !== '-' ? (
-						<a
-							href="#"
-							className="wcpay-dispute-evidence-customer-details__link"
-						>
-							{ name }
-						</a>
+						<CustomerLink
+							billing_details={ charge?.billing_details || null }
+							order_details={ charge?.order || null }
+						/>
 					) : (
 						<span>{ name }</span>
 					) }

From 87665b87651772c5749a9f71bc87b1e4a6a1c4a2 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Sat, 31 May 2025 19:00:00 -0300
Subject: [PATCH 16/42] lint

---
 client/disputes/new-evidence/style.scss | 404 ++++++++++++------------
 1 file changed, 206 insertions(+), 198 deletions(-)

diff --git a/client/disputes/new-evidence/style.scss b/client/disputes/new-evidence/style.scss
index aaece1e2dae..1370efbf064 100644
--- a/client/disputes/new-evidence/style.scss
+++ b/client/disputes/new-evidence/style.scss
@@ -1,38 +1,38 @@
 // Define mixins here
 @mixin heading-xl {
-  /* Heading XL */
+	/* Heading XL */
 	font-size: var( --xl, 20px );
 	font-style: normal;
 	font-weight: var( --Medium, 500 );
 	line-height: var( --m, 24px ); /* 120% */
 }
 @mixin heading-md {
-  /* Heading MD */
-  font-size: var(--m, 13px);
-  font-style: normal;
-  font-weight: var(--Medium, 500);
-  line-height: var(--s, 20px); /* 153.846% */
+	/* Heading MD */
+	font-size: var( --m, 13px );
+	font-style: normal;
+	font-weight: var( --Medium, 500 );
+	line-height: var( --s, 20px ); /* 153.846% */
 }
 @mixin heading-s {
-  /* Heading S */
-  font-size: var(--xs, 11px);
-  font-style: normal;
-  font-weight: var(--Medium, 500);
-  line-height: var(--xs, 16px); /* 145.455% */
+	/* Heading S */
+	font-size: var( --xs, 11px );
+	font-style: normal;
+	font-weight: var( --Medium, 500 );
+	line-height: var( --xs, 16px ); /* 145.455% */
 }
 @mixin body-md {
-  /* Body MD */
+	/* Body MD */
 	font-size: var( --m, 13px );
 	font-style: normal;
 	font-weight: var( --Regular, 400 );
 	line-height: var( --s, 20px ); /* 153.846% */
 }
 @mixin body-sm {
-  /* Body SM */
-  font-size: var(--s, 12px);
-  font-style: normal;
-  font-weight: var(--Regular, 400);
-  line-height: var(--xs, 16px); /* 133.333% */ 
+	/* Body SM */
+	font-size: var( --s, 12px );
+	font-style: normal;
+	font-weight: var( --Regular, 400 );
+	line-height: var( --xs, 16px ); /* 133.333% */
 }
 
 // Container for the new-evidence page
@@ -70,7 +70,7 @@
 }
 
 .wcpay-dispute-evidence-new__stepper-title {
-  @include heading-xl;
+	@include heading-xl;
 	color: var( --Scales-Grays-gray-900, $gray-900 );
 	margin-top: 24px;
 	margin-bottom: 12px;
@@ -78,7 +78,7 @@
 
 .wcpay-dispute-evidence-new__stepper-subheading {
 	color: var( --Scales-Grays-gray-700, $gray-700 );
-  @include body-md;
+	@include body-md;
 }
 
 .wcpay-dispute-evidence-new__button-row {
@@ -105,14 +105,14 @@
 	margin-bottom: 40px;
 
 	&__heading {
-    @include heading-md;
-    color: var(--Scales-Grays-gray-900, $gray-900);
-    margin-bottom: 16px;
+		@include heading-md;
+		color: var( --Scales-Grays-gray-900, $gray-900 );
+		margin-bottom: 16px;
 	}
 
 	&__row {
 		display: flex;
-    align-items: flex-start;
+		align-items: flex-start;
 		gap: 32px;
 		margin-bottom: 24px;
 	}
@@ -121,28 +121,28 @@
 		flex: 0 0 auto;
 		min-width: 70px;
 
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    align-self: stretch;
-
-    & > span {
-      color: var( --Scales-Grays-gray-700, $gray-700 );
-      @include body-md;
-    }
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+		align-self: stretch;
+
+		& > span {
+			color: var( --Scales-Grays-gray-700, $gray-700 );
+			@include body-md;
+		}
 	}
 
 	&__label,
 	&__billing-label {
-    color: var(--Scales-Grays-gray-900, $gray-900);
-    text-transform: uppercase;
-    @include heading-s;
+		color: var( --Scales-Grays-gray-900, $gray-900 );
+		text-transform: uppercase;
+		@include heading-s;
 	}
 
 	&__link {
 		color: var( --wp-admin-theme-color );
-    @include body-sm; 
+		@include body-sm;
 		text-decoration: underline;
 		word-break: break-all;
 	}
@@ -150,20 +150,20 @@
 	&__billing {
 		margin-top: 8px;
 
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    align-self: stretch; 
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+		align-self: stretch;
 	}
 
 	&__billing-value {
-		color: var(--Scales-Grays-gray-900, $gray-700);
+		color: var( --Scales-Grays-gray-900, $gray-700 );
 		@include body-sm;
 		word-break: break-word;
 	}
 
-	@media (max-width: 700px) {
+	@media ( max-width: 700px ) {
 		&__row {
 			flex-direction: column;
 			gap: 8px;
@@ -176,179 +176,187 @@
 
 // Product details section
 .wcpay-dispute-evidence-product-details {
-  margin-bottom: 40px;
+	margin-bottom: 40px;
 
 	&__heading {
-    @include heading-md;
-    color: var(--Scales-Grays-gray-900, $gray-900);
-    margin-bottom: 16px;
-	} 
-
-  &__field-group {
-    margin-bottom: 24px;
-  }
+		@include heading-md;
+		color: var( --Scales-Grays-gray-900, $gray-900 );
+		margin-bottom: 16px;
+	}
+
+	&__field-group {
+		margin-bottom: 24px;
+	}
 }
 
 .wcpay-dispute-evidence-shipping-details {
-  margin-bottom: 40px;
+	margin-bottom: 40px;
 
-  &__heading {
-    @include heading-md;
-    color: var(--Scales-Grays-gray-900, $gray-900);
-    margin-bottom: 16px;
-  }
+	&__heading {
+		@include heading-md;
+		color: var( --Scales-Grays-gray-900, $gray-900 );
+		margin-bottom: 16px;
+	}
 
-  &__field-group {
-    margin-bottom: 24px;
-  }
+	&__field-group {
+		margin-bottom: 24px;
+	}
 }
-  
+
 .wcpay-dispute-evidence-recommended-documents {
-  margin-bottom: 40px;
+	margin-bottom: 40px;
 
 	&__heading {
-    @include heading-md;
-    color: var(--Scales-Grays-gray-900, $gray-900);
-    margin-bottom: 16px;
+		@include heading-md;
+		color: var( --Scales-Grays-gray-900, $gray-900 );
+		margin-bottom: 16px;
 	}
 
-  &__subheading {
-    color: var(--Scales-Grays-gray-700, $gray-700);
-    @include body-md;
-  }
+	&__subheading {
+		color: var( --Scales-Grays-gray-700, $gray-700 );
+		@include body-md;
+	}
 }
 
 .wcpay-dispute-evidence-file-upload-control {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-bottom: 16px;
-
-  &__label {
-    flex: 1 0 220px;
-    color: var(--Scales-Grays-gray-900, $gray-900);
-    @include body-md;
-    margin-right: 16px;
-    text-align: left;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  &__upload .components-button {
-    background: var(--wp-admin-theme-color);
-    color: #fff;
-    border-radius: 8px;
-    min-width: 48px;
-    min-height: 48px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: none;
-    border: none;
-    transition: background 0.2s;
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--wp-admin-theme-color) 10%, transparent);
-    }
-    &:disabled {
-      background: #e0e6f7;
-      color: #b3b3b3;
-      cursor: not-allowed;
-    }
-  }
-
-  &__filename {
-    max-width: 320px;
-    min-width: 120px;
-    background: color-mix(in srgb, var(--wp-admin-theme-color) 10%, transparent);
-    border-radius: 24px;
-    padding: 0 12px 0 12px;
-    font-size: 14px;
-    line-height: 32px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: relative;
-  }
-
-  &__filename-text {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--wp-admin-theme-color);
-  }
-
-  &__remove .components-button {
-    border: none;
-    min-width: 24px;
-    min-height: 24px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--wp-admin-theme-color);
-    background: transparent;
-    svg {
-      color: inherit;
-      fill: currentColor;
-    }
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, #fff 10%, transparent);
-      color: var(--wp-admin-theme-color);
-    }
-    &:disabled {
-      color: #b3b3b3;
-      cursor: not-allowed;
-    }
-  }
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 12px;
+	margin-bottom: 16px;
+
+	&__label {
+		flex: 1 0 220px;
+		color: var( --Scales-Grays-gray-900, $gray-900 );
+		@include body-md;
+		margin-right: 16px;
+		text-align: left;
+	}
+
+	&__actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__upload .components-button {
+		background: var( --wp-admin-theme-color );
+		color: #fff;
+		border-radius: 8px;
+		min-width: 48px;
+		min-height: 48px;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: none;
+		border: none;
+		transition: background 0.2s;
+		&:hover:not( :disabled ) {
+			background: color-mix(
+				in srgb,
+				var( --wp-admin-theme-color ) 10%,
+				transparent
+			);
+		}
+		&:disabled {
+			background: #e0e6f7;
+			color: #b3b3b3;
+			cursor: not-allowed;
+		}
+	}
+
+	&__filename {
+		max-width: 320px;
+		min-width: 120px;
+		background: color-mix(
+			in srgb,
+			var( --wp-admin-theme-color ) 10%,
+			transparent
+		);
+		border-radius: 24px;
+		padding: 0 12px 0 12px;
+		font-size: 14px;
+		line-height: 32px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		position: relative;
+	}
+
+	&__filename-text {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var( --wp-admin-theme-color );
+	}
+
+	&__remove .components-button {
+		border: none;
+		min-width: 24px;
+		min-height: 24px;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var( --wp-admin-theme-color );
+		background: transparent;
+		svg {
+			color: inherit;
+			fill: currentColor;
+		}
+		&:hover:not( :disabled ) {
+			background: color-mix( in srgb, #fff 10%, transparent );
+			color: var( --wp-admin-theme-color );
+		}
+		&:disabled {
+			color: #b3b3b3;
+			cursor: not-allowed;
+		}
+	}
 }
 
 .wcpay-dispute-evidence-cover-letter__printonly {
-  display: none;
+	display: none;
 }
 
 @media print {
-  body * {
-    visibility: hidden !important;
-  }
-  .wcpay-dispute-evidence-cover-letter,
-  .wcpay-dispute-evidence-cover-letter * {
-    visibility: visible !important;
-  }
-  .wcpay-dispute-evidence-cover-letter {
-    max-width: 700px;
-    margin: 0 auto !important;
-    background: #fff;
-    z-index: 9999;
-    padding: 40px;
-    box-sizing: border-box;
-    page-break-inside: avoid;
-  }
-  .wcpay-dispute-evidence-cover-letter__print,
-  .wcpay-dispute-evidence-cover-letter__textarea {
-    display: none !important;
-  }
-  .wcpay-dispute-evidence-cover-letter__printonly {
-    display: block !important;
-    white-space: pre-wrap;
-    font-family: inherit;
-    font-size: 16px;
-    color: #000;
-    background: #fff;
-    border: none;
-    margin: 0;
-    padding: 0;
-    text-align: left;
-    width: 100%;
-  }
-}
\ No newline at end of file
+	body * {
+		visibility: hidden !important;
+	}
+	.wcpay-dispute-evidence-cover-letter,
+	.wcpay-dispute-evidence-cover-letter * {
+		visibility: visible !important;
+	}
+	.wcpay-dispute-evidence-cover-letter {
+		max-width: 700px;
+		margin: 0 auto !important;
+		background: #fff;
+		z-index: 9999;
+		padding: 40px;
+		box-sizing: border-box;
+		page-break-inside: avoid;
+	}
+	.wcpay-dispute-evidence-cover-letter__print,
+	.wcpay-dispute-evidence-cover-letter__textarea {
+		display: none !important;
+	}
+	.wcpay-dispute-evidence-cover-letter__printonly {
+		display: block !important;
+		white-space: pre-wrap;
+		font-family: inherit;
+		font-size: 16px;
+		color: #000;
+		background: #fff;
+		border: none;
+		margin: 0;
+		padding: 0;
+		text-align: left;
+		width: 100%;
+	}
+}

From a4752384d9c95eed8f2a36554728f3d99a369f8c Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Sat, 31 May 2025 19:04:03 -0300
Subject: [PATCH 17/42] changelog

---
 changelog/add-components-for-the-new-evidence-screen | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 changelog/add-components-for-the-new-evidence-screen

diff --git a/changelog/add-components-for-the-new-evidence-screen b/changelog/add-components-for-the-new-evidence-screen
new file mode 100644
index 00000000000..ef251729d72
--- /dev/null
+++ b/changelog/add-components-for-the-new-evidence-screen
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Add the components that will be used on the evidence form

From 2b168c753cc98d8668ddc350c6c11797f93045eb Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Mon, 2 Jun 2025 18:18:56 -0300
Subject: [PATCH 18/42] save for later

---
 client/disputes/new-evidence/index.tsx        | 223 +++++++++++++++---
 .../disputes/new-evidence/product-details.tsx |  20 +-
 .../new-evidence/shipping-details.tsx         |  57 +++--
 3 files changed, 246 insertions(+), 54 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index ef8931aec1a..bae59da422b 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -93,9 +93,20 @@ export default ( { query }: { query: { id: string } } ) => {
 	const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
 	const [ productDescription, setProductDescription ] = useState( '' );
 	const [ coverLetter, setCoverLetter ] = useState( '' );
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		'core/notices'
+	const [ isUploading, setIsUploading ] = useState<
+		Record< string, boolean >
+	>( {} );
+	const [ uploadingErrors, setUploadingErrors ] = useState<
+		Record< string, string >
+	>( {} );
+	const [ fileSizes, setFileSizes ] = useState< Record< string, number > >(
+		{}
 	);
+	const {
+		createSuccessNotice,
+		createErrorNotice,
+		createInfoNotice,
+	} = useDispatch( 'core/notices' );
 
 	// --- Data loading ---
 	useEffect( () => {
@@ -104,7 +115,27 @@ export default ( { query }: { query: { id: string } } ) => {
 				const d: any = await apiFetch( { path } );
 				setDispute( d );
 				// fallback to multiple if no product type is set
-				setProductType( d.metadata?.__product_type || 'multiple' );
+				setProductType( d.metadata?.__product_type || '' );
+				// Load saved product description from evidence
+				setProductDescription( d.evidence?.product_description || '' );
+				// Load saved file IDs from evidence
+				setEvidence( ( prev: any ) => ( {
+					...prev,
+					receipt: d.evidence?.receipt || '',
+					customer_communication:
+						d.evidence?.customer_communication || '',
+					customer_signature: d.evidence?.customer_signature || '',
+					refund_policy: d.evidence?.refund_policy || '',
+					duplicate_charge_documentation:
+						d.evidence?.duplicate_charge_documentation || '',
+					shipping_documentation:
+						d.evidence?.shipping_documentation || '',
+					service_documentation:
+						d.evidence?.service_documentation || '',
+					cancellation_policy: d.evidence?.cancellation_policy || '',
+					access_activity_log: d.evidence?.access_activity_log || '',
+					uncategorized_file: d.evidence?.uncategorized_file || '',
+				} ) );
 
 				// Generate default cover letter
 				const merchantName = d?.merchant_name || 'Sellthosejeans';
@@ -182,30 +213,100 @@ ${ merchantName }`;
 		setProductType( newType );
 	};
 
+	const updateProductDescription = ( value: string ) => {
+		setProductDescription( value );
+		setEvidence( ( prev: any ) => ( {
+			...prev,
+			product_description: value,
+		} ) );
+	};
+
 	// --- File upload logic ---
+	const isUploadingEvidence = () =>
+		Object.values( isUploading ).some( Boolean );
+
+	const fileSizeExceeded = ( latestFileSize: number ) => {
+		const fileSizeLimitInBytes = 4500000;
+		const totalFileSize =
+			Object.values( fileSizes ).reduce(
+				( acc, fileSize ) => acc + fileSize,
+				0
+			) + latestFileSize;
+		if ( fileSizeLimitInBytes < totalFileSize ) {
+			createInfoNotice(
+				__(
+					"The files you've attached to this dispute as evidence will exceed the limit for a " +
+						"dispute's total size. Try using smaller files as evidence. Hint: if you've attached " +
+						'images, you might want to try providing them in lower resolutions.',
+					'woocommerce-payments'
+				)
+			);
+			return true;
+		}
+		return false;
+	};
+
 	const doUploadFile = async ( key: string, file: File ) => {
 		if ( ! file ) return;
-		// TODO: Add file size checks, error handling, etc.
+
+		if ( fileSizeExceeded( file.size ) ) {
+			return;
+		}
+
+		recordEvent( 'wcpay_dispute_file_upload_started', {
+			type: key,
+		} );
+
+		const body = new FormData();
+		body.append( 'file', file );
+		body.append( 'purpose', 'dispute_evidence' );
+
+		// Set request status for UI.
+		setIsUploading( ( prev ) => ( { ...prev, [ key ]: true } ) );
+		setUploadingErrors( ( prev ) => ( { ...prev, [ key ]: '' } ) );
+
+		// Force reload evidence components.
+		setEvidence( ( e: any ) => ( { ...e, [ key ]: '' } ) );
+
 		try {
-			const body = new FormData();
-			body.append( 'file', file );
-			body.append( 'purpose', 'dispute_evidence' );
 			const uploadedFile: any = await apiFetch( {
 				path: '/wc/v3/payments/file',
 				method: 'post',
 				body,
 			} );
+
+			// Store uploaded file name in metadata to display in submitted evidence or saved for later form.
 			setEvidence( ( e: any ) => ( { ...e, [ key ]: uploadedFile.id } ) );
+			setFileSizes( ( prev ) => ( {
+				...prev,
+				[ key ]: uploadedFile.size,
+			} ) );
+
+			recordEvent( 'wcpay_dispute_file_upload_success', {
+				type: key,
+			} );
 		} catch ( err ) {
-			if ( err instanceof Error ) {
-				createErrorNotice( err.message );
-			} else {
-				createErrorNotice( String( err ) );
-			}
+			recordEvent( 'wcpay_dispute_file_upload_failed', {
+				message: err instanceof Error ? err.message : String( err ),
+			} );
+
+			setUploadingErrors( ( prev ) => ( {
+				...prev,
+				[ key ]: err instanceof Error ? err.message : String( err ),
+			} ) );
+
+			// Force reload evidence components.
+			setEvidence( ( e: any ) => ( { ...e, [ key ]: '' } ) );
+		} finally {
+			setIsUploading( ( prev ) => ( { ...prev, [ key ]: false } ) );
 		}
 	};
-	const doRemoveFile = ( key: string ) =>
+
+	const doRemoveFile = ( key: string ) => {
 		setEvidence( ( e: any ) => ( { ...e, [ key ]: '' } ) );
+		setFileSizes( ( prev ) => ( { ...prev, [ key ]: 0 } ) );
+		setUploadingErrors( ( prev ) => ( { ...prev, [ key ]: '' } ) );
+	};
 
 	// --- Navigation warning ---
 	const pristine = useMemo(
@@ -227,28 +328,76 @@ ${ merchantName }`;
 
 	// --- Save/submit logic ---
 	const doSave = async ( submit: boolean ) => {
+		// Prevent submit if upload is in progress
+		if ( isUploadingEvidence() ) {
+			createInfoNotice(
+				__(
+					'Please wait until file upload is finished',
+					'woocommerce-payments'
+				)
+			);
+			return;
+		}
+
 		try {
-			await apiFetch( {
-				path,
-				method: 'post',
-				data: {
-					evidence: { ...dispute.evidence, ...evidence },
-					metadata: dispute.metadata,
-					submit,
-				},
-			} );
+			recordEvent(
+				submit
+					? 'wcpay_dispute_submit_evidence_clicked'
+					: 'wcpay_dispute_save_evidence_clicked'
+			);
+
+			recordEvent(
+				submit
+					? 'wcpay_dispute_submit_evidence_success'
+					: 'wcpay_dispute_save_evidence_success'
+			);
+
 			createSuccessNotice(
 				submit
 					? __( 'Evidence submitted!', 'woocommerce-payments' )
-					: __( 'Evidence saved!', 'woocommerce-payments' )
+					: __( 'Evidence saved!', 'woocommerce-payments' ),
+				{
+					actions: [
+						{
+							label: submit
+								? __(
+										'View submitted evidence',
+										'woocommerce-payments'
+								  )
+								: __(
+										'Return to evidence submission',
+										'woocommerce-payments'
+								  ),
+							url: getAdminUrl( {
+								page: 'wc-admin',
+								path: '/payments/disputes/challenge',
+								id: query.id,
+							} ),
+						},
+					],
+				}
 			);
+
 			setRedirectAfterSave( true );
 		} catch ( err ) {
-			if ( err instanceof Error ) {
-				createErrorNotice( err.message );
-			} else {
-				createErrorNotice( String( err ) );
-			}
+			recordEvent(
+				submit
+					? 'wcpay_dispute_submit_evidence_failed'
+					: 'wcpay_dispute_save_evidence_failed'
+			);
+
+			const message = submit
+				? __(
+						'Failed to submit evidence. (%s)',
+						'woocommerce-payments'
+				  )
+				: __( 'Failed to save evidence. (%s)', 'woocommerce-payments' );
+			createErrorNotice(
+				sprintf(
+					message,
+					err instanceof Error ? err.message : String( err )
+				)
+			);
 		}
 	};
 
@@ -330,7 +479,7 @@ ${ merchantName }`;
 	// --- Recommended documents ---
 	const recommendedDocumentFields = [
 		{
-			key: 'order_receipt',
+			key: 'receipt',
 			label: __( 'Order receipt', 'woocommerce-payments' ),
 		},
 		{
@@ -349,7 +498,7 @@ ${ merchantName }`;
 			),
 		},
 		{
-			key: 'additional_documents',
+			key: 'uncategorized_file',
 			label: __(
 				'Any additional documents you think will support the case',
 				'woocommerce-payments'
@@ -360,7 +509,7 @@ ${ merchantName }`;
 	// --- Recommended shipping documents ---
 	const recommendedShippingDocumentFields = [
 		{
-			key: 'shipping_receipt',
+			key: 'shipping_documentation',
 			label: __( 'Proof of shipping', 'woocommerce-payments' ),
 		},
 	];
@@ -371,6 +520,8 @@ ${ merchantName }`;
 			label: field.label,
 			fileName: evidence[ field.key ] || '',
 			uploaded: !! evidence[ field.key ],
+			isLoading: isUploading[ field.key ] || false,
+			error: uploadingErrors[ field.key ] || '',
 			onFileChange: ( key: string, file: File ) =>
 				Promise.resolve( doUploadFile( field.key, file ) ),
 			onFileRemove: () => Promise.resolve( doRemoveFile( field.key ) ),
@@ -383,6 +534,8 @@ ${ merchantName }`;
 			label: field.label,
 			fileName: evidence[ field.key ] || '',
 			uploaded: !! evidence[ field.key ],
+			isLoading: isUploading[ field.key ] || false,
+			error: uploadingErrors[ field.key ] || '',
 			onFileChange: ( key: string, file: File ) =>
 				Promise.resolve( doUploadFile( field.key, file ) ),
 			onFileRemove: () => Promise.resolve( doRemoveFile( field.key ) ),
@@ -435,7 +588,7 @@ ${ merchantName }`;
 						productType={ productType }
 						onProductTypeChange={ updateProductType }
 						productDescription={ productDescription }
-						onProductDescriptionChange={ setProductDescription }
+						onProductDescriptionChange={ updateProductDescription }
 						readOnly={ readOnly }
 					/>
 					<RecommendedDocuments
@@ -457,6 +610,12 @@ ${ merchantName }`;
 					<ShippingDetails
 						dispute={ dispute }
 						readOnly={ readOnly }
+						onShippingDetailsChange={ ( newEvidence ) =>
+							setEvidence( ( prev: any ) => ( {
+								...prev,
+								...newEvidence,
+							} ) )
+						}
 					/>
 					<RecommendedDocuments
 						fields={ recommendedShippingDocumentsFields }
diff --git a/client/disputes/new-evidence/product-details.tsx b/client/disputes/new-evidence/product-details.tsx
index 1b3af2735c9..c92816a889b 100644
--- a/client/disputes/new-evidence/product-details.tsx
+++ b/client/disputes/new-evidence/product-details.tsx
@@ -27,6 +27,20 @@ const ProductDetails: React.FC< ProductDetailsProps > = ( {
 	onProductDescriptionChange,
 	readOnly = false,
 } ) => {
+	const [
+		localProductDescription,
+		setLocalProductDescription,
+	] = React.useState( productDescription );
+
+	React.useEffect( () => {
+		setLocalProductDescription( productDescription );
+	}, [ productDescription ] );
+
+	const handleProductDescriptionChange = ( value: string ) => {
+		setLocalProductDescription( value );
+		onProductDescriptionChange( value );
+	};
+
 	return (
 		<section className="wcpay-dispute-evidence-product-details">
 			<h3 className="wcpay-dispute-evidence-product-details__heading">
@@ -84,10 +98,8 @@ const ProductDetails: React.FC< ProductDetailsProps > = ( {
 						'Please make sure this is an accurate description of the product.',
 						'woocommerce-payments'
 					) }
-					value={ productDescription }
-					onChange={ ( value ) =>
-						onProductDescriptionChange( value )
-					}
+					value={ localProductDescription }
+					onChange={ handleProductDescriptionChange }
 					disabled={ readOnly }
 				/>
 			</div>
diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index d3de8b7176c..6703e7f96d3 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -12,19 +12,30 @@ import { TextControl } from 'wcpay/components/wp-components-wrapped';
 interface ShippingDetailsProps {
 	dispute: any;
 	readOnly?: boolean;
+	onShippingDetailsChange?: ( evidence: any ) => void;
 }
 
 const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 	dispute,
 	readOnly = false,
+	onShippingDetailsChange,
 } ) => {
+	const [ localEvidence, setLocalEvidence ] = React.useState(
+		dispute.evidence || {}
+	);
+
+	React.useEffect( () => {
+		setLocalEvidence( dispute.evidence || {} );
+	}, [ dispute ] );
+
 	if ( ! dispute ) return null;
-	// These would typically come from dispute.evidence or dispute.order
-	const evidence = dispute.evidence || {};
-	const carrier = evidence.shipping_carrier || '-';
-	const tracking = evidence.shipping_tracking_number || '-';
-	const address = evidence.shipping_address || '-';
-	const date = evidence.shipping_date || new Date();
+
+	const handleChange = ( key: string, value: string ) => {
+		setLocalEvidence( ( prev: any ) => ( { ...prev, [ key ]: value } ) );
+		if ( onShippingDetailsChange ) {
+			onShippingDetailsChange( { ...localEvidence, [ key ]: value } );
+		}
+	};
 
 	return (
 		<section className="wcpay-dispute-evidence-shipping-details">
@@ -34,18 +45,26 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 			<div className="wcpay-dispute-evidence-shipping-details__field-group">
 				<TextControl
 					label={ __( 'SHIPPING CARRIER', 'woocommerce-payments' ) }
-					// eslint-disable-next-line @typescript-eslint/no-empty-function
-					onChange={ () => {} }
-					value={ carrier }
+					onChange={ ( value ) =>
+						handleChange( 'shipping_carrier', value )
+					}
+					value={ localEvidence.shipping_carrier || '-' }
 					disabled={ readOnly }
 				/>
 			</div>
 			<div className="wcpay-dispute-evidence-shipping-details__field-group">
 				<TextControl
 					label={ __( 'SHIPPING DATE', 'woocommerce-payments' ) }
-					// eslint-disable-next-line @typescript-eslint/no-empty-function
-					onChange={ () => {} }
-					value={ date.toLocaleDateString() }
+					onChange={ ( value ) =>
+						handleChange( 'shipping_date', value )
+					}
+					value={
+						localEvidence.shipping_date
+							? new Date(
+									localEvidence.shipping_date
+							  ).toLocaleDateString()
+							: new Date().toLocaleDateString()
+					}
 					disabled={ readOnly }
 				/>
 			</div>
@@ -56,9 +75,10 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 						'Please make sure the tracking number is accurate.',
 						'woocommerce-payments'
 					) }
-					// eslint-disable-next-line @typescript-eslint/no-empty-function
-					onChange={ () => {} }
-					value={ tracking }
+					onChange={ ( value ) =>
+						handleChange( 'shipping_tracking_number', value )
+					}
+					value={ localEvidence.shipping_tracking_number || '-' }
 					disabled={ readOnly }
 				/>
 			</div>
@@ -69,9 +89,10 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 						"We prefilled the shipping address for you, please make sure it's accurate.",
 						'woocommerce-payments'
 					) }
-					// eslint-disable-next-line @typescript-eslint/no-empty-function
-					onChange={ () => {} }
-					value={ address }
+					onChange={ ( value ) =>
+						handleChange( 'shipping_address', value )
+					}
+					value={ localEvidence.shipping_address || '-' }
 					disabled={ readOnly }
 				/>
 			</div>

From 711a368d99908d8f99576f6a5e671a0ce6bbd5b0 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Mon, 2 Jun 2025 19:22:40 -0300
Subject: [PATCH 19/42] fix remove file

---
 client/disputes/new-evidence/index.tsx | 30 +++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index bae59da422b..e658d8f1298 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -304,8 +304,8 @@ ${ merchantName }`;
 
 	const doRemoveFile = ( key: string ) => {
 		setEvidence( ( e: any ) => ( { ...e, [ key ]: '' } ) );
-		setFileSizes( ( prev ) => ( { ...prev, [ key ]: 0 } ) );
 		setUploadingErrors( ( prev ) => ( { ...prev, [ key ]: '' } ) );
+		setFileSizes( ( prev ) => ( { ...prev, [ key ]: 0 } ) );
 	};
 
 	// --- Navigation warning ---
@@ -378,6 +378,34 @@ ${ merchantName }`;
 				}
 			);
 
+			// Only include file keys in the evidence object if they have a non-empty value
+			const evidenceToSend = Object.fromEntries(
+				Object.entries( {
+					...dispute.evidence,
+					product_description: productDescription,
+					receipt: evidence.receipt,
+					customer_communication: evidence.customer_communication,
+					customer_signature: evidence.customer_signature,
+					refund_policy: evidence.refund_policy,
+					duplicate_charge_documentation:
+						evidence.duplicate_charge_documentation,
+					shipping_documentation: evidence.shipping_documentation,
+					service_documentation: evidence.service_documentation,
+					cancellation_policy: evidence.cancellation_policy,
+					access_activity_log: evidence.access_activity_log,
+					uncategorized_file: evidence.uncategorized_file,
+				} ).filter( ( [ value ] ) => value && value !== '' )
+			);
+
+			await apiFetch( {
+				path,
+				method: 'post',
+				data: {
+					evidence: evidenceToSend,
+					metadata: dispute.metadata,
+					submit,
+				},
+			} );
 			setRedirectAfterSave( true );
 		} catch ( err ) {
 			recordEvent(

From 3bf00553804118d2bc4c5db131f259418b026c35 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Mon, 2 Jun 2025 19:32:18 -0300
Subject: [PATCH 20/42] fix save product type

---
 client/disputes/new-evidence/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index e658d8f1298..40cc6e29e6f 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -397,12 +397,18 @@ ${ merchantName }`;
 				} ).filter( ( [ value ] ) => value && value !== '' )
 			);
 
+			// Update metadata with the current productType
+			const updatedMetadata = {
+				...dispute.metadata,
+				__product_type: productType,
+			};
+
 			await apiFetch( {
 				path,
 				method: 'post',
 				data: {
 					evidence: evidenceToSend,
-					metadata: dispute.metadata,
+					metadata: updatedMetadata,
 					submit,
 				},
 			} );

From 652ac5f810d7484442237270362773b7042ee334 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Tue, 3 Jun 2025 15:14:10 -0300
Subject: [PATCH 21/42] fix test

---
 client/disputes/new-evidence/cover-letter.tsx | 273 +++++++++++++++++-
 client/disputes/new-evidence/index.tsx        |   1 +
 .../new-evidence/test/cover-letter.test.tsx   | 112 ++++++-
 3 files changed, 369 insertions(+), 17 deletions(-)

diff --git a/client/disputes/new-evidence/cover-letter.tsx b/client/disputes/new-evidence/cover-letter.tsx
index 962281f240f..19ba101029b 100644
--- a/client/disputes/new-evidence/cover-letter.tsx
+++ b/client/disputes/new-evidence/cover-letter.tsx
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import React from 'react';
-import { __ } from '@wordpress/i18n';
+import React, { useEffect } from 'react';
+import { __, sprintf } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
 
 /**
@@ -13,13 +13,269 @@ import {
 	Button,
 	Icon,
 } from 'wcpay/components/wp-components-wrapped';
+import { Dispute } from 'wcpay/types/disputes';
+import { Charge } from 'wcpay/types/charges';
+import { formatDateTimeFromTimestamp } from 'wcpay/utils/date-time';
+import PAYMENT_METHOD_IDS from 'wcpay/constants/payment-method';
+
+interface ExtendedDispute extends Omit< Dispute, 'evidence' | 'charge' > {
+	merchant_name?: string;
+	merchant_address?: string;
+	merchant_email?: string;
+	merchant_phone?: string;
+	evidence: {
+		[ key: string ]:
+			| string
+			| Record< string, boolean >
+			| Record< string, string >;
+	};
+	charge: Charge;
+}
 
 interface CoverLetterProps {
 	value: string;
 	onChange: ( value: string ) => void;
+	dispute: ExtendedDispute;
 }
 
-const CoverLetter: React.FC< CoverLetterProps > = ( { value, onChange } ) => {
+const CoverLetter: React.FC< CoverLetterProps > = ( {
+	value,
+	onChange,
+	dispute,
+} ) => {
+	useEffect( () => {
+		if ( ! dispute ) return;
+
+		const generateCoverLetter = () => {
+			const merchantName = dispute?.merchant_name || 'Your Business Name';
+			const merchantAddress = dispute?.merchant_address || 'Your Address';
+			const merchantEmail = dispute?.merchant_email || 'your@email.com';
+			const merchantPhone =
+				dispute?.merchant_phone || 'Your Phone Number';
+			const today = new Date().toLocaleDateString( undefined, {
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+			} );
+			const acquiringBank =
+				dispute?.charge?.payment_method_details?.type ===
+				PAYMENT_METHOD_IDS.CARD
+					? dispute?.charge?.payment_method_details?.card?.network ||
+					  'Acquiring Bank'
+					: 'Acquiring Bank';
+			const caseNumber = dispute?.id || 'Case Number';
+			const transactionId = dispute?.charge?.id || 'Transaction ID';
+			const transactionDate = dispute?.created
+				? formatDateTimeFromTimestamp( dispute.created, {
+						separator: ', ',
+						includeTime: true,
+				  } )
+				: 'Transaction Date';
+			const customerName =
+				dispute?.charge?.billing_details?.name || 'Customer Name';
+			const product = dispute?.evidence?.product_description || 'Product';
+			const orderDate = dispute?.charge?.created
+				? formatDateTimeFromTimestamp( dispute.charge.created, {
+						separator: ', ',
+						includeTime: true,
+				  } )
+				: 'Order Date';
+
+			// Generate list of attachments based on provided evidence
+			const attachments = [];
+			let attachmentCount = 0;
+
+			if ( dispute.evidence?.receipt ) {
+				attachmentCount++;
+				attachments.push(
+					`• Order receipt (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+			if ( dispute.evidence?.customer_communication ) {
+				attachmentCount++;
+				attachments.push(
+					`• Customer communication (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+			if ( dispute.evidence?.customer_signature ) {
+				attachmentCount++;
+				attachments.push(
+					`• Customer signature (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+			if ( dispute.evidence?.refund_policy ) {
+				attachmentCount++;
+				attachments.push(
+					`• Store refund policy (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+			if ( dispute.evidence?.shipping_documentation ) {
+				attachmentCount++;
+				attachments.push(
+					`• Proof of shipping (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+			if ( dispute.evidence?.service_documentation ) {
+				attachmentCount++;
+				attachments.push(
+					`• Service documentation (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+			if ( dispute.evidence?.cancellation_policy ) {
+				attachmentCount++;
+				attachments.push(
+					`• Cancellation policy (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+			if ( dispute.evidence?.access_activity_log ) {
+				attachmentCount++;
+				attachments.push(
+					`• Access activity log (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+			if ( dispute.evidence?.uncategorized_file ) {
+				attachmentCount++;
+				attachments.push(
+					`• Additional documentation (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
+
+			// If no attachments were provided, use default list
+			const attachmentsList =
+				attachments.length > 0
+					? attachments.join( '\n' )
+					: `• AVS/CVV Match: Billing address and security code matched (Attachment A)
+• IP/Device Data: Location and device info used at purchase (Attachment B)
+• Customer Confirmation: Email or chat confirming purchase (Attachment C)
+• Usage Data: Login records for the digital goods (Attachment D)`;
+
+			return `${ merchantName }
+${ merchantAddress }
+${ merchantEmail }
+${ merchantPhone }
+${ today }
+
+To: ${ acquiringBank }
+Subject: Chargeback Dispute – Case # ${ caseNumber }
+
+Dear Dispute Resolution Team,
+
+We are submitting evidence in response to chargeback #${ caseNumber } for transaction #${ transactionId } on ${ transactionDate }.
+
+Our records indicate that the customer and legitimate cardholder, ${ customerName }, ordered ${ product } on ${ orderDate }.
+
+To support our case, we are providing the following documentation:
+${ attachmentsList }
+
+Based on this information, we respectfully request that the chargeback be reversed. Please let me know if any further details are required.
+
+Thank you,
+${ merchantName }`;
+		};
+
+		onChange( generateCoverLetter() );
+	}, [ dispute, onChange ] );
+
+	const handleViewCoverLetter = () => {
+		const htmlContent = `
+			<!DOCTYPE html>
+			<html>
+			<head>
+				<title>${ __( 'Cover Letter', 'woocommerce-payments' ) }</title>
+				<style>
+					body {
+						font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+						line-height: 1.6;
+						max-width: 120ch;
+						margin: 40px auto;
+						padding: 20px;
+						text-align: justify;
+					}
+					pre {
+						white-space: pre-wrap;
+						word-wrap: break-word;
+						word-break: break-word;
+						overflow-wrap: break-word;
+						max-width: 100%;
+					}
+					@media print {
+						body {
+							margin: 0;
+							padding: 20px;
+							font-size: 12px;
+						}
+						pre {
+							font-size: 12px;
+						}
+						.no-print {
+							display: none;
+						}
+					}
+					.print-button-container {
+						position: fixed;
+						bottom: 20px;
+						left: 50%;
+						transform: translateX(-50%);
+						background: white;
+						padding: 10px;
+						border-radius: 4px;
+						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+					}
+					@media print {
+						.print-button-container {
+							display: none;
+						}
+					}
+				</style>
+			</head>
+			<body>
+				<pre>${ value }</pre>
+				<div class="print-button-container no-print">
+					<button onclick="window.print()" style="
+						padding: 8px 16px;
+						background: #3B5AFB;
+						color: white;
+						border: none;
+						border-radius: 4px;
+						cursor: pointer;
+					">
+						${ __( 'Print Cover Letter', 'woocommerce-payments' ) }
+					</button>
+				</div>
+			</body>
+			</html>
+		`;
+
+		const blob = new Blob( [ htmlContent ], { type: 'text/html' } );
+		const url = URL.createObjectURL( blob );
+		const printWindow = window.open( url, '_blank' );
+
+		// Clean up the blob URL after the window loads
+		if ( printWindow ) {
+			printWindow.onload = () => {
+				URL.revokeObjectURL( url );
+			};
+		}
+	};
+
 	return (
 		<section className="wcpay-dispute-evidence-cover-letter">
 			<TextareaControl
@@ -32,20 +288,11 @@ const CoverLetter: React.FC< CoverLetterProps > = ( { value, onChange } ) => {
 			<Button
 				className="wcpay-dispute-evidence-cover-letter__print"
 				variant="primary"
-				onClick={ () => window.print() }
+				onClick={ handleViewCoverLetter }
 				icon={ <Icon icon={ external } size={ 24 } /> }
-				style={ {
-					background: '#3B5AFB',
-					color: '#fff',
-					marginBottom: 16,
-				} }
 			>
 				{ __( 'View cover letter', 'woocommerce-payments' ) }
 			</Button>
-			{ /* Print-only formatted letter */ }
-			<pre className="wcpay-dispute-evidence-cover-letter__printonly">
-				{ value }
-			</pre>
 		</section>
 	);
 };
diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 40cc6e29e6f..e236a5dac50 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -672,6 +672,7 @@ ${ merchantName }`;
 					<CoverLetter
 						value={ coverLetter }
 						onChange={ setCoverLetter }
+						dispute={ dispute }
 					/>
 					{ inlineNotice( bankName ) }
 				</>
diff --git a/client/disputes/new-evidence/test/cover-letter.test.tsx b/client/disputes/new-evidence/test/cover-letter.test.tsx
index 5081c48180d..ebd102af866 100644
--- a/client/disputes/new-evidence/test/cover-letter.test.tsx
+++ b/client/disputes/new-evidence/test/cover-letter.test.tsx
@@ -8,11 +8,116 @@ import { render, screen, fireEvent } from '@testing-library/react';
  * Internal dependencies
  */
 import CoverLetter from '../cover-letter';
+import PAYMENT_METHOD_IDS from 'wcpay/constants/payment-method';
+import type {
+	DisputeStatus,
+	EvidenceDetails,
+	DisputeReason,
+} from 'wcpay/types/disputes';
 
 describe( 'CoverLetter', () => {
 	const baseProps = {
 		value: 'Cover letter text',
 		onChange: jest.fn(),
+		dispute: {
+			status: 'needs_response' as DisputeStatus,
+			id: 'dp_123',
+			evidence_details: {
+				has_evidence: false,
+				due_by: Date.now() / 1000,
+				past_due: false,
+				submission_count: 0,
+			} as EvidenceDetails,
+			metadata: {},
+			order: {
+				id: 123,
+				number: '123',
+				url: 'https://example.com/order/123',
+				customer_url: null,
+				customer_email: null,
+				customer_name: null,
+				ip_address: '127.0.0.1',
+			} as OrderDetails,
+			evidence: {},
+			issuer_evidence: [],
+			charge: {
+				id: 'ch_123',
+				amount: 1000,
+				amount_captured: 1000,
+				amount_refunded: 0,
+				application: null,
+				application_fee: null,
+				application_fee_amount: 0,
+				balance_transaction: {
+					id: 'txn_123',
+					amount: 1000,
+					currency: 'usd',
+					created: Date.now() / 1000,
+					description: null,
+					fee: 0,
+					fee_details: [],
+					net: 1000,
+					reporting_category: 'charge',
+					source: 'ch_123',
+					status: 'available',
+					type: 'charge',
+				},
+				billing_details: {
+					email: 'test@example.com',
+					name: 'Test Customer',
+					phone: '+1234567890',
+					address: {
+						city: 'Test City',
+						country: 'US',
+						line1: '123 Test St',
+						line2: null,
+						postal_code: '12345',
+						state: 'CA',
+					},
+				},
+				calculated_statement_descriptor: null,
+				captured: true,
+				created: Date.now() / 1000,
+				currency: 'usd',
+				customer: null,
+				description: null,
+				dispute: null,
+				failure_code: null,
+				failure_message: null,
+				payment_method_details: {
+					type: PAYMENT_METHOD_IDS.CARD,
+					card: { network: 'visa' },
+				} as const,
+				disputed: false,
+				order: null,
+				outcome: null,
+				paid: true,
+				payment_intent: 'pi_123',
+				payment_method: 'pm_123',
+				receipt_email: null,
+				receipt_number: null,
+				receipt_url: null,
+				refunded: false,
+				refunds: { data: [] },
+				review: null,
+				shipping: null,
+				source: null,
+				source_transfer: null,
+				statement_descriptor: null,
+				statement_descriptor_suffix: null,
+				status: 'succeeded',
+				transfer: null,
+				transfer_data: null,
+				transfer_group: null,
+				paydown: null,
+			},
+			amount: 1000,
+			currency: 'usd',
+			created: Date.now() / 1000,
+			balance_transactions: [],
+			reason: 'general' as DisputeReason,
+			payment_intent: 'pi_123',
+		},
 	};
 
 	it( 'renders textarea and print button', () => {
@@ -31,10 +136,9 @@ describe( 'CoverLetter', () => {
 		expect( baseProps.onChange ).toHaveBeenCalledWith( 'New text' );
 	} );
 
-	it( 'renders print-only pre with value', () => {
+	it( 'renders textarea with value', () => {
 		render( <CoverLetter { ...baseProps } /> );
-		const all = screen.getAllByText( 'Cover letter text' );
-		const pre = all.find( ( el ) => el.tagName === 'PRE' );
-		expect( pre ).toBeTruthy();
+		const textarea = screen.getByLabelText( /COVER LETTER/i );
+		expect( textarea ).toHaveValue( 'Cover letter text' );
 	} );
 } );

From fd166ed8a52c4b312505e47bebf3696d31be5980 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Tue, 3 Jun 2025 16:54:14 -0300
Subject: [PATCH 22/42] add more state edge cases for the cover letter

---
 client/disputes/new-evidence/cover-letter.tsx |  42 ++-
 client/disputes/new-evidence/index.tsx        | 328 +++++++++---------
 .../new-evidence/shipping-details.tsx         |  11 +-
 client/disputes/new-evidence/style.scss       |   5 +
 4 files changed, 211 insertions(+), 175 deletions(-)

diff --git a/client/disputes/new-evidence/cover-letter.tsx b/client/disputes/new-evidence/cover-letter.tsx
index 19ba101029b..3c5c8ba0349 100644
--- a/client/disputes/new-evidence/cover-letter.tsx
+++ b/client/disputes/new-evidence/cover-letter.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React, { useEffect } from 'react';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
 
 /**
@@ -34,7 +34,7 @@ interface ExtendedDispute extends Omit< Dispute, 'evidence' | 'charge' > {
 
 interface CoverLetterProps {
 	value: string;
-	onChange: ( value: string ) => void;
+	onChange: ( value: string, isManualEdit?: boolean ) => void;
 	dispute: ExtendedDispute;
 }
 
@@ -43,6 +43,11 @@ const CoverLetter: React.FC< CoverLetterProps > = ( {
 	onChange,
 	dispute,
 } ) => {
+	const [ isAutoGenerating, setIsAutoGenerating ] = React.useState( true );
+	const [ autoGeneratedContent, setAutoGeneratedContent ] = React.useState(
+		''
+	);
+
 	useEffect( () => {
 		if ( ! dispute ) return;
 
@@ -167,14 +172,14 @@ const CoverLetter: React.FC< CoverLetterProps > = ( {
 • Customer Confirmation: Email or chat confirming purchase (Attachment C)
 • Usage Data: Login records for the digital goods (Attachment D)`;
 
-			return `${ merchantName }
+			const generatedContent = `${ merchantName }
 ${ merchantAddress }
 ${ merchantEmail }
 ${ merchantPhone }
 ${ today }
 
 To: ${ acquiringBank }
-Subject: Chargeback Dispute – Case # ${ caseNumber }
+Subject: Chargeback Dispute – Case #${ caseNumber }
 
 Dear Dispute Resolution Team,
 
@@ -189,10 +194,28 @@ Based on this information, we respectfully request that the chargeback be revers
 
 Thank you,
 ${ merchantName }`;
+
+			setAutoGeneratedContent( generatedContent );
+			return generatedContent;
 		};
 
-		onChange( generateCoverLetter() );
-	}, [ dispute, onChange ] );
+		// Generate content first to compare with loaded value
+		const generatedContent = generateCoverLetter();
+
+		// If there's a value already set (from saved uncategorized_text), compare it with generated content
+		if ( value ) {
+			if ( value !== generatedContent ) {
+				// Content differs from what would be auto-generated, mark as edited
+				onChange( value, true );
+			}
+			return;
+		}
+
+		// No saved value, use generated content
+		if ( isAutoGenerating ) {
+			onChange( generatedContent, false );
+		}
+	}, [ dispute, onChange, isAutoGenerating, value, autoGeneratedContent ] );
 
 	const handleViewCoverLetter = () => {
 		const htmlContent = `
@@ -276,12 +299,17 @@ ${ merchantName }`;
 		}
 	};
 
+	const handleTextareaChange = ( newValue: string ) => {
+		setIsAutoGenerating( false );
+		onChange( newValue, newValue !== autoGeneratedContent );
+	};
+
 	return (
 		<section className="wcpay-dispute-evidence-cover-letter">
 			<TextareaControl
 				label={ __( 'COVER LETTER', 'woocommerce-payments' ) }
 				value={ value }
-				onChange={ onChange }
+				onChange={ handleTextareaChange }
 				rows={ 30 }
 				className="wcpay-dispute-evidence-cover-letter__textarea"
 			/>
diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index e236a5dac50..54528cf03a3 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -93,6 +93,10 @@ export default ( { query }: { query: { id: string } } ) => {
 	const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
 	const [ productDescription, setProductDescription ] = useState( '' );
 	const [ coverLetter, setCoverLetter ] = useState( '' );
+	const [
+		isCoverLetterManuallyEdited,
+		setIsCoverLetterManuallyEdited,
+	] = useState( false );
 	const [ isUploading, setIsUploading ] = useState<
 		Record< string, boolean >
 	>( {} );
@@ -137,53 +141,8 @@ export default ( { query }: { query: { id: string } } ) => {
 					uncategorized_file: d.evidence?.uncategorized_file || '',
 				} ) );
 
-				// Generate default cover letter
-				const merchantName = d?.merchant_name || 'Sellthosejeans';
-				const merchantAddress =
-					d?.merchant_address ||
-					'123 High Street, LONDON, SW1A 1AA, UNITED KINGDOM';
-				const merchantEmail = d?.merchant_email || 'paul@gmail.com';
-				const merchantPhone = d?.merchant_phone || '+13334445566';
-				const today = new Date().toLocaleDateString( undefined, {
-					year: 'numeric',
-					month: 'long',
-					day: 'numeric',
-				} );
-				const acquiringBank =
-					'[Acquiring Bank or Payment Processor Name]';
-				const caseNumber = '[Chargeback Case Number]';
-				const transactionId = '[Transaction ID]';
-				const transactionDate = '[Transaction Date]';
-				const customerName = '[Customer Name]';
-				const product = '[Product]';
-				const orderDate = '[Order Date]';
-				const defaultLetter = `${ merchantName }
-${ merchantAddress }
-${ merchantEmail }
-${ merchantPhone }
-${ today }
-
-To: ${ acquiringBank }
-Subject: Chargeback Dispute – Case # ${ caseNumber }
-
-Dear Dispute Resolution Team,
-
-We are submitting evidence in response to chargeback # ${ caseNumber } for transaction # ${ transactionId } on ${ transactionDate }.
-
-Our records indicate that the customer and legitimate cardholder, ${ customerName }, ordered ${ product } on ${ orderDate }.
-
-To support our case, we are providing the following documentation:
-• AVS/CVV Match: Billing address and security code matched (Attachment A)
-• IP/Device Data: Location and device info used at purchase (Attachment B)
-• Customer Confirmation: Email or chat confirming purchase (Attachment C)
-• Usage Data: Login records for the digital goods (Attachment D)
-
-Based on this information, we respectfully request that the chargeback be reversed. Please let us know if any further details are required.
-
-Thank you,
-Paul McCartney
-${ merchantName }`;
-				setCoverLetter( defaultLetter );
+				// Set cover letter from saved evidence
+				setCoverLetter( d.evidence?.uncategorized_text || '' );
 			} catch ( error ) {
 				createErrorNotice( String( error ) );
 			}
@@ -202,6 +161,140 @@ ${ merchantName }`;
 		setIsAccordionOpen( currentStep === 0 );
 	}, [ currentStep ] );
 
+	// --- File upload logic ---
+	const isUploadingEvidence = () =>
+		Object.values( isUploading ).some( Boolean );
+
+	// --- Save/submit logic ---
+	const doSave = async ( submit: boolean ) => {
+		// Prevent submit if upload is in progress
+		if ( isUploadingEvidence() ) {
+			createInfoNotice(
+				__(
+					'Please wait until file upload is finished',
+					'woocommerce-payments'
+				)
+			);
+			return;
+		}
+
+		try {
+			recordEvent(
+				submit
+					? 'wcpay_dispute_submit_evidence_clicked'
+					: 'wcpay_dispute_save_evidence_clicked'
+			);
+
+			recordEvent(
+				submit
+					? 'wcpay_dispute_submit_evidence_success'
+					: 'wcpay_dispute_save_evidence_success'
+			);
+
+			createSuccessNotice(
+				submit
+					? __( 'Evidence submitted!', 'woocommerce-payments' )
+					: __( 'Evidence saved!', 'woocommerce-payments' ),
+				{
+					actions: [
+						{
+							label: submit
+								? __(
+										'View submitted evidence',
+										'woocommerce-payments'
+								  )
+								: __(
+										'Return to evidence submission',
+										'woocommerce-payments'
+								  ),
+							url: getAdminUrl( {
+								page: 'wc-admin',
+								path: '/payments/disputes/challenge',
+								id: query.id,
+							} ),
+						},
+					],
+				}
+			);
+
+			// Only include file keys in the evidence object if they have a non-empty value
+			const evidenceToSend = Object.fromEntries(
+				Object.entries( {
+					...dispute.evidence,
+					product_description: productDescription,
+					receipt: evidence.receipt,
+					customer_communication: evidence.customer_communication,
+					customer_signature: evidence.customer_signature,
+					refund_policy: evidence.refund_policy,
+					duplicate_charge_documentation:
+						evidence.duplicate_charge_documentation,
+					shipping_documentation: evidence.shipping_documentation,
+					service_documentation: evidence.service_documentation,
+					cancellation_policy: evidence.cancellation_policy,
+					access_activity_log: evidence.access_activity_log,
+					uncategorized_file: evidence.uncategorized_file,
+					uncategorized_text: coverLetter,
+					// Add shipping details
+					shipping_carrier: evidence.shipping_carrier,
+					shipping_date: evidence.shipping_date,
+					shipping_tracking_number: evidence.shipping_tracking_number,
+					shipping_address: evidence.shipping_address,
+				} ).filter(
+					( [ , value ] ) => value !== undefined && value !== ''
+				)
+			);
+
+			// Update metadata with the current productType
+			const updatedMetadata = {
+				...dispute.metadata,
+				__product_type: productType,
+			};
+
+			await apiFetch( {
+				path,
+				method: 'post',
+				data: {
+					evidence: evidenceToSend,
+					metadata: updatedMetadata,
+					submit,
+				},
+			} );
+			setRedirectAfterSave( true );
+		} catch ( err ) {
+			recordEvent(
+				submit
+					? 'wcpay_dispute_submit_evidence_failed'
+					: 'wcpay_dispute_save_evidence_failed'
+			);
+
+			const message = submit
+				? __(
+						'Failed to submit evidence. (%s)',
+						'woocommerce-payments'
+				  )
+				: __( 'Failed to save evidence. (%s)', 'woocommerce-payments' );
+			createErrorNotice(
+				sprintf(
+					message,
+					err instanceof Error ? err.message : String( err )
+				)
+			);
+		}
+	};
+
+	// --- Handle step changes ---
+	const handleStepChange = async ( newStep: number ) => {
+		// Save current evidence before changing step
+		await doSave( false );
+
+		// Update step
+		setCurrentStep( newStep );
+
+		// Update cover letter with latest evidence
+		const updatedDispute = await apiFetch( { path } );
+		setDispute( updatedDispute );
+	};
+
 	// --- Read-only logic ---
 	const readOnly =
 		dispute &&
@@ -221,10 +314,6 @@ ${ merchantName }`;
 		} ) );
 	};
 
-	// --- File upload logic ---
-	const isUploadingEvidence = () =>
-		Object.values( isUploading ).some( Boolean );
-
 	const fileSizeExceeded = ( latestFileSize: number ) => {
 		const fileSizeLimitInBytes = 4500000;
 		const totalFileSize =
@@ -326,115 +415,6 @@ ${ merchantName }`;
 		confirmationNavigationCallback();
 	}, [ pristine, confirmationNavigationCallback, redirectAfterSave ] );
 
-	// --- Save/submit logic ---
-	const doSave = async ( submit: boolean ) => {
-		// Prevent submit if upload is in progress
-		if ( isUploadingEvidence() ) {
-			createInfoNotice(
-				__(
-					'Please wait until file upload is finished',
-					'woocommerce-payments'
-				)
-			);
-			return;
-		}
-
-		try {
-			recordEvent(
-				submit
-					? 'wcpay_dispute_submit_evidence_clicked'
-					: 'wcpay_dispute_save_evidence_clicked'
-			);
-
-			recordEvent(
-				submit
-					? 'wcpay_dispute_submit_evidence_success'
-					: 'wcpay_dispute_save_evidence_success'
-			);
-
-			createSuccessNotice(
-				submit
-					? __( 'Evidence submitted!', 'woocommerce-payments' )
-					: __( 'Evidence saved!', 'woocommerce-payments' ),
-				{
-					actions: [
-						{
-							label: submit
-								? __(
-										'View submitted evidence',
-										'woocommerce-payments'
-								  )
-								: __(
-										'Return to evidence submission',
-										'woocommerce-payments'
-								  ),
-							url: getAdminUrl( {
-								page: 'wc-admin',
-								path: '/payments/disputes/challenge',
-								id: query.id,
-							} ),
-						},
-					],
-				}
-			);
-
-			// Only include file keys in the evidence object if they have a non-empty value
-			const evidenceToSend = Object.fromEntries(
-				Object.entries( {
-					...dispute.evidence,
-					product_description: productDescription,
-					receipt: evidence.receipt,
-					customer_communication: evidence.customer_communication,
-					customer_signature: evidence.customer_signature,
-					refund_policy: evidence.refund_policy,
-					duplicate_charge_documentation:
-						evidence.duplicate_charge_documentation,
-					shipping_documentation: evidence.shipping_documentation,
-					service_documentation: evidence.service_documentation,
-					cancellation_policy: evidence.cancellation_policy,
-					access_activity_log: evidence.access_activity_log,
-					uncategorized_file: evidence.uncategorized_file,
-				} ).filter( ( [ value ] ) => value && value !== '' )
-			);
-
-			// Update metadata with the current productType
-			const updatedMetadata = {
-				...dispute.metadata,
-				__product_type: productType,
-			};
-
-			await apiFetch( {
-				path,
-				method: 'post',
-				data: {
-					evidence: evidenceToSend,
-					metadata: updatedMetadata,
-					submit,
-				},
-			} );
-			setRedirectAfterSave( true );
-		} catch ( err ) {
-			recordEvent(
-				submit
-					? 'wcpay_dispute_submit_evidence_failed'
-					: 'wcpay_dispute_save_evidence_failed'
-			);
-
-			const message = submit
-				? __(
-						'Failed to submit evidence. (%s)',
-						'woocommerce-payments'
-				  )
-				: __( 'Failed to save evidence. (%s)', 'woocommerce-payments' );
-			createErrorNotice(
-				sprintf(
-					message,
-					err instanceof Error ? err.message : String( err )
-				)
-			);
-		}
-	};
-
 	// --- Accordion summary content ---
 	const summaryItems = useMemo( () => {
 		if ( ! dispute ) return [];
@@ -669,9 +649,27 @@ ${ merchantName }`;
 					<p className="wcpay-dispute-evidence-new__stepper-subheading">
 						{ steps[ reviewStep ].subheading }
 					</p>
+					{ isCoverLetterManuallyEdited && (
+						<InlineNotice
+							icon
+							isDismissible={ false }
+							status="warning"
+							className="wcpay-dispute-evidence-new__cover-letter-warning"
+						>
+							{ __(
+								'The cover letter has been manually edited and will not be automatically updated with new evidence.',
+								'woocommerce-payments'
+							) }
+						</InlineNotice>
+					) }
 					<CoverLetter
 						value={ coverLetter }
-						onChange={ setCoverLetter }
+						onChange={ ( value, isManualEdit ) => {
+							setCoverLetter( value );
+							if ( isManualEdit ) {
+								setIsCoverLetterManuallyEdited( true );
+							}
+						} }
 						dispute={ dispute }
 					/>
 					{ inlineNotice( bankName ) }
@@ -708,7 +706,9 @@ ${ merchantName }`;
 						</Button>
 						<Button
 							variant="primary"
-							onClick={ () => setCurrentStep( ( s ) => s + 1 ) }
+							onClick={ () =>
+								handleStepChange( currentStep + 1 )
+							}
 						>
 							{ __( 'Next', 'woocommerce-payments' ) }
 						</Button>
@@ -734,7 +734,9 @@ ${ merchantName }`;
 						</Button>
 						<Button
 							variant="primary"
-							onClick={ () => setCurrentStep( ( s ) => s + 1 ) }
+							onClick={ () =>
+								handleStepChange( currentStep + 1 )
+							}
 						>
 							{ __( 'Next', 'woocommerce-payments' ) }
 						</Button>
diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index 6703e7f96d3..d645a80f1bb 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -31,9 +31,10 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 	if ( ! dispute ) return null;
 
 	const handleChange = ( key: string, value: string ) => {
-		setLocalEvidence( ( prev: any ) => ( { ...prev, [ key ]: value } ) );
+		const newEvidence = { ...localEvidence, [ key ]: value };
+		setLocalEvidence( newEvidence );
 		if ( onShippingDetailsChange ) {
-			onShippingDetailsChange( { ...localEvidence, [ key ]: value } );
+			onShippingDetailsChange( newEvidence );
 		}
 	};
 
@@ -48,7 +49,7 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_carrier', value )
 					}
-					value={ localEvidence.shipping_carrier || '-' }
+					value={ localEvidence.shipping_carrier || '' }
 					disabled={ readOnly }
 				/>
 			</div>
@@ -78,7 +79,7 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_tracking_number', value )
 					}
-					value={ localEvidence.shipping_tracking_number || '-' }
+					value={ localEvidence.shipping_tracking_number || '' }
 					disabled={ readOnly }
 				/>
 			</div>
@@ -92,7 +93,7 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_address', value )
 					}
-					value={ localEvidence.shipping_address || '-' }
+					value={ localEvidence.shipping_address || '' }
 					disabled={ readOnly }
 				/>
 			</div>
diff --git a/client/disputes/new-evidence/style.scss b/client/disputes/new-evidence/style.scss
index 1370efbf064..d2f6423b645 100644
--- a/client/disputes/new-evidence/style.scss
+++ b/client/disputes/new-evidence/style.scss
@@ -81,6 +81,11 @@
 	@include body-md;
 }
 
+.wcpay-dispute-evidence-new__cover-letter-warning {
+	margin-bottom: 16px;
+	border-left: 4px solid var( --wp-components-color-warning, #f0b849 );
+}
+
 .wcpay-dispute-evidence-new__button-row {
 	display: flex;
 	justify-content: space-between;

From b68599e971c2d0e3fdeae5172133e739388a031c Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Tue, 3 Jun 2025 17:10:12 -0300
Subject: [PATCH 23/42] fixing tests

---
 .../new-evidence/test/cover-letter.test.tsx         |  5 +++--
 .../new-evidence/test/shipping-details.test.tsx     | 13 +++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/disputes/new-evidence/test/cover-letter.test.tsx b/client/disputes/new-evidence/test/cover-letter.test.tsx
index ebd102af866..88686bcfbab 100644
--- a/client/disputes/new-evidence/test/cover-letter.test.tsx
+++ b/client/disputes/new-evidence/test/cover-letter.test.tsx
@@ -130,10 +130,11 @@ describe( 'CoverLetter', () => {
 
 	it( 'calls onChange when textarea changes', () => {
 		render( <CoverLetter { ...baseProps } /> );
-		fireEvent.change( screen.getByLabelText( /COVER LETTER/i ), {
+		const textarea = screen.getByRole( 'textbox' );
+		fireEvent.change( textarea, {
 			target: { value: 'New text' },
 		} );
-		expect( baseProps.onChange ).toHaveBeenCalledWith( 'New text' );
+		expect( baseProps.onChange ).toHaveBeenCalledWith( 'New text', true );
 	} );
 
 	it( 'renders textarea with value', () => {
diff --git a/client/disputes/new-evidence/test/shipping-details.test.tsx b/client/disputes/new-evidence/test/shipping-details.test.tsx
index e97c37308a4..1af403ce985 100644
--- a/client/disputes/new-evidence/test/shipping-details.test.tsx
+++ b/client/disputes/new-evidence/test/shipping-details.test.tsx
@@ -45,12 +45,17 @@ describe( 'ShippingDetails', () => {
 		expect( screen.getByDisplayValue( '123 Ship St' ) ).toBeInTheDocument();
 	} );
 
-	it( 'renders dashes for missing data', () => {
+	it( 'renders empty strings for missing data', () => {
 		const dispute = { evidence: {} };
 		render( <ShippingDetails dispute={ dispute } /> );
-		expect( screen.getAllByDisplayValue( '-' ).length ).toBeGreaterThan(
-			0
-		);
+		const inputs = screen.getAllByRole( 'textbox' );
+		// SHIPPING CARRIER, TRACKING NUMBER, SHIPPING ADDRESS should be empty
+		expect( inputs[ 0 ] ).toHaveValue( '' ); // SHIPPING CARRIER
+		expect( inputs[ 2 ] ).toHaveValue( '' ); // TRACKING NUMBER
+		expect( inputs[ 3 ] ).toHaveValue( '' ); // SHIPPING ADDRESS
+		// SHIPPING DATE should be today's date
+		const today = new Date().toLocaleDateString();
+		expect( inputs[ 1 ] ).toHaveValue( today ); // SHIPPING DATE
 	} );
 
 	it( 'disables inputs when readOnly', () => {

From 2478b1524309f150e973d6cd6b6bb446e2df398c Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Tue, 3 Jun 2025 19:04:15 -0300
Subject: [PATCH 24/42] pull data from hook

---
 client/disputes/new-evidence/cover-letter.tsx | 52 ++++++++++++++++---
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/client/disputes/new-evidence/cover-letter.tsx b/client/disputes/new-evidence/cover-letter.tsx
index 3c5c8ba0349..124cddbbf3e 100644
--- a/client/disputes/new-evidence/cover-letter.tsx
+++ b/client/disputes/new-evidence/cover-letter.tsx
@@ -4,6 +4,7 @@
 import React, { useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
+import { useGetSettings } from 'wcpay/data';
 
 /**
  * Internal dependencies
@@ -18,6 +19,20 @@ import { Charge } from 'wcpay/types/charges';
 import { formatDateTimeFromTimestamp } from 'wcpay/utils/date-time';
 import PAYMENT_METHOD_IDS from 'wcpay/constants/payment-method';
 
+interface StoreSettings {
+	account_business_name: string;
+	account_business_support_address: {
+		line1: string;
+		line2?: string;
+		city: string;
+		state: string;
+		postal_code: string;
+		country: string;
+	};
+	account_business_support_phone: string;
+	account_business_support_email: string;
+}
+
 interface ExtendedDispute extends Omit< Dispute, 'evidence' | 'charge' > {
 	merchant_name?: string;
 	merchant_address?: string;
@@ -47,16 +62,34 @@ const CoverLetter: React.FC< CoverLetterProps > = ( {
 	const [ autoGeneratedContent, setAutoGeneratedContent ] = React.useState(
 		''
 	);
+	const settings = useGetSettings();
 
 	useEffect( () => {
-		if ( ! dispute ) return;
+		if ( ! dispute || ! settings || Object.keys( settings ).length === 0 )
+			return;
+
+		const formatAddress = (
+			address: StoreSettings[ 'account_business_support_address' ]
+		) => {
+			const parts = [
+				address.line1,
+				address.line2,
+				`${ address.city }, ${ address.state } ${ address.postal_code }`,
+				address.country,
+			].filter( Boolean );
+			return parts.join( '\n' );
+		};
 
 		const generateCoverLetter = () => {
-			const merchantName = dispute?.merchant_name || 'Your Business Name';
-			const merchantAddress = dispute?.merchant_address || 'Your Address';
-			const merchantEmail = dispute?.merchant_email || 'your@email.com';
+			const merchantName =
+				settings?.account_business_name || 'Your Business Name';
+			const merchantAddress = settings?.account_business_support_address
+				? formatAddress( settings.account_business_support_address )
+				: 'Your Address';
+			const merchantEmail =
+				settings?.account_business_support_email || 'your@email.com';
 			const merchantPhone =
-				dispute?.merchant_phone || 'Your Phone Number';
+				settings?.account_business_support_phone || 'Your Phone Number';
 			const today = new Date().toLocaleDateString( undefined, {
 				year: 'numeric',
 				month: 'long',
@@ -215,7 +248,14 @@ ${ merchantName }`;
 		if ( isAutoGenerating ) {
 			onChange( generatedContent, false );
 		}
-	}, [ dispute, onChange, isAutoGenerating, value, autoGeneratedContent ] );
+	}, [
+		dispute,
+		onChange,
+		isAutoGenerating,
+		value,
+		autoGeneratedContent,
+		settings,
+	] );
 
 	const handleViewCoverLetter = () => {
 		const htmlContent = `

From 06bd9c919a9a5ef799fff4201833c63f1935e1fe Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 13:32:09 -0300
Subject: [PATCH 25/42] fix the address thing, re-generate the cover letter if
 the content is emptied

---
 client/disputes/new-evidence/cover-letter.tsx | 117 ++++++++++--------
 client/disputes/new-evidence/index.tsx        |   1 +
 .../new-evidence/test/cover-letter.test.tsx   |   1 +
 client/globals.d.ts                           |   4 +
 4 files changed, 70 insertions(+), 53 deletions(-)

diff --git a/client/disputes/new-evidence/cover-letter.tsx b/client/disputes/new-evidence/cover-letter.tsx
index 124cddbbf3e..db9f1c65cf2 100644
--- a/client/disputes/new-evidence/cover-letter.tsx
+++ b/client/disputes/new-evidence/cover-letter.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { external } from '@wordpress/icons';
 import { useGetSettings } from 'wcpay/data';
@@ -17,21 +17,6 @@ import {
 import { Dispute } from 'wcpay/types/disputes';
 import { Charge } from 'wcpay/types/charges';
 import { formatDateTimeFromTimestamp } from 'wcpay/utils/date-time';
-import PAYMENT_METHOD_IDS from 'wcpay/constants/payment-method';
-
-interface StoreSettings {
-	account_business_name: string;
-	account_business_support_address: {
-		line1: string;
-		line2?: string;
-		city: string;
-		state: string;
-		postal_code: string;
-		country: string;
-	};
-	account_business_support_phone: string;
-	account_business_support_email: string;
-}
 
 interface ExtendedDispute extends Omit< Dispute, 'evidence' | 'charge' > {
 	merchant_name?: string;
@@ -51,78 +36,96 @@ interface CoverLetterProps {
 	value: string;
 	onChange: ( value: string, isManualEdit?: boolean ) => void;
 	dispute: ExtendedDispute;
+	bankName: string | null;
 }
 
 const CoverLetter: React.FC< CoverLetterProps > = ( {
 	value,
 	onChange,
 	dispute,
+	bankName,
 } ) => {
-	const [ isAutoGenerating, setIsAutoGenerating ] = React.useState( true );
-	const [ autoGeneratedContent, setAutoGeneratedContent ] = React.useState(
-		''
-	);
+	const [ isAutoGenerating, setIsAutoGenerating ] = useState( true );
+	const [ autoGeneratedContent, setAutoGeneratedContent ] = useState( '' );
+	const wcStoreCountry =
+		wcSettings?.admin?.preloadSettings?.general
+			?.woocommerce_default_country || ':';
+	const [ storeCountry, storeState ] = wcStoreCountry.split( ':' );
+	const [ accountDetails ] = useState( {
+		name: wcSettings?.siteTitle || '<Your Business Name>',
+		support_address_city:
+			wcSettings?.admin?.preloadSettings?.general
+				?.woocommerce_store_city || '',
+		support_address_country: storeCountry,
+		support_address_line1:
+			wcSettings?.admin?.preloadSettings?.general
+				?.woocommerce_store_address || '',
+		support_address_line2:
+			wcSettings?.admin?.preloadSettings?.general
+				?.woocommerce_store_address_2 || '',
+		support_address_postal_code:
+			wcSettings?.admin?.preloadSettings?.general
+				?.woocommerce_store_postcode || '',
+		support_address_state: storeState,
+	} );
 	const settings = useGetSettings();
 
 	useEffect( () => {
-		if ( ! dispute || ! settings || Object.keys( settings ).length === 0 )
+		if (
+			! dispute ||
+			! accountDetails ||
+			Object.keys( accountDetails ).length === 0 ||
+			! settings ||
+			Object.keys( settings ).length === 0
+		) {
 			return;
-
-		const formatAddress = (
-			address: StoreSettings[ 'account_business_support_address' ]
-		) => {
-			const parts = [
-				address.line1,
-				address.line2,
-				`${ address.city }, ${ address.state } ${ address.postal_code }`,
-				address.country,
-			].filter( Boolean );
-			return parts.join( '\n' );
-		};
-
+		}
 		const generateCoverLetter = () => {
-			const merchantName =
-				settings?.account_business_name || 'Your Business Name';
-			const merchantAddress = settings?.account_business_support_address
-				? formatAddress( settings.account_business_support_address )
-				: 'Your Address';
+			const merchantAddress = `${ accountDetails.support_address_line1 }, ${ accountDetails.support_address_line2 }, ${ accountDetails.support_address_city }, ${ accountDetails.support_address_state } ${ accountDetails.support_address_postal_code } ${ accountDetails.support_address_country }`;
+			const merchantName = accountDetails.name;
 			const merchantEmail =
-				settings?.account_business_support_email || 'your@email.com';
+				settings?.account_business_support_email ||
+				'<business@email.com>';
 			const merchantPhone =
-				settings?.account_business_support_phone || 'Your Phone Number';
+				settings?.account_business_support_phone ||
+				'<Business Phone Number>';
 			const today = new Date().toLocaleDateString( undefined, {
 				year: 'numeric',
 				month: 'long',
 				day: 'numeric',
 			} );
-			const acquiringBank =
-				dispute?.charge?.payment_method_details?.type ===
-				PAYMENT_METHOD_IDS.CARD
-					? dispute?.charge?.payment_method_details?.card?.network ||
-					  'Acquiring Bank'
-					: 'Acquiring Bank';
-			const caseNumber = dispute?.id || 'Case Number';
-			const transactionId = dispute?.charge?.id || 'Transaction ID';
+			const acquiringBank = bankName || '<Bank Name>';
+			const caseNumber = dispute?.id || '<Case Number>';
+			const transactionId = dispute?.charge?.id || '<Transaction ID>';
 			const transactionDate = dispute?.created
 				? formatDateTimeFromTimestamp( dispute.created, {
 						separator: ', ',
 						includeTime: true,
 				  } )
-				: 'Transaction Date';
+				: '<Transaction Date>';
 			const customerName =
-				dispute?.charge?.billing_details?.name || 'Customer Name';
-			const product = dispute?.evidence?.product_description || 'Product';
+				dispute?.charge?.billing_details?.name || '<Customer Name>';
+			const product =
+				dispute?.evidence?.product_description || '<Product>';
 			const orderDate = dispute?.charge?.created
 				? formatDateTimeFromTimestamp( dispute.charge.created, {
 						separator: ', ',
 						includeTime: true,
 				  } )
-				: 'Order Date';
+				: '<Order Date>';
 
 			// Generate list of attachments based on provided evidence
 			const attachments = [];
 			let attachmentCount = 0;
 
+			if ( dispute.evidence?.receipt ) {
+				attachmentCount++;
+				attachments.push(
+					`• Order receipt (Attachment ${ String.fromCharCode(
+						64 + attachmentCount
+					) })`
+				);
+			}
 			if ( dispute.evidence?.receipt ) {
 				attachmentCount++;
 				attachments.push(
@@ -254,6 +257,8 @@ ${ merchantName }`;
 		isAutoGenerating,
 		value,
 		autoGeneratedContent,
+		bankName,
+		accountDetails,
 		settings,
 	] );
 
@@ -340,6 +345,12 @@ ${ merchantName }`;
 	};
 
 	const handleTextareaChange = ( newValue: string ) => {
+		// If the value is empty, set the auto-generated content
+		if ( newValue.trim() === '' ) {
+			setIsAutoGenerating( true );
+			onChange( autoGeneratedContent, false );
+			return;
+		}
 		setIsAutoGenerating( false );
 		onChange( newValue, newValue !== autoGeneratedContent );
 	};
diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 54528cf03a3..91c192bfd55 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -671,6 +671,7 @@ export default ( { query }: { query: { id: string } } ) => {
 							}
 						} }
 						dispute={ dispute }
+						bankName={ bankName }
 					/>
 					{ inlineNotice( bankName ) }
 				</>
diff --git a/client/disputes/new-evidence/test/cover-letter.test.tsx b/client/disputes/new-evidence/test/cover-letter.test.tsx
index 88686bcfbab..cbda20af9de 100644
--- a/client/disputes/new-evidence/test/cover-letter.test.tsx
+++ b/client/disputes/new-evidence/test/cover-letter.test.tsx
@@ -118,6 +118,7 @@ describe( 'CoverLetter', () => {
 			reason: 'general' as DisputeReason,
 			payment_intent: 'pi_123',
 		},
+		bankName: 'Bank Name',
 	};
 
 	it( 'renders textarea and print button', () => {
diff --git a/client/globals.d.ts b/client/globals.d.ts
index 538093a713f..ad7f806d537 100644
--- a/client/globals.d.ts
+++ b/client/globals.d.ts
@@ -225,6 +225,10 @@ declare global {
 					woocommerce_all_except_countries: string[];
 					woocommerce_specific_allowed_countries: string[];
 					woocommerce_default_country: string;
+					woocommerce_store_address: string;
+					woocommerce_store_address_2: string;
+					woocommerce_store_city: string;
+					woocommerce_store_postcode: string;
 				};
 			};
 			siteVisibilitySettings: {

From 95c4a82757cd0dfa084f6667dfd9fcce7c8761ce Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 14:11:20 -0300
Subject: [PATCH 26/42] add visual feedback to upload button

---
 .../new-evidence/file-upload-control.tsx      | 12 ++---
 client/disputes/new-evidence/index.tsx        |  8 +++
 .../new-evidence/recommended-documents.tsx    |  2 +
 client/disputes/new-evidence/style.scss       | 51 -------------------
 4 files changed, 16 insertions(+), 57 deletions(-)

diff --git a/client/disputes/new-evidence/file-upload-control.tsx b/client/disputes/new-evidence/file-upload-control.tsx
index 9bf00a310a1..af23b174a97 100644
--- a/client/disputes/new-evidence/file-upload-control.tsx
+++ b/client/disputes/new-evidence/file-upload-control.tsx
@@ -20,6 +20,7 @@ interface FileUploadControlProps {
 	onFileRemove: () => void;
 	disabled?: boolean;
 	isDone?: boolean;
+	isBusy?: boolean;
 	accept?: string;
 	label: string;
 }
@@ -30,6 +31,7 @@ const FileUploadControl: React.FC< FileUploadControlProps > = ( {
 	onFileRemove,
 	disabled = false,
 	isDone = false,
+	isBusy = false,
 	accept = '.pdf, image/png, image/jpeg',
 	label,
 } ) => {
@@ -56,7 +58,7 @@ const FileUploadControl: React.FC< FileUploadControlProps > = ( {
 							'Remove file',
 							'woocommerce-payments'
 						) }
-						isDestructive
+						variant="tertiary"
 					/>
 				</span>
 			) : null }
@@ -76,15 +78,13 @@ const FileUploadControl: React.FC< FileUploadControlProps > = ( {
 							className="wcpay-dispute-evidence-file-upload-control__upload"
 							icon={ <Icon icon={ cloudUpload } size={ 24 } /> }
 							onClick={ openFileDialog }
-							disabled={ disabled }
+							disabled={ disabled || isBusy }
+							isBusy={ isBusy }
 							aria-label={ __(
 								'Upload file',
 								'woocommerce-payments'
 							) }
-							style={ {
-								background: 'var(--wp-admin-theme-color)',
-								color: '#fff',
-							} }
+							variant="primary"
 						/>
 					) }
 				/>
diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index ef8931aec1a..7a850f86700 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -93,6 +93,9 @@ export default ( { query }: { query: { id: string } } ) => {
 	const [ redirectAfterSave, setRedirectAfterSave ] = useState( false );
 	const [ productDescription, setProductDescription ] = useState( '' );
 	const [ coverLetter, setCoverLetter ] = useState( '' );
+	const [ isUploading, setIsUploading ] = useState<
+		Record< string, boolean >
+	>( {} );
 	const { createSuccessNotice, createErrorNotice } = useDispatch(
 		'core/notices'
 	);
@@ -187,6 +190,7 @@ ${ merchantName }`;
 		if ( ! file ) return;
 		// TODO: Add file size checks, error handling, etc.
 		try {
+			setIsUploading( ( prev ) => ( { ...prev, [ key ]: true } ) );
 			const body = new FormData();
 			body.append( 'file', file );
 			body.append( 'purpose', 'dispute_evidence' );
@@ -202,6 +206,8 @@ ${ merchantName }`;
 			} else {
 				createErrorNotice( String( err ) );
 			}
+		} finally {
+			setIsUploading( ( prev ) => ( { ...prev, [ key ]: false } ) );
 		}
 	};
 	const doRemoveFile = ( key: string ) =>
@@ -374,6 +380,7 @@ ${ merchantName }`;
 			onFileChange: ( key: string, file: File ) =>
 				Promise.resolve( doUploadFile( field.key, file ) ),
 			onFileRemove: () => Promise.resolve( doRemoveFile( field.key ) ),
+			isBusy: isUploading[ field.key ] || false,
 		} )
 	);
 
@@ -386,6 +393,7 @@ ${ merchantName }`;
 			onFileChange: ( key: string, file: File ) =>
 				Promise.resolve( doUploadFile( field.key, file ) ),
 			onFileRemove: () => Promise.resolve( doRemoveFile( field.key ) ),
+			isBusy: isUploading[ field.key ] || false,
 		} )
 	);
 
diff --git a/client/disputes/new-evidence/recommended-documents.tsx b/client/disputes/new-evidence/recommended-documents.tsx
index 6ef8daa45a5..6fc713526d4 100644
--- a/client/disputes/new-evidence/recommended-documents.tsx
+++ b/client/disputes/new-evidence/recommended-documents.tsx
@@ -17,6 +17,7 @@ interface DocumentField {
 	onFileRemove: () => Promise< void >;
 	uploaded?: boolean;
 	readOnly?: boolean;
+	isBusy?: boolean;
 }
 
 interface RecommendedDocumentsProps {
@@ -54,6 +55,7 @@ const RecommendedDocuments: React.FC< RecommendedDocumentsProps > = ( {
 							onFileRemove={ async () => field.onFileRemove() }
 							disabled={ readOnly || field.readOnly }
 							isDone={ !! field.uploaded }
+							isBusy={ field.isBusy }
 							accept={ '.pdf, image/png, image/jpeg' }
 						/>
 					</li>
diff --git a/client/disputes/new-evidence/style.scss b/client/disputes/new-evidence/style.scss
index 1370efbf064..35f8dc93218 100644
--- a/client/disputes/new-evidence/style.scss
+++ b/client/disputes/new-evidence/style.scss
@@ -239,33 +239,6 @@
 		gap: 8px;
 	}
 
-	&__upload .components-button {
-		background: var( --wp-admin-theme-color );
-		color: #fff;
-		border-radius: 8px;
-		min-width: 48px;
-		min-height: 48px;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: none;
-		border: none;
-		transition: background 0.2s;
-		&:hover:not( :disabled ) {
-			background: color-mix(
-				in srgb,
-				var( --wp-admin-theme-color ) 10%,
-				transparent
-			);
-		}
-		&:disabled {
-			background: #e0e6f7;
-			color: #b3b3b3;
-			cursor: not-allowed;
-		}
-	}
-
 	&__filename {
 		max-width: 320px;
 		min-width: 120px;
@@ -295,30 +268,6 @@
 		white-space: nowrap;
 		color: var( --wp-admin-theme-color );
 	}
-
-	&__remove .components-button {
-		border: none;
-		min-width: 24px;
-		min-height: 24px;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var( --wp-admin-theme-color );
-		background: transparent;
-		svg {
-			color: inherit;
-			fill: currentColor;
-		}
-		&:hover:not( :disabled ) {
-			background: color-mix( in srgb, #fff 10%, transparent );
-			color: var( --wp-admin-theme-color );
-		}
-		&:disabled {
-			color: #b3b3b3;
-			cursor: not-allowed;
-		}
-	}
 }
 
 .wcpay-dispute-evidence-cover-letter__printonly {

From f832be807b6d2e1000d6bb5fb91042a77e232941 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 16:33:02 -0300
Subject: [PATCH 27/42] localized texts

---
 client/disputes/new-evidence/cover-letter.tsx | 207 +++++++++++++-----
 1 file changed, 149 insertions(+), 58 deletions(-)

diff --git a/client/disputes/new-evidence/cover-letter.tsx b/client/disputes/new-evidence/cover-letter.tsx
index db9f1c65cf2..260e643333f 100644
--- a/client/disputes/new-evidence/cover-letter.tsx
+++ b/client/disputes/new-evidence/cover-letter.tsx
@@ -85,34 +85,40 @@ const CoverLetter: React.FC< CoverLetterProps > = ( {
 			const merchantName = accountDetails.name;
 			const merchantEmail =
 				settings?.account_business_support_email ||
-				'<business@email.com>';
+				__( '<business@email.com>', 'woocommerce-payments' );
 			const merchantPhone =
 				settings?.account_business_support_phone ||
-				'<Business Phone Number>';
+				__( '<Business Phone Number>', 'woocommerce-payments' );
 			const today = new Date().toLocaleDateString( undefined, {
 				year: 'numeric',
 				month: 'long',
 				day: 'numeric',
 			} );
-			const acquiringBank = bankName || '<Bank Name>';
-			const caseNumber = dispute?.id || '<Case Number>';
-			const transactionId = dispute?.charge?.id || '<Transaction ID>';
+			const acquiringBank =
+				bankName || __( '<Bank Name>', 'woocommerce-payments' );
+			const caseNumber =
+				dispute?.id || __( '<Case Number>', 'woocommerce-payments' );
+			const transactionId =
+				dispute?.charge?.id ||
+				__( '<Transaction ID>', 'woocommerce-payments' );
 			const transactionDate = dispute?.created
 				? formatDateTimeFromTimestamp( dispute.created, {
 						separator: ', ',
 						includeTime: true,
 				  } )
-				: '<Transaction Date>';
+				: __( '<Transaction Date>', 'woocommerce-payments' );
 			const customerName =
-				dispute?.charge?.billing_details?.name || '<Customer Name>';
+				dispute?.charge?.billing_details?.name ||
+				__( '<Customer Name>', 'woocommerce-payments' );
 			const product =
-				dispute?.evidence?.product_description || '<Product>';
+				dispute?.evidence?.product_description ||
+				__( '<Product>', 'woocommerce-payments' );
 			const orderDate = dispute?.charge?.created
 				? formatDateTimeFromTimestamp( dispute.charge.created, {
 						separator: ', ',
 						includeTime: true,
 				  } )
-				: '<Order Date>';
+				: __( '<Order Date>', 'woocommerce-payments' );
 
 			// Generate list of attachments based on provided evidence
 			const attachments = [];
@@ -121,81 +127,109 @@ const CoverLetter: React.FC< CoverLetterProps > = ( {
 			if ( dispute.evidence?.receipt ) {
 				attachmentCount++;
 				attachments.push(
-					`• Order receipt (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
-				);
-			}
-			if ( dispute.evidence?.receipt ) {
-				attachmentCount++;
-				attachments.push(
-					`• Order receipt (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Order receipt',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 			if ( dispute.evidence?.customer_communication ) {
 				attachmentCount++;
 				attachments.push(
-					`• Customer communication (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Customer communication',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 			if ( dispute.evidence?.customer_signature ) {
 				attachmentCount++;
 				attachments.push(
-					`• Customer signature (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Customer signature',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 			if ( dispute.evidence?.refund_policy ) {
 				attachmentCount++;
 				attachments.push(
-					`• Store refund policy (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Store refund policy',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 			if ( dispute.evidence?.shipping_documentation ) {
 				attachmentCount++;
 				attachments.push(
-					`• Proof of shipping (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Proof of shipping',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 			if ( dispute.evidence?.service_documentation ) {
 				attachmentCount++;
 				attachments.push(
-					`• Service documentation (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Service documentation',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 			if ( dispute.evidence?.cancellation_policy ) {
 				attachmentCount++;
 				attachments.push(
-					`• Cancellation policy (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Cancellation policy',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 			if ( dispute.evidence?.access_activity_log ) {
 				attachmentCount++;
 				attachments.push(
-					`• Access activity log (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Access activity log',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 			if ( dispute.evidence?.uncategorized_file ) {
 				attachmentCount++;
 				attachments.push(
-					`• Additional documentation (Attachment ${ String.fromCharCode(
-						64 + attachmentCount
-					) })`
+					`• ${ __(
+						'Additional documentation',
+						'woocommerce-payments'
+					) } (${ __(
+						'Attachment',
+						'woocommerce-payments'
+					) } ${ String.fromCharCode( 64 + attachmentCount ) })`
 				);
 			}
 
@@ -203,34 +237,91 @@ const CoverLetter: React.FC< CoverLetterProps > = ( {
 			const attachmentsList =
 				attachments.length > 0
 					? attachments.join( '\n' )
-					: `• AVS/CVV Match: Billing address and security code matched (Attachment A)
-• IP/Device Data: Location and device info used at purchase (Attachment B)
-• Customer Confirmation: Email or chat confirming purchase (Attachment C)
-• Usage Data: Login records for the digital goods (Attachment D)`;
+					: `• ${ __(
+							'AVS/CVV Match: Billing address and security code matched',
+							'woocommerce-payments'
+					  ) } (${ __( 'Attachment', 'woocommerce-payments' ) } A)
+• ${ __(
+							'IP/Device Data: Location and device info used at purchase',
+							'woocommerce-payments'
+					  ) } (${ __( 'Attachment', 'woocommerce-payments' ) } B)
+• ${ __(
+							'Customer Confirmation: Email or chat confirming purchase',
+							'woocommerce-payments'
+					  ) } (${ __( 'Attachment', 'woocommerce-payments' ) } C)
+• ${ __(
+							'Usage Data: Login records for the digital goods',
+							'woocommerce-payments'
+					  ) } (${ __( 'Attachment', 'woocommerce-payments' ) } D)`;
 
-			const generatedContent = `${ merchantName }
+			// Generate each section separately
+			const header = `${ merchantName }
 ${ merchantAddress }
 ${ merchantEmail }
 ${ merchantPhone }
-${ today }
+${ today }`;
 
-To: ${ acquiringBank }
-Subject: Chargeback Dispute – Case #${ caseNumber }
+			const recipient = `${ __(
+				'To:',
+				'woocommerce-payments'
+			) } ${ acquiringBank }
+${ __( 'Subject:', 'woocommerce-payments' ) } ${ __(
+				'Chargeback Dispute',
+				'woocommerce-payments'
+			) } – ${ __( 'Case', 'woocommerce-payments' ) } #${ caseNumber }`;
 
-Dear Dispute Resolution Team,
+			const greeting = __(
+				'Dear Dispute Resolution Team,',
+				'woocommerce-payments'
+			);
 
-We are submitting evidence in response to chargeback #${ caseNumber } for transaction #${ transactionId } on ${ transactionDate }.
+			const body = `${ __(
+				'We are submitting evidence in response to chargeback',
+				'woocommerce-payments'
+			) } #${ caseNumber } ${ __(
+				'for transaction',
+				'woocommerce-payments'
+			) } #${ transactionId } ${ __(
+				'on',
+				'woocommerce-payments'
+			) } ${ transactionDate }.
 
-Our records indicate that the customer and legitimate cardholder, ${ customerName }, ordered ${ product } on ${ orderDate }.
+${ __(
+	'Our records indicate that the customer and legitimate cardholder,',
+	'woocommerce-payments'
+) } ${ customerName }, ${ __(
+				'ordered',
+				'woocommerce-payments'
+			) } ${ product } ${ __(
+				'on',
+				'woocommerce-payments'
+			) } ${ orderDate }.
 
-To support our case, we are providing the following documentation:
+${ __(
+	'To support our case, we are providing the following documentation:',
+	'woocommerce-payments'
+) }
 ${ attachmentsList }
 
-Based on this information, we respectfully request that the chargeback be reversed. Please let me know if any further details are required.
+${ __(
+	'Based on this information, we respectfully request that the chargeback be reversed. Please let me know if any further details are required.',
+	'woocommerce-payments'
+) }`;
 
-Thank you,
+			const closing = `${ __( 'Thank you,', 'woocommerce-payments' ) }
 ${ merchantName }`;
 
+			// Combine all sections with proper spacing
+			const generatedContent = `${ header }
+
+${ recipient }
+
+${ greeting }
+
+${ body }
+
+${ closing }`;
+
 			setAutoGeneratedContent( generatedContent );
 			return generatedContent;
 		};

From d0920c43d090dddf4c12c622b9582edb1d26025d Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 16:48:22 -0300
Subject: [PATCH 28/42] change event record

---
 client/disputes/new-evidence/index.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 8d3f59ba09c..5b6aa515b08 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -346,12 +346,6 @@ ${ merchantName }`;
 					: 'wcpay_dispute_save_evidence_clicked'
 			);
 
-			recordEvent(
-				submit
-					? 'wcpay_dispute_submit_evidence_success'
-					: 'wcpay_dispute_save_evidence_success'
-			);
-
 			createSuccessNotice(
 				submit
 					? __( 'Evidence submitted!', 'woocommerce-payments' )
@@ -412,6 +406,13 @@ ${ merchantName }`;
 					submit,
 				},
 			} );
+
+			recordEvent(
+				submit
+					? 'wcpay_dispute_submit_evidence_success'
+					: 'wcpay_dispute_save_evidence_success'
+			);
+
 			setRedirectAfterSave( true );
 		} catch ( err ) {
 			recordEvent(

From 47a93cc3b9b5766eccff01501e6a14d8aed745f6 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 16:48:53 -0300
Subject: [PATCH 29/42] do not use dash

---
 client/disputes/new-evidence/shipping-details.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index 6703e7f96d3..44db11919c8 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -48,7 +48,7 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_carrier', value )
 					}
-					value={ localEvidence.shipping_carrier || '-' }
+					value={ localEvidence.shipping_carrier || '' }
 					disabled={ readOnly }
 				/>
 			</div>
@@ -78,7 +78,7 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_tracking_number', value )
 					}
-					value={ localEvidence.shipping_tracking_number || '-' }
+					value={ localEvidence.shipping_tracking_number || '' }
 					disabled={ readOnly }
 				/>
 			</div>
@@ -92,7 +92,7 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_address', value )
 					}
-					value={ localEvidence.shipping_address || '-' }
+					value={ localEvidence.shipping_address || '' }
 					disabled={ readOnly }
 				/>
 			</div>

From 8b7a713ac28a0a2e39ef6a79e850c216c8fa786e Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 16:49:27 -0300
Subject: [PATCH 30/42] Update
 client/disputes/new-evidence/shipping-details.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 client/disputes/new-evidence/shipping-details.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index 44db11919c8..a672ae80fb0 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -31,10 +31,13 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 	if ( ! dispute ) return null;
 
 	const handleChange = ( key: string, value: string ) => {
-		setLocalEvidence( ( prev: any ) => ( { ...prev, [ key ]: value } ) );
-		if ( onShippingDetailsChange ) {
-			onShippingDetailsChange( { ...localEvidence, [ key ]: value } );
-		}
+		setLocalEvidence( ( prev: any ) => {
+			const next = { ...prev, [ key ]: value };
+			if ( onShippingDetailsChange ) {
+				onShippingDetailsChange( next );
+			}
+			return next;
+		} );
 	};
 
 	return (

From 1e7f42e724242155e8f7f3d22f6ec8af21e9b631 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 17:08:42 -0300
Subject: [PATCH 31/42] fix non space on shipping address

---
 client/disputes/new-evidence/index.tsx            | 5 +++++
 client/disputes/new-evidence/shipping-details.tsx | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 5b6aa515b08..79af34e2c8e 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -388,6 +388,11 @@ ${ merchantName }`;
 					cancellation_policy: evidence.cancellation_policy,
 					access_activity_log: evidence.access_activity_log,
 					uncategorized_file: evidence.uncategorized_file,
+					// Add shipping details
+					shipping_carrier: evidence.shipping_carrier,
+					shipping_date: evidence.shipping_date,
+					shipping_tracking_number: evidence.shipping_tracking_number,
+					shipping_address: evidence.shipping_address,
 				} ).filter( ( [ value ] ) => value && value !== '' )
 			);
 
diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index a672ae80fb0..b5f66109351 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -51,7 +51,10 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_carrier', value )
 					}
-					value={ localEvidence.shipping_carrier || '' }
+					value={ ( localEvidence.shipping_carrier || '' ).replace(
+						/\n/g,
+						' '
+					) }
 					disabled={ readOnly }
 				/>
 			</div>

From 1a14b45c665338e70a9aede50432877cf3c836a0 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 17:12:47 -0300
Subject: [PATCH 32/42] oops

---
 client/disputes/new-evidence/shipping-details.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index b5f66109351..d11daf7e037 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -51,10 +51,7 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_carrier', value )
 					}
-					value={ ( localEvidence.shipping_carrier || '' ).replace(
-						/\n/g,
-						' '
-					) }
+					value={ localEvidence.shipping_carrier || '' }
 					disabled={ readOnly }
 				/>
 			</div>
@@ -98,7 +95,10 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					onChange={ ( value ) =>
 						handleChange( 'shipping_address', value )
 					}
-					value={ localEvidence.shipping_address || '' }
+					value={ ( localEvidence.shipping_address || '' ).replace(
+						/\n/g,
+						' '
+					) }
 					disabled={ readOnly }
 				/>
 			</div>

From b871e61af9c339909e833f7edd62a244c491c8f5 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 17:26:46 -0300
Subject: [PATCH 33/42] fix test

---
 .../new-evidence/test/shipping-details.test.tsx     | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/disputes/new-evidence/test/shipping-details.test.tsx b/client/disputes/new-evidence/test/shipping-details.test.tsx
index e97c37308a4..1af403ce985 100644
--- a/client/disputes/new-evidence/test/shipping-details.test.tsx
+++ b/client/disputes/new-evidence/test/shipping-details.test.tsx
@@ -45,12 +45,17 @@ describe( 'ShippingDetails', () => {
 		expect( screen.getByDisplayValue( '123 Ship St' ) ).toBeInTheDocument();
 	} );
 
-	it( 'renders dashes for missing data', () => {
+	it( 'renders empty strings for missing data', () => {
 		const dispute = { evidence: {} };
 		render( <ShippingDetails dispute={ dispute } /> );
-		expect( screen.getAllByDisplayValue( '-' ).length ).toBeGreaterThan(
-			0
-		);
+		const inputs = screen.getAllByRole( 'textbox' );
+		// SHIPPING CARRIER, TRACKING NUMBER, SHIPPING ADDRESS should be empty
+		expect( inputs[ 0 ] ).toHaveValue( '' ); // SHIPPING CARRIER
+		expect( inputs[ 2 ] ).toHaveValue( '' ); // TRACKING NUMBER
+		expect( inputs[ 3 ] ).toHaveValue( '' ); // SHIPPING ADDRESS
+		// SHIPPING DATE should be today's date
+		const today = new Date().toLocaleDateString();
+		expect( inputs[ 1 ] ).toHaveValue( today ); // SHIPPING DATE
 	} );
 
 	it( 'disables inputs when readOnly', () => {

From 4f807fd4fb51e0977ecb6c6d8ff96d1ca9295b37 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Wed, 4 Jun 2025 17:29:30 -0300
Subject: [PATCH 34/42] change event call

---
 client/disputes/new-evidence/index.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 76558d78c12..3c0fd41a1dd 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -185,12 +185,6 @@ export default ( { query }: { query: { id: string } } ) => {
 					: 'wcpay_dispute_save_evidence_clicked'
 			);
 
-			recordEvent(
-				submit
-					? 'wcpay_dispute_submit_evidence_success'
-					: 'wcpay_dispute_save_evidence_success'
-			);
-
 			createSuccessNotice(
 				submit
 					? __( 'Evidence submitted!', 'woocommerce-payments' )
@@ -259,6 +253,13 @@ export default ( { query }: { query: { id: string } } ) => {
 					submit,
 				},
 			} );
+
+			recordEvent(
+				submit
+					? 'wcpay_dispute_submit_evidence_success'
+					: 'wcpay_dispute_save_evidence_success'
+			);
+
 			setRedirectAfterSave( true );
 		} catch ( err ) {
 			recordEvent(

From 2d5df615fed2bff47408020a384943aea9bbe037 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 5 Jun 2025 13:02:51 -0300
Subject: [PATCH 35/42] fix charset

---
 client/disputes/new-evidence/cover-letter.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/disputes/new-evidence/cover-letter.tsx b/client/disputes/new-evidence/cover-letter.tsx
index 260e643333f..d22d969ed11 100644
--- a/client/disputes/new-evidence/cover-letter.tsx
+++ b/client/disputes/new-evidence/cover-letter.tsx
@@ -358,6 +358,7 @@ ${ closing }`;
 			<!DOCTYPE html>
 			<html>
 			<head>
+				<meta charset="UTF-8">
 				<title>${ __( 'Cover Letter', 'woocommerce-payments' ) }</title>
 				<style>
 					body {

From 8602f12739fa52c7e8cf8992f3e3839e9bf1127d Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 5 Jun 2025 14:34:43 -0300
Subject: [PATCH 36/42] fix file not being removed

---
 client/disputes/new-evidence/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 3c0fd41a1dd..a92830dd45e 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -233,9 +233,7 @@ export default ( { query }: { query: { id: string } } ) => {
 					shipping_date: evidence.shipping_date,
 					shipping_tracking_number: evidence.shipping_tracking_number,
 					shipping_address: evidence.shipping_address,
-				} ).filter(
-					( [ , value ] ) => value !== undefined && value !== ''
-				)
+				} ).filter( ( [ value ] ) => value && value !== '' )
 			);
 
 			// Update metadata with the current productType

From b13e99d5a03eb0e10f70c3bcad130fb709eb50e7 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 5 Jun 2025 16:53:03 -0300
Subject: [PATCH 37/42] fix cover letter notice not behaving properlly and
 upload removal

---
 client/disputes/new-evidence/index.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index a92830dd45e..199b270171e 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -242,7 +242,7 @@ export default ( { query }: { query: { id: string } } ) => {
 				__product_type: productType,
 			};
 
-			await apiFetch( {
+			const updatedDispute = await apiFetch( {
 				path,
 				method: 'post',
 				data: {
@@ -252,6 +252,8 @@ export default ( { query }: { query: { id: string } } ) => {
 				},
 			} );
 
+			setDispute( updatedDispute );
+
 			recordEvent(
 				submit
 					? 'wcpay_dispute_submit_evidence_success'
@@ -283,15 +285,11 @@ export default ( { query }: { query: { id: string } } ) => {
 
 	// --- Handle step changes ---
 	const handleStepChange = async ( newStep: number ) => {
-		// Save current evidence before changing step
-		await doSave( false );
+		// // Save current evidence before changing step
+		// await doSave( false );
 
 		// Update step
 		setCurrentStep( newStep );
-
-		// Update cover letter with latest evidence
-		const updatedDispute = await apiFetch( { path } );
-		setDispute( updatedDispute );
 	};
 
 	// --- Read-only logic ---
@@ -667,9 +665,9 @@ export default ( { query }: { query: { id: string } } ) => {
 						value={ coverLetter }
 						onChange={ ( value, isManualEdit ) => {
 							setCoverLetter( value );
-							if ( isManualEdit ) {
-								setIsCoverLetterManuallyEdited( true );
-							}
+							setIsCoverLetterManuallyEdited(
+								isManualEdit || false
+							);
 						} }
 						dispute={ dispute }
 						bankName={ bankName }

From f974bbdd1a31d0b13279c823299c799b114b9250 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 5 Jun 2025 16:57:40 -0300
Subject: [PATCH 38/42] keep this

---
 client/disputes/new-evidence/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index 199b270171e..5eddac80d84 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -286,7 +286,7 @@ export default ( { query }: { query: { id: string } } ) => {
 	// --- Handle step changes ---
 	const handleStepChange = async ( newStep: number ) => {
 		// // Save current evidence before changing step
-		// await doSave( false );
+		await doSave( false );
 
 		// Update step
 		setCurrentStep( newStep );

From 81b467cf46f192491b076482089199511842b39b Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 5 Jun 2025 17:21:13 -0300
Subject: [PATCH 39/42] set type date

---
 client/disputes/new-evidence/shipping-details.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index d3de8b7176c..025a111fa6c 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -45,6 +45,7 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 					label={ __( 'SHIPPING DATE', 'woocommerce-payments' ) }
 					// eslint-disable-next-line @typescript-eslint/no-empty-function
 					onChange={ () => {} }
+					type="date"
 					value={ date.toLocaleDateString() }
 					disabled={ readOnly }
 				/>

From b4ef404b272f0e51ef09842c0352ea8f633d707f Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Thu, 5 Jun 2025 17:56:46 -0300
Subject: [PATCH 40/42] fix test

---
 client/disputes/new-evidence/shipping-details.tsx  | 14 +++++++-------
 .../new-evidence/test/shipping-details.test.tsx    |  9 +++++----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/client/disputes/new-evidence/shipping-details.tsx b/client/disputes/new-evidence/shipping-details.tsx
index 0e8312a84fe..48e3e80b39c 100644
--- a/client/disputes/new-evidence/shipping-details.tsx
+++ b/client/disputes/new-evidence/shipping-details.tsx
@@ -58,16 +58,16 @@ const ShippingDetails: React.FC< ShippingDetailsProps > = ( {
 			<div className="wcpay-dispute-evidence-shipping-details__field-group">
 				<TextControl
 					label={ __( 'SHIPPING DATE', 'woocommerce-payments' ) }
-					onChange={ ( value ) =>
-						handleChange( 'shipping_date', value )
-					}
+					onChange={ ( value ) => {
+						handleChange( 'shipping_date', value );
+					} }
 					type="date"
 					value={
 						localEvidence.shipping_date
-							? new Date(
-									localEvidence.shipping_date
-							  ).toLocaleDateString()
-							: new Date().toLocaleDateString()
+							? new Date( localEvidence.shipping_date )
+									.toISOString()
+									.split( 'T' )[ 0 ]
+							: new Date().toISOString().split( 'T' )[ 0 ]
 					}
 					disabled={ readOnly }
 				/>
diff --git a/client/disputes/new-evidence/test/shipping-details.test.tsx b/client/disputes/new-evidence/test/shipping-details.test.tsx
index 1af403ce985..5846366cfbe 100644
--- a/client/disputes/new-evidence/test/shipping-details.test.tsx
+++ b/client/disputes/new-evidence/test/shipping-details.test.tsx
@@ -51,11 +51,12 @@ describe( 'ShippingDetails', () => {
 		const inputs = screen.getAllByRole( 'textbox' );
 		// SHIPPING CARRIER, TRACKING NUMBER, SHIPPING ADDRESS should be empty
 		expect( inputs[ 0 ] ).toHaveValue( '' ); // SHIPPING CARRIER
-		expect( inputs[ 2 ] ).toHaveValue( '' ); // TRACKING NUMBER
-		expect( inputs[ 3 ] ).toHaveValue( '' ); // SHIPPING ADDRESS
+		expect( inputs[ 1 ] ).toHaveValue( '' ); // TRACKING NUMBER
+		expect( inputs[ 2 ] ).toHaveValue( '' ); // SHIPPING ADDRESS
 		// SHIPPING DATE should be today's date
-		const today = new Date().toLocaleDateString();
-		expect( inputs[ 1 ] ).toHaveValue( today ); // SHIPPING DATE
+		const dateInput = screen.getByLabelText( /SHIPPING DATE/i );
+		const today = new Date().toISOString().split( 'T' )[ 0 ];
+		expect( dateInput ).toHaveValue( today ); // SHIPPING DATE
 	} );
 
 	it( 'disables inputs when readOnly', () => {

From c3e4d735350f7bd2515bf607eba9d56f2fef8ae9 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 6 Jun 2025 13:11:14 -0300
Subject: [PATCH 41/42] lint

---
 client/disputes/new-evidence/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/disputes/new-evidence/index.tsx b/client/disputes/new-evidence/index.tsx
index f166c1b0da5..c5ebdf8c3b4 100644
--- a/client/disputes/new-evidence/index.tsx
+++ b/client/disputes/new-evidence/index.tsx
@@ -240,7 +240,7 @@ export default ( { query }: { query: { id: string } } ) => {
 					cancellation_policy: evidence.cancellation_policy,
 					access_activity_log: evidence.access_activity_log,
 					uncategorized_file: evidence.uncategorized_file,
-                    uncategorized_text: coverLetter,
+					uncategorized_text: coverLetter,
 					// Add shipping details
 					shipping_carrier: shippingCarrier,
 					shipping_date: shippingDate,
@@ -264,7 +264,7 @@ export default ( { query }: { query: { id: string } } ) => {
 					submit,
 				},
 			} );
-            
+
 			setDispute( updatedDispute );
 
 			recordEvent(

From 001b5fdde4a5c17f3f142c1a7f2138b8443cbad4 Mon Sep 17 00:00:00 2001
From: Rafael Meneses <meneses.tio@gmail.com>
Date: Fri, 6 Jun 2025 13:18:15 -0300
Subject: [PATCH 42/42] changelog

---
 changelog/cover-letter-fraudulent-reason | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 changelog/cover-letter-fraudulent-reason

diff --git a/changelog/cover-letter-fraudulent-reason b/changelog/cover-letter-fraudulent-reason
new file mode 100644
index 00000000000..daa71dbc5ad
--- /dev/null
+++ b/changelog/cover-letter-fraudulent-reason
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Add cover letter for fraudulent reason