Add reset sesion button to debug dialog (#2798)

<!--
PR title: GRW-123 / Feature / Awesome new thing
-->

## Describe your changes


![Screenshot 2023-07-17 at 15.42.18.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/OgXegTwxM9IeuXHZyw5h/797222ff-4656-4c87-a16c-a271a0605b8a/Screenshot%202023-07-17%20at%2015.42.18.png)


- Add button (link) to reset current session from Debug Dialog

- Include alongside shop session ID

<!--
What changes are made?
If there are many changes, a list might be a good format.
If it makes sense, add screenshots and/or screen recordings here.
-->

## Justify why they are needed

- One of the common operations

## Checklist before requesting a review

- [ ] I have performed a self-review of my code

apps/store/src/components/ButtonNextLink.tsx

@@ -1,5 +1,5 @@
-import Link, { LinkProps } from 'next/link'
-import { ComponentProps } from 'react'
+import Link, { type LinkProps } from 'next/link'
+import { type ComponentProps } from 'react'
 import { Button } from 'ui'
 
 type ButtonProps = ComponentProps<typeof Button>
@@ -12,15 +12,15 @@ export const ButtonNextLink = (props: Props) => {
   const { onClick, variant, size, loading, children, className, title, target, ...linkProps } =
     props
   return (
-    <Link {...linkProps} passHref legacyBehavior>
+    <Link {...linkProps} passHref={true} legacyBehavior={true}>
       <Button
         onClick={onClick}
         variant={variant}
         size={size}
         loading={loading}
-        {...(target === '_blank' ? { target: '_blank', rel: 'noreferrer' } : {})}
-        {...(title ? { title: title } : {})}
+        title={title}
         className={className}
+        {...(target === '_blank' ? { target: '_blank', rel: 'noreferrer' } : {})}
       >
         {children}
       </Button>

apps/store/src/components/CartPage/PageDebugDialog.tsx

@@ -13,8 +13,8 @@ export const PageDebugDialog = () => {
   return (
     <DebugDialog>
       <Space y={1}>
-        <DebugShopSessionSection />
         <LinkToCartSection />
+        <DebugShopSessionSection />
       </Space>
     </DebugDialog>
   )

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

@@ -49,9 +49,9 @@ const CopyToClipboardWrapper = styled.div({
   gap: theme.space.lg,
 
   backgroundColor: theme.colors.gray100,
-  padding: theme.space.xs,
+  paddingInline: theme.space.xs,
   borderRadius: theme.radius.xs,
-  border: `1px solid ${theme.colors.gray300}`,
+  height: '2.5rem',
 
   '@media (hover: hover)': {
     '&:hover': {

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

@@ -1,18 +1,37 @@
-import { Space, Text } from 'ui'
+import styled from '@emotion/styled'
+import { useRouter } from 'next/router'
+import { Button, Space, Text, theme } from 'ui'
 import { useShopSession } from '@/services/shopSession/ShopSessionContext'
+import { PageLink } from '@/utils/PageLink'
 import { CopyToClipboard } from './CopyToClipboard'
 
 export const DebugShopSessionSection = () => {
   const { shopSession } = useShopSession()
+  const router = useRouter()
 
   if (!shopSession) return null
 
+  const nextUrl = `/${router.locale}${router.pathname}`
+
   return (
-    <Space y={0.25}>
-      <Text as="p" size="sm">
-        Shop Session
-      </Text>
-      <CopyToClipboard>{shopSession.id}</CopyToClipboard>
-    </Space>
+    <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>
   )
 }
+
+const Layout = styled.div({
+  display: 'grid',
+  gridTemplateColumns: '4fr 1fr',
+  alignItems: 'flex-end',
+  gap: theme.space.xs,
+})

apps/store/src/components/TextField/TextField.tsx

@@ -98,7 +98,7 @@ export const TextField = (props: Props) => {
           )}
 
           {inputValue &&
-            (inputProps.disabled ? (
+            (inputProps.disabled || inputProps.readOnly ? (
               <LockIcon size="1rem" color={theme.colors.textSecondary} />
             ) : (
               <DeleteButton

apps/store/src/pages/api/session/reset.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from 'next'
+import { type NextApiRequest, type NextApiResponse } from 'next'
 import { ORIGIN_URL, PageLink } from '@/utils/PageLink'
 import { resetSessionServerSide } from '@/utils/resetSessionServerSide'
 
@@ -18,7 +18,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
   const destination = nextURL.toString()
   console.log(`Re-directing to destination: ${destination}`)
-  return res.redirect(destination)
+  res.redirect(destination)
 }
 
 export default handler

apps/store/src/utils/PageLink.ts

@@ -83,7 +83,10 @@ export const PageLink = {
     return url
   },
 
-  apiSessionReset: () => '/api/session/reset',
+  apiSessionReset: ({ next }: { next?: string } = {}) => {
+    const nextQueryParam = next ? `?next=${next}` : ''
+    return `/api/session/reset${nextQueryParam}`
+  },
   apiSessionCreate: (ssn: string) => `/api/session/create/?ssn=${ssn}`,
   apiCampaign: ({ code, next }: CampaignAddRoute) => {
     const nextQueryParam = next ? `?next=${next}` : ''