make dialog have closeable on backdrop click as default

src/components/DialogBox/base.tsx

@@ -30,18 +30,18 @@ DialogBoxBase.defaultProps = {
 
 export const dialogCloseHandler =
     ({
-        closeOnBackdropClick,
+        staticBackdrop,
         nonClosable,
         onClose,
     }: {
-        closeOnBackdropClick?: boolean;
+        staticBackdrop?: boolean;
         nonClosable?: boolean;
         onClose: () => void;
     }): DialogProps['onClose'] =>
     (_, reason) => {
         if (nonClosable) {
             // no-op
-        } else if (!closeOnBackdropClick && reason === 'backdropClick') {
+        } else if (staticBackdrop && reason === 'backdropClick') {
             // no-op
         } else {
             onClose();

src/components/DialogBox/index.tsx

@@ -35,7 +35,7 @@ export default function DialogBox({
     }
 
     const handleClose = dialogCloseHandler({
-        closeOnBackdropClick: attributes.closeOnBackdropClick,
+        staticBackdrop: attributes.staticBackdrop,
         nonClosable: attributes.nonClosable,
         onClose: onClose,
     });

src/components/pages/gallery/PlanSelector/index.tsx

@@ -148,7 +148,7 @@ function PlanSelector(props: Props) {
     }
 
     const planSelectorAttributes: DialogBoxAttributes = {
-        closeOnBackdropClick: hasPaidSubscription(subscription) ? true : false,
+        staticBackdrop: !hasPaidSubscription(subscription),
         title: hasPaidSubscription(subscription)
             ? constants.MANAGE_PLAN
             : constants.CHOOSE_PLAN,

src/types/dialogBox/index.ts

@@ -2,7 +2,7 @@ import { ButtonProps } from '@mui/material';
 
 export interface DialogBoxAttributes {
     title?: string;
-    closeOnBackdropClick?: boolean;
+    staticBackdrop?: boolean;
     nonClosable?: boolean;
     content?: any;
     close?: {