From af5417cb1cc40c8578ba9e23381725e8c092947b Mon Sep 17 00:00:00 2001
From: Robin Andeer <robin.andeer@gmail.com>
Date: Tue, 18 Jul 2023 10:07:17 +0200
Subject: [PATCH] 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  | 10 +++---
 .../components/CartPage/PageDebugDialog.tsx   |  2 +-
 .../DebugDialog/CopyToClipboard.tsx           |  4 +--
 .../DebugDialog/DebugShopSessionSection.tsx   | 33 +++++++++++++++----
 .../src/components/TextField/TextField.tsx    |  2 +-
 apps/store/src/pages/api/session/reset.ts     |  4 +--
 apps/store/src/utils/PageLink.ts              |  5 ++-
 7 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/apps/store/src/components/ButtonNextLink.tsx b/apps/store/src/components/ButtonNextLink.tsx
index 20b07a6312..e83daeaf82 100644
--- a/apps/store/src/components/ButtonNextLink.tsx
+++ b/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>
diff --git a/apps/store/src/components/CartPage/PageDebugDialog.tsx b/apps/store/src/components/CartPage/PageDebugDialog.tsx
index 5e4f78f781..35a9e731b1 100644
--- a/apps/store/src/components/CartPage/PageDebugDialog.tsx
+++ b/apps/store/src/components/CartPage/PageDebugDialog.tsx
@@ -13,8 +13,8 @@ export const PageDebugDialog = () => {
   return (
     <DebugDialog>
       <Space y={1}>
-        <DebugShopSessionSection />
         <LinkToCartSection />
+        <DebugShopSessionSection />
       </Space>
     </DebugDialog>
   )
diff --git a/apps/store/src/components/DebugDialog/CopyToClipboard.tsx b/apps/store/src/components/DebugDialog/CopyToClipboard.tsx
index 7e7b7dcbbb..f4c03b22eb 100644
--- a/apps/store/src/components/DebugDialog/CopyToClipboard.tsx
+++ b/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': {
diff --git a/apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx b/apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx
index d63b2e1acb..40eace00cf 100644
--- a/apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx
+++ b/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,
+})
diff --git a/apps/store/src/components/TextField/TextField.tsx b/apps/store/src/components/TextField/TextField.tsx
index db9da33f7e..bc2ab42b82 100644
--- a/apps/store/src/components/TextField/TextField.tsx
+++ b/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
diff --git a/apps/store/src/pages/api/session/reset.ts b/apps/store/src/pages/api/session/reset.ts
index a20305cf75..bf8b353747 100644
--- a/apps/store/src/pages/api/session/reset.ts
+++ b/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
diff --git a/apps/store/src/utils/PageLink.ts b/apps/store/src/utils/PageLink.ts
index 6717626363..bc453a2078 100644
--- a/apps/store/src/utils/PageLink.ts
+++ b/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}` : ''