From c30d2550ff9f9d8291768a7c076b77c62328a0f7 Mon Sep 17 00:00:00 2001
From: DarkSky <25152247+darkskygit@users.noreply.github.com>
Date: Tue, 31 Oct 2023 06:17:28 -0500
Subject: [PATCH] fix: request prevented when re-downgrade subscribe (#4786)

---
 .../general-setting/plans/plan-card.tsx       | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
index 7e7279cb7f..fdf7d00495 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
@@ -301,18 +301,19 @@ const Downgrade = ({
 }) => {
   const t = useAFFiNEI18N();
   const [open, setOpen] = useState(false);
+  // allow replay request on network error until component unmount or success
+  const [idempotencyKey, setIdempotencyKey] = useState(nanoid());
   const { isMutating, trigger } = useMutation({
     mutation: cancelSubscriptionMutation,
   });
 
-  // allow replay request on network error until component unmount
-  const idempotencyKey = useMemo(() => nanoid(), []);
-
   const downgrade = useCallback(() => {
     trigger(
       { idempotencyKey },
       {
         onSuccess: data => {
+          // refresh idempotency key
+          setIdempotencyKey(nanoid());
           onSubscriptionUpdate(data.cancelSubscription);
         },
       }
@@ -374,7 +375,7 @@ const Upgrade = ({
   const newTabRef = useRef<Window | null>(null);
 
   // allow replay request on network error until component unmount
-  const idempotencyKey = useMemo(() => nanoid(), []);
+  const idempotencyKey = useMemo(() => `${nanoid()}-${recurring}`, [recurring]);
 
   const onClose = useCallback(() => {
     newTabRef.current = null;
@@ -453,18 +454,19 @@ const ChangeRecurring = ({
 }) => {
   const t = useAFFiNEI18N();
   const [open, setOpen] = useState(false);
+  // allow replay request on network error until component unmount or success
+  const [idempotencyKey, setIdempotencyKey] = useState(nanoid());
   const { isMutating, trigger } = useMutation({
     mutation: updateSubscriptionMutation,
   });
 
-  // allow replay request on network error until component unmount
-  const idempotencyKey = useMemo(() => nanoid(), []);
-
   const change = useCallback(() => {
     trigger(
       { recurring: to, idempotencyKey },
       {
         onSuccess: data => {
+          // refresh idempotency key
+          setIdempotencyKey(nanoid());
           onSubscriptionUpdate(data.updateSubscriptionRecurring);
         },
       }
@@ -532,19 +534,20 @@ const ResumeAction = ({
 }) => {
   const t = useAFFiNEI18N();
   const [open, setOpen] = useState(false);
+  // allow replay request on network error until component unmount or success
+  const [idempotencyKey, setIdempotencyKey] = useState(nanoid());
   const [hovered, setHovered] = useState(false);
   const { isMutating, trigger } = useMutation({
     mutation: resumeSubscriptionMutation,
   });
 
-  // allow replay request on network error until component unmount
-  const idempotencyKey = useMemo(() => nanoid(), []);
-
   const resume = useCallback(() => {
     trigger(
       { idempotencyKey },
       {
         onSuccess: data => {
+          // refresh idempotency key
+          setIdempotencyKey(nanoid());
           onSubscriptionUpdate(data.resumeSubscription);
         },
       }