Add appeal workflow for blocked listings

apps/ui-sharethrift/package.json

@@ -1,63 +1,63 @@
 {
-	"name": "@sthrift/ui-sharethrift",
-	"private": true,
-	"version": "0.0.0",
-	"type": "module",
-	"scripts": {
-		"start": "vite",
-		"build": "tsc -b && vite build",
-		"lint": "eslint .",
-		"preview": "vite preview",
-		"tswatch": "tsc --build --watch",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"test": "vitest run",
-		"test:coverage": "vitest run --coverage",
-		"test:watch": "vitest"
-	},
-	"dependencies": {
-		"@ant-design/icons": "^6.1.0",
-		"@ant-design/v5-patch-for-react-19": "^1.0.3",
-		"@apollo/client": "^4.0.7",
-		"@sthrift/ui-components": "workspace:*",
-		"antd": "^5.27.1",
-		"crypto-hash": "^3.1.0",
-		"dayjs": "^1.11.18",
-		"graphql": "^16.11.0",
-		"lodash": "^4.17.21",
-		"react": "^19.1.1",
-		"react-dom": "^19.1.1",
-		"react-oidc-context": "^3.3.0",
-		"react-router-dom": "^7.8.0",
-		"rxjs": "^7.8.2"
-	},
-	"devDependencies": {
-		"@cellix/typescript-config": "workspace:*",
-		"@cellix/vitest-config": "workspace:*",
-		"@chromatic-com/storybook": "^4.1.0",
-		"@eslint/js": "^9.30.1",
-		"@graphql-typed-document-node/core": "^3.2.0",
-		"@storybook/addon-a11y": "^9.1.17",
-		"@storybook/addon-docs": "^9.1.17",
-		"@storybook/addon-vitest": "^9.1.17",
-		"@storybook/react": "^9.1.17",
-		"@storybook/react-vite": "^9.1.17",
-		"@testing-library/jest-dom": "^6.9.1",
-		"@types/lodash": "^4.17.20",
-		"@types/react": "^19.1.9",
-		"@types/react-dom": "^19.1.7",
-		"@vitejs/plugin-react": "^4.7.0",
-		"@vitest/browser": "3.2.4",
-		"@vitest/coverage-v8": "^3.2.4",
-		"eslint": "^9.30.1",
-		"eslint-plugin-react-hooks": "^5.2.0",
-		"eslint-plugin-react-refresh": "^0.4.20",
-		"globals": "^16.3.0",
-		"storybook": "catalog:",
-		"typescript": "~5.8.3",
-		"typescript-eslint": "^8.35.1",
-		"vite": "^7.1.2",
-		"vitest": "^3.2.4"
-	},
-	"license": "MIT"
+  "name": "@sthrift/ui-sharethrift",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "tswatch": "tsc --build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@ant-design/v5-patch-for-react-19": "^1.0.3",
+    "@apollo/client": "^4.0.7",
+    "@sthrift/ui-components": "workspace:*",
+    "antd": "^5.27.1",
+    "crypto-hash": "^3.1.0",
+    "dayjs": "^1.11.18",
+    "graphql": "^16.11.0",
+    "lodash": "^4.17.21",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-oidc-context": "^3.3.0",
+    "react-router-dom": "^7.8.0",
+    "rxjs": "^7.8.2"
+  },
+  "devDependencies": {
+    "@cellix/typescript-config": "workspace:*",
+    "@cellix/vitest-config": "workspace:*",
+    "@chromatic-com/storybook": "^4.1.0",
+    "@eslint/js": "^9.30.1",
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "@storybook/addon-a11y": "^9.1.17",
+    "@storybook/addon-docs": "^9.1.17",
+    "@storybook/addon-vitest": "^9.1.17",
+    "@storybook/react": "^9.1.17",
+    "@storybook/react-vite": "^9.1.17",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/lodash": "^4.17.20",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "storybook": "catalog:",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.1.2",
+    "vitest": "^3.2.4"
+  },
+  "license": "MIT"
 }

apps/ui-sharethrift/src/components/layouts/home/account/admin-dashboard/components/admin-listings-table/admin-listings-table.container.graphql

@@ -1,12 +1,12 @@
 # Inline fragment (previously in admin-listings-table.fragment.graphql)
 fragment AdminListingFields on ListingAll {
-    id
-    title
-    state
-    images
-    createdAt
-    sharingPeriodStart
-    sharingPeriodEnd
+  id
+  title
+  state
+  images
+  createdAt
+  sharingPeriodStart
+  sharingPeriodEnd
 }
 
 query AdminListingsTableContainerAdminListings(
@@ -42,5 +42,9 @@ mutation AdminListingsTableContainerDeleteListing($id: ObjectID!) {
 }
 
 mutation AdminListingsTableContainerUnblockListing($id: ObjectID!) {
-  unblockListing(id: $id)
+  unblockListing(id: $id) {
+    id
+    state
+    success
+  }
 }

apps/ui-sharethrift/src/components/layouts/home/account/admin-dashboard/components/admin-listings-table/admin-listings-table.container.stories.tsx

@@ -8,7 +8,7 @@ import {
 import {
 	AdminListingsTableContainerAdminListingsDocument,
 	AdminListingsTableContainerDeleteListingDocument,
-	AdminListingsTableContainerUnblockListingDocument,
+    AdminListingsTableContainerUnblockListingDocument
 } from '../../../../../../../generated.tsx';
 
 const meta: Meta<typeof AdminListings> = {
@@ -56,10 +56,11 @@ const meta: Meta<typeof AdminListings> = {
 					},
 					result: {
 						data: {
-							unblockItemListing: {
-								__typename: 'MutationStatus',
+							unblockListing: {
+								__typename: 'BlockListingResult',
+								id: 'listing-1',
+								state: 'Published',
 								success: true,
-								errorMessage: null,
 							},
 						},
 					},

apps/ui-sharethrift/src/components/layouts/home/account/admin-dashboard/components/admin-listings-table/admin-listings-table.view-listing.stories.tsx

@@ -5,7 +5,8 @@ import { withMockApolloClient, withMockRouter } from '../../../../../../../test-
 import {
 	AdminListingsTableContainerAdminListingsDocument,
 	AdminListingsTableContainerDeleteListingDocument,
-	AdminListingsTableContainerUnblockListingDocument,
+	BlockListingContainerUnblockListingDocument,
+    AdminListingsTableContainerUnblockListingDocument
 } from '../../../../../../../generated.tsx';
 
 const meta = {
@@ -49,14 +50,15 @@ const meta = {
 				},
 				{
 					request: {
-						query: AdminListingsTableContainerUnblockListingDocument,
+						query: BlockListingContainerUnblockListingDocument,
 					},
 					result: {
 						data: {
-							unblockItemListing: {
-								__typename: 'MutationStatus',
+							unblockListing: {
+								__typename: 'BlockListingResult',
+								id: 'listing-123',
+								state: 'Published',
 								success: true,
-								errorMessage: null,
 							},
 						},
 					},

apps/ui-sharethrift/src/components/layouts/home/account/admin-dashboard/components/admin-listings-table/admin-listings-table.view-listing.tsx

@@ -16,7 +16,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import {
 	AdminListingsTableContainerAdminListingsDocument,
 	AdminListingsTableContainerDeleteListingDocument,
-	AdminListingsTableContainerUnblockListingDocument,
+	BlockListingContainerUnblockListingDocument,
 } from '../../../../../../../generated.tsx';
 
 export function AdminViewListing(): ReactElement {
@@ -37,7 +37,7 @@ export function AdminViewListing(): ReactElement {
 	);
 
 	const [unblockListingMutation] = useMutation(
-		AdminListingsTableContainerUnblockListingDocument,
+		BlockListingContainerUnblockListingDocument,
 	);
 
 	const [deleteListingMutation] = useMutation(

apps/ui-sharethrift/src/components/layouts/home/components/view-listing/appeal-confirmation-modal.tsx

@@ -0,0 +1,42 @@
+import { Modal, Typography } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import type React from 'react';
+
+const { Paragraph } = Typography;
+
+export interface AppealConfirmationModalProps {
+	visible: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+	loading?: boolean;
+}
+
+export const AppealConfirmationModal: React.FC<
+	AppealConfirmationModalProps
+> = ({ visible, onConfirm, onCancel, loading }) => {
+	return (
+		<Modal
+			title={
+				<span>
+					<ExclamationCircleOutlined style={{ color: '#faad14', marginRight: 8 }} />
+					Confirm Appeal
+				</span>
+			}
+			open={visible}
+			onOk={onConfirm}
+			onCancel={onCancel}
+			okText="Appeal"
+			cancelText="Cancel"
+			confirmLoading={loading}
+			okButtonProps={{ danger: true }}
+		>
+			<Paragraph>
+				Before you appeal, make sure you've reviewed and updated your listing to
+				comply with our guidelines.
+			</Paragraph>
+			<Paragraph strong>
+				Appeals without changes may be blocked. Are you sure you want to proceed?
+			</Paragraph>
+		</Modal>
+	);
+};

apps/ui-sharethrift/src/components/layouts/home/components/view-listing/block-information-modal.tsx

@@ -0,0 +1,88 @@
+import { Alert, Button, Modal, Typography } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import type React from 'react';
+
+const { Paragraph, Title } = Typography;
+
+export interface BlockInformationModalProps {
+	visible: boolean;
+	onClose: () => void;
+	onEditListing: () => void;
+	onAppealBlock: () => void;
+	blockReason?: string;
+	blockDescription?: string;
+	appealRequested?: boolean;
+}
+
+export const BlockInformationModal: React.FC<BlockInformationModalProps> = ({
+	visible,
+	onClose,
+	onEditListing,
+	onAppealBlock,
+	blockReason,
+	blockDescription,
+	appealRequested,
+}) => {
+	return (
+		<Modal
+			title={
+				<span>
+					<ExclamationCircleOutlined style={{ color: '#ff4d4f', marginRight: 8 }} />
+					Block Information
+				</span>
+			}
+			open={visible}
+			onCancel={onClose}
+			footer={[
+				<Button key="cancel" onClick={onClose}>
+					Cancel
+				</Button>,
+				<Button key="edit" type="primary" onClick={onEditListing}>
+					Edit Listing
+				</Button>,
+				<Button
+					key="appeal"
+					type="primary"
+					danger
+					onClick={onAppealBlock}
+					disabled={appealRequested}
+				>
+					{appealRequested ? 'Appeal Submitted' : 'Appeal Block'}
+				</Button>,
+			]}
+		>
+			<div style={{ marginBottom: 16 }}>
+				<Title level={5} style={{ marginBottom: 8 }}>
+					Reason
+				</Title>
+				<Paragraph>{blockReason || 'No reason provided'}</Paragraph>
+			</div>
+
+			<div style={{ marginBottom: 16 }}>
+				<Title level={5} style={{ marginBottom: 8 }}>
+					Description
+				</Title>
+				<Paragraph>{blockDescription || 'No description provided'}</Paragraph>
+			</div>
+
+			{appealRequested && (
+				<div style={{ marginTop: 16 }}>
+					<Title level={5} style={{ marginBottom: 8 }}>
+						Status
+					</Title>
+					<Paragraph>Appeal Requested</Paragraph>
+				</div>
+			)}
+
+			{!appealRequested && (
+				<Alert
+					message="Before you appeal, make sure you've reviewed and updated your listing to address any issues. Appeals without changes may be blocked."
+					type="info"
+					showIcon
+					icon={<ExclamationCircleOutlined />}
+					style={{ marginTop: 16 }}
+				/>
+			)}
+		</Modal>
+	);
+};