From bb9dbd29b85d97ed6b4cb8d1faffa22fd6d944bb Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 21 Nov 2022 15:29:06 +0800
Subject: [PATCH] Fix confirmation

---
 .../ConfirmDisablePITRModal.tsx               | 56 -------------
 .../ConfirmPaymentModal.tsx                   | 83 +++++++++++++++++++
 .../ConfirmUpdateInstanceModal.tsx            | 56 -------------
 .../PaymentSummaryPanel.tsx                   | 18 ++--
 4 files changed, 89 insertions(+), 124 deletions(-)
 delete mode 100644 studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmDisablePITRModal.tsx
 create mode 100644 studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmPaymentModal.tsx
 delete mode 100644 studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmUpdateInstanceModal.tsx

diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmDisablePITRModal.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmDisablePITRModal.tsx
deleted file mode 100644
index 1855803ff39..00000000000
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmDisablePITRModal.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { FC } from 'react'
-import { Alert, Button, Modal } from 'ui'
-
-interface Props {
-  visible: boolean
-  isSubmitting: boolean
-  onCancel: () => void
-  onConfirm: () => void
-}
-
-const ConfirmDisablePITRModal: FC<Props> = ({ visible, isSubmitting, onCancel, onConfirm }) => {
-  return (
-    <Modal
-      hideFooter
-      visible={visible}
-      size="large"
-      header="Disabling point in time recovery"
-      onCancel={onCancel}
-    >
-      <div className="space-y-4 py-4">
-        <Modal.Content>
-          <Alert
-            withIcon
-            variant="warning"
-            title="All available PITR back ups for your project will be removed and are non-recoverable"
-          >
-            As such, your project will not have past PITR backups if you were to re-enable PITR for
-            your project.
-          </Alert>
-        </Modal.Content>
-        <Modal.Content>
-          <p className="text-sm text-scale-1200">Confirm to disable PITR for your project?</p>
-        </Modal.Content>
-        <Modal.Separator />
-        <Modal.Content>
-          <div className="flex items-center gap-2">
-            <Button block type="default" onClick={onCancel}>
-              Cancel
-            </Button>
-            <Button
-              block
-              type="primary"
-              loading={isSubmitting}
-              disabled={isSubmitting}
-              onClick={onConfirm}
-            >
-              Confirm
-            </Button>
-          </div>
-        </Modal.Content>
-      </div>
-    </Modal>
-  )
-}
-
-export default ConfirmDisablePITRModal
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmPaymentModal.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmPaymentModal.tsx
new file mode 100644
index 00000000000..c9175ae8fd8
--- /dev/null
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmPaymentModal.tsx
@@ -0,0 +1,83 @@
+import { FC } from 'react'
+import { Alert, Button, Modal } from 'ui'
+
+interface Props {
+  visible: boolean
+  isSubmitting: boolean
+  isChangingInstanceSize: boolean
+  isDisablingPITR: boolean
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+const warnings = {
+  changingInstanceSize: {},
+}
+
+const ConfirmPaymentModal: FC<Props> = ({
+  visible,
+  isSubmitting,
+  isChangingInstanceSize,
+  isDisablingPITR,
+  onCancel,
+  onConfirm,
+}) => {
+  return (
+    <Modal
+      hideFooter
+      visible={visible}
+      size="large"
+      header="Confirm changes to your project's subscription"
+      onCancel={onCancel}
+    >
+      <div className="space-y-4 py-4">
+        <Modal.Content>
+          {isChangingInstanceSize && (
+            <Alert
+              withIcon
+              variant="warning"
+              title="Your project will need to be restarted for size changes to take place"
+            >
+              Upon confirmation, your project will be restarted to change your instance size. This
+              will take up to 2 minutes in which your project will be unavailable during the time.
+            </Alert>
+          )}
+          {isDisablingPITR && (
+            <Alert
+              withIcon
+              variant="warning"
+              title="All available PITR back ups for your project will be removed and are non-recoverable"
+            >
+              As such, your project will not have past PITR backups if you were to re-enable PITR
+              for your project.
+            </Alert>
+          )}
+        </Modal.Content>
+        <Modal.Content>
+          <p className="text-sm text-scale-1200">
+            Confirm the changes to your project's subscription?
+          </p>
+        </Modal.Content>
+        <Modal.Separator />
+        <Modal.Content>
+          <div className="flex items-center gap-2">
+            <Button block type="default" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button
+              block
+              type="primary"
+              loading={isSubmitting}
+              disabled={isSubmitting}
+              onClick={onConfirm}
+            >
+              Confirm
+            </Button>
+          </div>
+        </Modal.Content>
+      </div>
+    </Modal>
+  )
+}
+
+export default ConfirmPaymentModal
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmUpdateInstanceModal.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmUpdateInstanceModal.tsx
deleted file mode 100644
index 882095ec376..00000000000
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/ConfirmUpdateInstanceModal.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { FC } from 'react'
-import { Alert, Button, Modal } from 'ui'
-
-interface Props {
-  visible: boolean
-  isSubmitting: boolean
-  onCancel: () => void
-  onConfirm: () => void
-}
-
-const ConfirmUpdateInstanceModal: FC<Props> = ({ visible, isSubmitting, onCancel, onConfirm }) => {
-  return (
-    <Modal
-      hideFooter
-      visible={visible}
-      size="large"
-      header="Updating project database instance size"
-      onCancel={onCancel}
-    >
-      <div className="space-y-4 py-4">
-        <Modal.Content>
-          <Alert
-            withIcon
-            variant="warning"
-            title="Your project will need to be restarted for changes to take place"
-          >
-            Upon confirmation, your project will be restarted to change your instance size. This
-            will take up to 2 minutes in which your project will be unavailable during the time.
-          </Alert>
-        </Modal.Content>
-        <Modal.Content>
-          <p className="text-sm text-scale-1200">Would you like to update your project now?</p>
-        </Modal.Content>
-        <Modal.Separator />
-        <Modal.Content>
-          <div className="flex items-center gap-2">
-            <Button block type="default" onClick={onCancel}>
-              Cancel
-            </Button>
-            <Button
-              block
-              type="primary"
-              loading={isSubmitting}
-              disabled={isSubmitting}
-              onClick={onConfirm}
-            >
-              Confirm
-            </Button>
-          </div>
-        </Modal.Content>
-      </div>
-    </Modal>
-  )
-}
-
-export default ConfirmUpdateInstanceModal
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
index 107b7139a7d..6f53bc8760d 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
@@ -11,8 +11,7 @@ import PaymentTotal from './PaymentTotal'
 import InformationBox from 'components/ui/InformationBox'
 import { DatabaseAddon } from '../AddOns/AddOns.types'
 import { getPITRDays } from './PaymentSummaryPanel.utils'
-import ConfirmUpdateInstanceModal from './ConfirmUpdateInstanceModal'
-import ConfirmDisablePITRModal from './ConfirmDisablePITRModal'
+import ConfirmPaymentModal from './ConfirmPaymentModal'
 
 // [Joshen] PITR stuff can be undefined for now until we officially launch PITR self serve
 
@@ -105,7 +104,7 @@ const PaymentSummaryPanel: FC<Props> = ({
         message: error,
       })
     } else {
-      isChangingComputeSize || isChangingPITRDuration
+      isChangingComputeSize || (isChangingPITRDuration && selectedPITRDays === 0)
         ? setShowConfirmModal(true)
         : onConfirmPayment()
     }
@@ -333,15 +332,10 @@ const PaymentSummaryPanel: FC<Props> = ({
         </div>
       </div>
 
-      <ConfirmUpdateInstanceModal
-        visible={showConfirmModal && isChangingComputeSize}
-        isSubmitting={isSubmitting}
-        onCancel={() => setShowConfirmModal(false)}
-        onConfirm={() => onConfirmPayment()}
-      />
-
-      <ConfirmDisablePITRModal
-        visible={showConfirmModal && isChangingComputeSize}
+      <ConfirmPaymentModal
+        visible={showConfirmModal}
+        isChangingInstanceSize={isChangingComputeSize}
+        isDisablingPITR={isChangingPITRDuration && selectedPITRDays === 0}
         isSubmitting={isSubmitting}
         onCancel={() => setShowConfirmModal(false)}
         onConfirm={() => onConfirmPayment()}