Fix preview mode toolbar

graphcommerce-org · Nov 18, 2024 · b47abc4 · b47abc4
1 parent 82aa8be
commit b47abc4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/packages/ecommerce-ui/components/PreviewMode/PreviewMode.tsx b/packages/ecommerce-ui/components/PreviewMode/PreviewMode.tsx
@@ -1,6 +1,5 @@
 import { PreviewData } from '@graphcommerce/graphql'
 import {
-  Button,
   IconSvg,
   MessageSnackbar,
   iconChevronRight,
@@ -16,7 +15,6 @@ import { TextFieldElement } from '../FormComponents'
 import { LightTooltip } from './LightTooltip'
 import { PreviewModeActions } from './PreviewModeActions'
 import { PreviewModeToolbar } from './PreviewModeToolbar'
-import { previewModeDefaults } from './previewModeDefaults'
 
 export function getPreviewUrl() {
   const url = new URL(window.location.href)
@@ -26,9 +24,7 @@ export function getPreviewUrl() {
 }
 
 function PreviewModeEnabled() {
-  const form = useForm<{ secret: string; previewData: PreviewData }>({
-    defaultValues: { previewData: previewModeDefaults() },
-  })
+  const form = useForm<{ secret: string; previewData: PreviewData }>({})
 
   const submit = form.handleSubmit((formValues) => {
     const url = getPreviewUrl()
@@ -102,7 +98,14 @@ function PreviewModeEnabled() {
 }
 
 function PreviewModeDisabled() {
-  const form = useForm<{ secret: string }>({})
+  const form = useForm<{ secret: string }>({
+    defaultValues: {
+      secret:
+        process.env.NODE_ENV === 'development'
+          ? (import.meta.graphCommerce.previewSecret ?? '')
+          : '',
+    },
+  })
 
   const submit = form.handleSubmit((formValues) => {
     const url = getPreviewUrl()

diff --git a/packages/hygraph-ui/plugins/HygraphPreviewModeToolbar.tsx b/packages/hygraph-ui/plugins/HygraphPreviewModeToolbar.tsx
@@ -3,6 +3,7 @@ import {
   type PreviewModeToolbarProps,
   SelectElement,
   previewModeDefaults,
+  useWatch,
 } from '@graphcommerce/ecommerce-ui'
 import { TypedDocumentNode, gql, useQuery } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
@@ -40,16 +41,18 @@ const HygraphConfig = React.memo(() => {
 
   const contentStages = useQuery(ContentStages)
 
-  const defaultValue = previewModeDefaults().hygraphStage ?? 'PUBLISHED'
+  const defaultValue =
+    useWatch({ control, name: 'previewData.hygraphStage' }) ??
+    previewModeDefaults().hygraphStage ??
+    'PUBLISHED'
 
   return useMemo(
     () => (
       <SelectElement
         control={control}
         name='previewData.hygraphStage'
-        defaultValue={defaultValue}
         color='secondary'
-        select
+        defaultValue={defaultValue}
         label='Hygraph Stage'
         size='small'
         sx={{ width: '150px' }}
@@ -65,7 +68,7 @@ const HygraphConfig = React.memo(() => {
         }
       />
     ),
-    [contentStages.data?.__type.enumValues, contentStages.loading, control],
+    [contentStages.data?.__type.enumValues, contentStages.loading, control, defaultValue],
   )
 })