Add resume shop session form to debug dialog

apps/store/src/components/DebugDialog/DebugResumeSessionSection.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled'
+import { useRouter } from 'next/router'
+import { Button, theme } from 'ui'
+import { TextField } from '@/components/TextField/TextField'
+import { useShopSession } from '@/services/shopSession/ShopSessionContext'
+import { useCurrentLocale } from '@/utils/l10n/useCurrentLocale'
+import { PageLink } from '@/utils/PageLink'
+
+const INPUT_NAME = 'shopSessionId'
+
+export const DebugResumeSessionSection = () => {
+  const { routingLocale } = useCurrentLocale()
+  const { shopSession } = useShopSession()
+  const router = useRouter()
+
+  if (!shopSession) return null
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    const formData = new FormData(event.currentTarget)
+    const shopSessionId = formData.get(INPUT_NAME)
+
+    if (typeof shopSessionId !== 'string') return
+
+    router.push(
+      PageLink.session({
+        shopSessionId,
+        locale: routingLocale,
+        next: `/${routingLocale}${router.pathname}`,
+      }),
+    )
+  }
+
+  return (
+    <Layout onSubmit={handleSubmit}>
+      <div style={{ flex: 1 }}>
+        <TextField name={INPUT_NAME} label="Resume shop session" variant="small" />
+      </div>
+
+      <Button size="medium" type="submit">
+        Go
+      </Button>
+    </Layout>
+  )
+}
+
+const Layout = styled.form({
+  display: 'grid',
+  gridTemplateColumns: '4fr 1fr',
+  alignItems: 'center',
+  gap: theme.space.xs,
+})

apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx

@@ -4,6 +4,7 @@ import { Button, Space, Text, theme } from 'ui'
 import { useShopSession } from '@/services/shopSession/ShopSessionContext'
 import { PageLink } from '@/utils/PageLink'
 import { CopyToClipboard } from './CopyToClipboard'
+import { DebugResumeSessionSection } from './DebugResumeSessionSection'
 
 export const DebugShopSessionSection = () => {
   const { shopSession } = useShopSession()
@@ -14,18 +15,26 @@ export const DebugShopSessionSection = () => {
   const nextUrl = `/${router.locale}${router.pathname}`
 
   return (
-    <Layout>
-      <Space y={0.25} style={{ flex: 1 }}>
-        <Text as="p" size="sm">
-          Shop Session
-        </Text>
-        <CopyToClipboard>{shopSession.id}</CopyToClipboard>
-      </Space>
+    <Space y={1}>
+      <Layout>
+        <Space y={0.25} style={{ flex: 1 }}>
+          <Text as="p" size="sm">
+            Shop Session
+          </Text>
+          <CopyToClipboard>{shopSession.id}</CopyToClipboard>
+        </Space>
 
-      <Button variant="secondary" size="medium" href={PageLink.apiSessionReset({ next: nextUrl })}>
-        Reset
-      </Button>
-    </Layout>
+        <Button
+          variant="secondary"
+          size="medium"
+          href={PageLink.apiSessionReset({ next: nextUrl })}
+        >
+          Reset
+        </Button>
+      </Layout>
+
+      <DebugResumeSessionSection />
+    </Space>
   )
 }