diff --git a/src/scenes/Products/Detail/ProductDetail.graphql b/src/scenes/Products/Detail/ProductDetail.graphql
index 5886cb7d36..49d983d886 100644
--- a/src/scenes/Products/Detail/ProductDetail.graphql
+++ b/src/scenes/Products/Detail/ProductDetail.graphql
@@ -24,6 +24,9 @@ fragment ProductDetail on Product {
describeCompletion {
value
}
+ placeholderDescription {
+ value
+ }
engagement {
...EngagementBreadcrumb
partnershipsProducingMediums {
diff --git a/src/scenes/Products/Detail/ProductDetailHeader.tsx b/src/scenes/Products/Detail/ProductDetailHeader.tsx
index 77a82cb477..0d3c5ac485 100644
--- a/src/scenes/Products/Detail/ProductDetailHeader.tsx
+++ b/src/scenes/Products/Detail/ProductDetailHeader.tsx
@@ -5,7 +5,7 @@ import {
Tooltip,
Typography,
} from '@material-ui/core';
-import { Edit } from '@material-ui/icons';
+import { CropFreeOutlined, Edit } from '@material-ui/icons';
import { Skeleton } from '@material-ui/lab';
import React from 'react';
import { Helmet } from 'react-helmet-async';
@@ -17,10 +17,13 @@ import { Redacted } from '../../../components/Redacted';
import { Link } from '../../../components/Routing';
import { ProductDetailFragment as Product } from './ProductDetail.generated';
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
nameRedacted: {
width: '50%',
},
+ placeholderIcon: {
+ marginLeft: theme.spacing(1),
+ },
}));
export const ProductDetailHeader = ({ product }: { product?: Product }) => {
@@ -29,6 +32,7 @@ export const ProductDetailHeader = ({ product }: { product?: Product }) => {
const language = product?.engagement.language.value;
const langName = language?.name.value ?? language?.displayName.value;
const project = product?.engagement.project;
+ const placeholderDescription = product?.placeholderDescription.value;
return (
<>
@@ -54,6 +58,9 @@ export const ProductDetailHeader = ({ product }: { product?: Product }) => {
width="100%"
/>
)}
+ {placeholderDescription && (
+
+ )}
diff --git a/src/scenes/Products/Edit/EditProduct.tsx b/src/scenes/Products/Edit/EditProduct.tsx
index 185c48e6fb..03cadcba73 100644
--- a/src/scenes/Products/Edit/EditProduct.tsx
+++ b/src/scenes/Products/Edit/EditProduct.tsx
@@ -133,6 +133,7 @@ export const EditProduct = () => {
}
: undefined,
title: '',
+ placeholderDescription: product.placeholderDescription.value,
...(product.__typename === 'DirectScriptureProduct'
? {
productType: product.__typename,
diff --git a/src/scenes/Products/ProductForm/PlaceholderDescriptionSection.tsx b/src/scenes/Products/ProductForm/PlaceholderDescriptionSection.tsx
new file mode 100644
index 0000000000..88b27e8e22
--- /dev/null
+++ b/src/scenes/Products/ProductForm/PlaceholderDescriptionSection.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { TextField } from '../../../components/form';
+import { DefaultAccordion } from './DefaultAccordion';
+import { SectionProps } from './ProductFormFields';
+
+export const PlaceholderDescriptionSection = ({
+ accordionState,
+}: SectionProps) => {
+ return (
+ <>>}
+ >
+
+
+ );
+};
diff --git a/src/scenes/Products/ProductForm/ProductForm.graphql b/src/scenes/Products/ProductForm/ProductForm.graphql
index a58581776f..caa90a1fe7 100644
--- a/src/scenes/Products/ProductForm/ProductForm.graphql
+++ b/src/scenes/Products/ProductForm/ProductForm.graphql
@@ -42,6 +42,11 @@ fragment ProductForm on Product {
canEdit
value
}
+ placeholderDescription {
+ canRead
+ canEdit
+ value
+ }
... on DirectScriptureProduct {
unspecifiedScripture {
canRead
diff --git a/src/scenes/Products/ProductForm/ProductFormFields.tsx b/src/scenes/Products/ProductForm/ProductFormFields.tsx
index 34f596a7c2..3c9e4afbb4 100644
--- a/src/scenes/Products/ProductForm/ProductFormFields.tsx
+++ b/src/scenes/Products/ProductForm/ProductFormFields.tsx
@@ -9,6 +9,7 @@ import { MethodologySection } from './MethodologySection';
import { OtherProductSection } from './OtherProductSection';
import { PartnershipProducingMediumsSection } from './PartnershipProducingMediumsSection';
import { EditPartnershipsProducingMediumsInfoFragment } from './PartnershipsProducingMediums.generated';
+import { PlaceholderDescriptionSection } from './PlaceholderDescriptionSection';
import { ProductFormValues } from './ProductForm';
import {
ProductForm_DerivativeScriptureProduct_Fragment as DerivativeScriptureProduct,
@@ -46,6 +47,7 @@ export type SectionProps = FormProps & {
const sections: ReadonlyArray> = [
GoalsSection,
ProductSection,
+ PlaceholderDescriptionSection,
OtherProductSection,
ScriptureReferencesSection,
MediumsSection,
diff --git a/src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql b/src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql
index f8ef737f38..87f9affb9b 100644
--- a/src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql
+++ b/src/scenes/ProgressReports/Detail/ProgressReportDetail.graphql
@@ -66,4 +66,7 @@ fragment ProductInfoForProgressReport on Product {
}
}
}
+ placeholderDescription {
+ value
+ }
}