WIP: Basic preview changes

public/src/components/channelManagement/gutterTests/gutterTestEditor.tsx

@@ -10,14 +10,20 @@ import CampaignSelector from '../CampaignSelector';
 import TestEditorContextTargeting from '../testEditorContextTargeting';
 import TestEditorTargetAudienceSelector from '../testEditorTargetAudienceSelector';
 import { ControlProportionSettings } from '../helpers/controlProportionSettings';
+import GutterVariantPreview from './gutterVariantPreview';
+import { useStyles } from '../helpers/testEditorStyles';
+import VariantSummary from '../../tests/variants/variantSummary';
+import VariantsEditor from '../../tests/variants/variantsEditor';
+import { TestMethodologyEditor } from '../TestMethodologyEditor';
+import TestVariantsSplitEditor from '../../tests/variants/testVariantsSplitEditor';
 
 const GutterTestEditor: React.FC<ValidatedTestEditorProps<GutterTest>> = ({
   test,
   userHasTestLocked,
   onTestChange,
   setValidationStatusForField,
 }: ValidatedTestEditorProps<GutterTest>) => {
-  // const classes = useStyles();
+  const classes = useStyles();
 
   const updateTest = (updatedTest: GutterTest): void => {
     onTestChange({
@@ -81,7 +87,7 @@ const GutterTestEditor: React.FC<ValidatedTestEditorProps<GutterTest>> = ({
         setValidationStatusForField(variant.name, isValid)
       }
       onVariantChange={onVariantChange}
-      // onDelete={(): void => onVariantDelete(variant.name)}
+      onDelete={(): void => onVariantDelete(variant.name)}
     />
   );
 
@@ -90,11 +96,11 @@ const GutterTestEditor: React.FC<ValidatedTestEditorProps<GutterTest>> = ({
       <VariantSummary
         name={variant.name}
         testName={test.name}
-        testType="BANNER"
+        testType="GUTTER"
         isInEditMode={userHasTestLocked}
-        topButton={<BannerVariantPreview variant={variant} design={design} />}
+        topButton={<GutterVariantPreview variant={variant} />}
         platform="DOTCOM" // hardcoded as gutters are only supported in DCR
-        articleType="Standard"
+        articleType="Liveblog"
       />
     );
   };
@@ -185,7 +191,7 @@ const GutterTestEditor: React.FC<ValidatedTestEditorProps<GutterTest>> = ({
           </Typography>
 
           <TestEditorContextTargeting
-            contextTargeting={test.contextTargeting}
+            contextTargeting={test.contextTargeting} // TODO: need to remove some tag stuff
             editMode={userHasTestLocked}
             updateContextTargeting={contextTargeting => updateTest({ ...test, contextTargeting })}
           />
@@ -201,16 +207,16 @@ const GutterTestEditor: React.FC<ValidatedTestEditorProps<GutterTest>> = ({
             onRegionsUpdate={onRegionsChange}
             selectedCohort={test.userCohort}
             onCohortChange={onCohortChange}
-            selectedDeviceType={test.deviceType ?? 'All'}
-            onDeviceTypeChange={onDeviceTypeChange}
+            selectedDeviceType={test.deviceType ?? 'All'} // TODO: need to find a way to remove.
+            onDeviceTypeChange={onDeviceTypeChange} // TODO: need to find a way to remove.
             isDisabled={!userHasTestLocked}
             showSupporterStatusSelector={true}
-            showDeviceTypeSelector={true}
+            showDeviceTypeSelector={false}
             showSignedInStatusSelector={true}
-            selectedSignedInStatus={test.signedInStatus}
-            onSignedInStatusChange={onSignedInStatusChange}
-            selectedConsentStatus={test.consentStatus}
-            onConsentStatusChange={onConsentStatusChange}
+            // selectedSignedInStatus={test.signedInStatus}
+            onSignedInStatusChange={onSignedInStatusChange} // TODO: need to find a way to remove?
+            // selectedConsentStatus={test.consentStatus} // TODO: need to find a way to remove.
+            onConsentStatusChange={onConsentStatusChange} // TODO: need to find a way to remove.
             showConsentStatusSelector={true}
           />
         </div>

public/src/components/channelManagement/gutterTests/gutterVariantPreview.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { GutterVariant } from '../../../models/gutter';
+import { buildStorybookUrl } from '../helpers/dcrStorybook';
+import { Theme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+
+interface GutterProps {
+  url: string;
+  onCtaClick: () => void; // current props.
+  // TODO: once DCR done, implement the rest
+}
+// TODO: remove this lint line when props passed in properly later
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const buildProps = (variant: GutterVariant): GutterProps => ({
+  url: ' ',
+  onCtaClick: () => {},
+  // TODO: update with proper props later!
+});
+
+const useStyles = makeStyles(({}: Theme) => ({
+  container: {
+    width: '620px',
+  },
+  iframe: {
+    width: '620px',
+    height: '800px',
+  },
+}));
+
+interface GutterVariantPreviewProps {
+  variant: GutterVariant;
+}
+/**
+ * Uses the DCR storybook to render the component, iframed.
+ * Props are passed in the args parameter in the url.
+ */
+const GutterVariantPreview: React.FC<GutterVariantPreviewProps> = ({
+  variant,
+}: GutterVariantPreviewProps) => {
+  const classes = useStyles();
+
+  const props = buildProps(variant);
+
+  const storyName = 'components-marketing-stickyliveblogask--default';
+  const storybookUrl = buildStorybookUrl(storyName, props);
+
+  return (
+    <div>
+      <iframe className={classes.iframe} src={storybookUrl}></iframe>
+    </div>
+  );
+};
+
+export default GutterVariantPreview;

public/src/components/channelManagement/gutterTests/variantCtasEditor.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles(({ spacing }: Theme) => ({
 
 interface VariantCtasEditorProps {
   primaryCta: Cta;
-  updatePrimaryCta: (updatedCta: Cta) => void;
+  updatePrimaryCta: (updatedCta?: Cta) => void;
   onValidationChange: (isValid: boolean) => void;
   isDisabled: boolean;
 }

public/src/components/channelManagement/helpers/shared.ts

@@ -7,7 +7,7 @@ export interface Variant {
 
 export type TestPlatform = 'AMP' | 'APPLE_NEWS' | 'DOTCOM';
 
-export type TestType = 'EPIC' | 'BANNER' | 'HEADER';
+export type TestType = 'EPIC' | 'BANNER' | 'GUTTER' | 'HEADER';
 
 export type EpicModuleName = 'ContributionsEpic' | 'ContributionsLiveblogEpic';
 

public/src/components/tests/variants/variantSummaryWebPreviewButton.tsx

@@ -22,7 +22,7 @@ const getHostName = (stage: Stage, platform: TestPlatform): string => {
 
 const getChannelName = (testType: TestType, articleType: ArticleType): string => {
   if (testType === 'EPIC' && articleType === 'Liveblog') {
-    return 'liveblog-epic';
+    return 'liveblog-epic'; // TODO: add new one in here for liveblog-gutter
   } else {
     return testType.toLowerCase();
   }

public/src/models/gutter.ts

@@ -1,5 +1,7 @@
+import { ControlProportionSettings } from '../components/channelManagement/helpers/controlProportionSettings';
 import {
   Cta,
+  PageContextTargeting,
   Status,
   Test,
   UserCohort,
@@ -25,8 +27,9 @@ export interface GutterTest extends Test {
   userCohort: UserCohort;
   locations: Region[];
   variants: GutterVariant[];
-  contextTargeting: { excludedTagIds: [] };
-  // controlProportionSettings?: ControlProportionSettings; // not sure what this is for
+  // TODO: we don't want the deviceType: but it's compulsory currently. Can we investigate the Epic configuration tool?
+  // contextTargeting: { excludedTagIds: [] };
+  controlProportionSettings?: ControlProportionSettings; // AB test proportions
   campaignName?: string;
-  //contextTargeting: PageContextTargeting; // not sure what this is for
+  contextTargeting: PageContextTargeting; // TODO: tags but we just want the excluded tags...
 }