refactor(frontend): abstract out request modal into its own component (movie only)

src/components/RequestModal/MovieRequestModal.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import Modal from '../Common/Modal';
+import { useUser } from '../../hooks/useUser';
+import { Permission } from '../../../server/lib/permissions';
+
+interface RequestModalProps {
+  type: 'request' | 'cancel';
+  visible?: boolean;
+  onCancel: () => void;
+  onOk: () => void;
+  title: string;
+}
+
+const MovieRequestModal: React.FC<RequestModalProps> = ({
+  type,
+  visible,
+  onCancel,
+  onOk,
+  title,
+}) => {
+  const { hasPermission } = useUser();
+
+  let text = hasPermission(Permission.MANAGE_REQUESTS)
+    ? 'Your request will be immediately approved. Do you wish to continue?'
+    : undefined;
+
+  if (type === 'cancel') {
+    text = 'This will remove your request. Are you sure you want to continue?';
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      backgroundClickable
+      onCancel={onCancel}
+      onOk={onOk}
+      title={type === 'request' ? `Request ${title}` : 'Cancel Request'}
+      okText={type === 'request' ? 'Request' : 'Cancel Request'}
+      okButtonType={type === 'cancel' ? 'danger' : 'primary'}
+      iconSvg={
+        type === 'request' ? (
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            />
+          </svg>
+        )
+      }
+    >
+      {text}
+    </Modal>
+  );
+};
+
+export default MovieRequestModal;