Page of donate routers (#123)

* button setting * menu donate * menu donate print modale * save prew * fin donation donationPageForm --------- Co-authored-by: Максим Коробков <[email protected]>
korobprog · Feb 18, 2024 · 0bfbff2 · 0bfbff2
1 parent 534d00f
commit 0bfbff2
Show file tree

Hide file tree

Showing 9 changed files with 429 additions and 126 deletions.
diff --git a/firebase-debug.log b/firebase-debug.log
@@ -0,0 +1,21 @@
+[debug] [2024-01-06T06:33:03.911Z] ----------------------------------------------------------------------
+[debug] [2024-01-06T06:33:03.915Z] Command:       C:\Program Files (x86)\nodejs\node.exe C:\Users\makst\AppData\Roaming\npm\node_modules\firebase-tools\lib\bin\firebase.js init
+[debug] [2024-01-06T06:33:03.915Z] CLI Version:   13.0.2
+[debug] [2024-01-06T06:33:03.916Z] Platform:      win32
+[debug] [2024-01-06T06:33:03.916Z] Node Version:  v20.10.0
+[debug] [2024-01-06T06:33:03.916Z] Time:          Sat Jan 06 2024 16:33:03 GMT+1000 (Владивосток, стандартное время)
+[debug] [2024-01-06T06:33:03.916Z] ----------------------------------------------------------------------
+[debug] 
+[debug] [2024-01-06T06:33:03.923Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2024-01-06T06:33:03.923Z] > authorizing via signed-in user ([email protected])
+[info] 
+     ######## #### ########  ######## ########     ###     ######  ########
+     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
+     ######    ##  ########  ######   ########  #########  ######  ######
+     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
+     ##       #### ##     ## ######## ########  ##     ##  ######  ########
+
+You're about to initialize a Firebase project in this directory:
+
+  C:\Users\makst\OneDrive\Documents\React\karavan-book-tracker-1
+
diff --git a/packages/admin/src/pages/reports.tsx b/packages/admin/src/pages/reports.tsx
@@ -26,7 +26,7 @@ export const Reports = ({ currentUser }: Props) => {
     sheetId: process.env.REACT_APP_GOOGLE_SHEETS_ID as string,
   });
   const avatar = profile?.avatar;
-  console.log("🚀 ~ file: reports.tsx:28 ~ Reports ~ avatar:", avatar);
+
   const { operationsDocData, loading: operationLoading } = useOperations();
 
   const onAddOperation = () => {

diff --git a/packages/common/src/components/forms/profile/pagedonation/PageForm.tsx b/packages/common/src/components/forms/profile/pagedonation/PageForm.tsx
@@ -23,11 +23,6 @@ import whats from "common/src/images/whatsapp.svg";
 import email from "common/src/images/email.svg";
 import link from "common/src/images/link_b.svg";
 import { CurrentUser } from "common/src/services/api/useCurrentUser";
-import logo from "../../../../images/logo.png";
-import printPdfDonations from "./printPdfDonations";
-import printPdfDonations88 from "./printPdfDonations88";
-
-const QR_SIZE = 160;
 
 export type PageFormValues = DonationPageDoc;
 
@@ -41,51 +36,22 @@ type Props = {
 export const PageForm = (props: Props) => {
   const { onFinish, initialValues, disabled } = props;
 
-  const { currentUser } = props;
-
-  const userId = currentUser.profile?.id || currentUser.user?.uid;
-  const userName = currentUser.profile?.name;
-
   const [switchState, setSwitchState] = useState(initialValues.active);
 
   const handleSwitchChange = (checked: boolean | ((prevState: boolean) => boolean)) => {
     setSwitchState(checked);
   };
 
-  const { Link } = Typography;
-  const myPageLink = `https://books-donation.web.app/page/${userId}`;
-
   const { Text } = Typography;
   const { TextArea } = Input;
 
-  const downloadQRCode = () => {
-    const canvas = document.getElementById("myqrcode")?.querySelector<HTMLCanvasElement>("canvas");
-    if (canvas) {
-      const url = canvas.toDataURL();
-      const a = document.createElement("a");
-      a.download = "QRCode.png";
-      a.href = url;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-    }
-  };
-
   const title = {
     titleBank: "Введите названия банка",
     titleCard: "Введите номер карты",
     titleQr: "Введите сслыку на QR",
     titleButton: "Введите свое название",
   };
 
-  const [value, setValue] = useState(true);
-  console.log("🚀 ~ file: PageForm.tsx:82 ~ PageForm ~ value:", value);
-
-  const onChange = (e: RadioChangeEvent) => {
-    //console.log("radio checked", e.target.value);
-    setValue(e.target.value);
-  };
-
   return (
     <Form
       name="pageDonationForm"
@@ -94,7 +60,7 @@ export const PageForm = (props: Props) => {
       initialValues={initialValues}
       layout="vertical"
     >
-      <Space style={{ display: "flex", flexFlow: "column", alignItems: "flex-end" }}>
+      <Space style={{ display: "flex", flexFlow: "column", alignItems: "center" }}>
         <Form.Item name={"active"}>
           <Switch
             checkedChildren={<CheckOutlined />}
@@ -104,15 +70,13 @@ export const PageForm = (props: Props) => {
           />
         </Form.Item>
       </Space>
-
-      <Alert
-        message="Настройте страницу визитки"
-        description="Вы можете настроить свою страничку пожертвований, а также распечать QR
-      коды для книг в качестве Ваших визиток."
-        type="info"
-        showIcon
-      />
-
+      <Space direction="vertical" style={{ marginTop: 15, display: "flex", alignItems: "center" }}>
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          СОХРАНИТЬ
+        </Button>
+      </Form.Item>
+      </Space>
       <Space
         direction="horizontal"
         style={{
@@ -123,41 +87,14 @@ export const PageForm = (props: Props) => {
           marginTop: 25,
         }}
       >
-        <Form.Item>
-          <Button type="primary" htmlType="submit">
-            СОХРАНИТЬ
-          </Button>
-        </Form.Item>
-        {switchState ? (
-          <Button type="primary" ghost>
-            <Link copyable={{ text: myPageLink }} href={myPageLink} target="_blank">
-              Ваша страница визитки
-            </Link>
-          </Button>
-        ) : (
-          ""
-        )}
+        <Alert
+          message="Настройте страницу визитки"
+          description="Вы можете настроить свою страничку пожертвований, а также распечать QR
+      коды для книг в качестве Ваших визиток."
+          type="info"
+          showIcon
+        />
       </Space>
-
-      {switchState ? (
-        <Space
-          direction="vertical"
-          style={{ display: "flex", flexFlow: "column", alignItems: "center", marginBottom: 15 }}
-        >
-          <Radio.Group name="radiogroup" defaultValue={1} onChange={onChange} value={value}>
-            <Radio value={true}>16 QR</Radio>
-            <Radio value={false}>88 QR</Radio>
-          </Radio.Group>
-          <Button type="primary" ghost icon={<PrinterTwoTone />}>
-            <Link onClick={value ? printPdfDonations : printPdfDonations88} target="_blank">
-              распечатать визитки
-            </Link>
-          </Button>
-        </Space>
-      ) : (
-        ""
-      )}
-
       <Form.Item name={"greetingText"} label="Текст приветствия">
         <TextArea
           showCount
@@ -355,32 +292,6 @@ export const PageForm = (props: Props) => {
           </Form.Item>
         </Space>
       </Space>
-
-      {switchState ? (
-        <div id="myqrcode">
-          <Space
-            direction="vertical"
-            style={{ marginTop: 15, display: "flex", alignItems: "center" }}
-          >
-            <Text italic>{userName}, это Ваш QR странички донатов</Text>
-            <QRCode
-              className="centred"
-              value={myPageLink}
-              bgColor="#fff"
-              style={{ marginBottom: 16 }}
-              errorLevel="H"
-              size={QR_SIZE}
-              iconSize={QR_SIZE / 4}
-              icon={logo}
-            />
-            <Button type="primary" onClick={downloadQRCode}>
-              Скачать QR на устройство
-            </Button>
-          </Space>
-        </div>
-      ) : (
-        ""
-      )}
       <Divider dashed />
       <Space direction="vertical" style={{ marginTop: 15, display: "flex", alignItems: "center" }}>
         <Form.Item>

diff --git a/packages/common/src/components/forms/profile/pagedonation/PageMenu.tsx b/packages/common/src/components/forms/profile/pagedonation/PageMenu.tsx
@@ -0,0 +1,115 @@
+import { CurrentUser } from "common/src/services/api/useCurrentUser";
+import { DonationPageDoc } from "common/src/services/api/donation";
+import { apiRefs } from "common/src/services/api/refs";
+import { useDocumentData } from "react-firebase-hooks/firestore";
+import { Button, Radio, RadioChangeEvent, Space, Switch, Modal } from "antd";
+import { PrinterTwoTone, LinkOutlined } from "@ant-design/icons";
+import { useState } from "react";
+import Link from "antd/es/typography/Link";
+import printPdfDonations from "common/src/components/forms/profile/pagedonation/printPdfDonations";
+import printPdfDonations88 from "common/src/components/forms/profile/pagedonation/printPdfDonations88";
+
+export type PageFormValues = DonationPageDoc;
+
+type Props = {
+  initialValues: PageFormValues;
+  disabled?: boolean;
+  currentUser: CurrentUser;
+};
+
+const PageMenu = ({ currentUser }: Props) => {
+  const { profile, user } = currentUser;
+
+  const initialPageDoc: DonationPageDoc = {
+    banks: [],
+    active: false,
+    socialTelegram: "",
+    socialWhats: "",
+    socialMail: "",
+    socialLink: "",
+    avatar: "",
+    userName: "",
+    greetingText: "",
+    buttonBank: "",
+  };
+
+  const userId = profile?.id || user?.uid || "";
+
+  const [donationPageDocData] = useDocumentData<DonationPageDoc>(
+    userId ? apiRefs.donationPage(userId) : null
+  );
+
+  const initialValues = donationPageDocData || initialPageDoc;
+
+  const [switchState, setSwitchState] = useState(initialValues.active);
+
+  const myPageLink = `https://books-donation.web.app/page/${userId}`;
+
+  const [value, setValue] = useState(true);
+
+  const onChange = (e: RadioChangeEvent) => {
+    //console.log("radio checked", e.target.value);
+    setValue(e.target.value);
+  };
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <Space
+        direction="vertical"
+        style={{ display: "flex", flexFlow: "column", alignItems: "center", marginTop: 20 }}
+      >
+        {initialValues.active ? (
+          <Button type="primary" ghost icon={<LinkOutlined />}>
+            <Link copyable={{ text: myPageLink }} href={myPageLink} target="_blank">
+              Ваша страница визитки
+            </Link>
+          </Button>
+        ) : (
+          ""
+        )}
+        {initialValues.active ? (
+          <Button type="dashed" onClick={showModal} icon={<PrinterTwoTone />}>
+            Распечатать визитки
+          </Button>
+        ) : (
+          ""
+        )}{" "}
+      </Space>
+      {initialValues.active ? (
+        <Space
+          direction="vertical"
+          style={{ display: "flex", flexFlow: "column", alignItems: "center", marginBottom: 15 }}
+        >
+          <Modal title="Выберете формат" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+            <Radio.Group name="radiogroup" defaultValue={1} onChange={onChange} value={value}>
+              <Radio value={true} onClick={printPdfDonations}>
+                16 QR
+              </Radio>
+              <Radio value={false} onClick={printPdfDonations88}>
+                88 QR
+              </Radio>
+            </Radio.Group>
+          </Modal>
+        </Space>
+      ) : (
+        ""
+      )}
+    </>
+  );
+};
+
+export default PageMenu;
diff --git a/packages/common/src/components/forms/profile/pagedonation/preview.tsx b/packages/common/src/components/forms/profile/pagedonation/preview.tsx
@@ -8,7 +8,6 @@ import logo from "common/src/images/logo.png";
 import { Divider, QRCode, Typography, Image, Avatar, Button, Space } from "antd";
 import { CurrentUser } from "../../../../services/api/useCurrentUser";
 import { BankTwoTone, CreditCardOutlined } from "@ant-design/icons";
-import React from "react";
 
 type Props = {
   onFinish: (formValues: PageFormValues) => Promise<void>;
@@ -43,7 +42,6 @@ export const Preview = (props: Props) => {
     socialMail,
     buttonBank,
   } = initialValues;
-  console.log("🚀 ~ file: preview.tsx:36 ~ Preview ~ initialValues:", initialValues);
 
   const { Paragraph, Text, Link, Title } = Typography;
   const textButton = "OnlinePay";

diff --git a/packages/tracker/src/App.tsx b/packages/tracker/src/App.tsx
@@ -20,6 +20,7 @@ import { Reset } from "./pages/resetpass";
 
 import "antd/dist/reset.css";
 import "./App.less";
+import DonationsPageForm from "./pages/donationsPageForm";
 
 const routesWithoutRedirect = [routes.registration, routes.auth, routes.resetpassemail];
 
@@ -65,7 +66,46 @@ function App() {
         <Route path={routes.resetpassemail} element={<Reset currentUser={currentUser} />} />
         <Route path={routes.team} element={<Team currentUser={currentUser} />} />
         <Route path={routes.teamEdit} element={<TeamEdit currentUser={currentUser} />} />
-        <Route path={routes.pageDonations} element={<DonationsPage currentUser={currentUser} />} />
+        <Route
+          path={routes.pageDonationsForm}
+          element={
+            <DonationsPageForm
+              currentUser={currentUser}
+              initialValues={{
+                active: false,
+                banks: [],
+                socialTelegram: undefined,
+                socialWhats: undefined,
+                socialMail: undefined,
+                socialLink: undefined,
+                avatar: undefined,
+                userName: undefined,
+                greetingText: undefined,
+                buttonBank: undefined,
+              }}
+            />
+          }
+        />
+        <Route
+          path={routes.pageDonations}
+          element={
+            <DonationsPage
+              currentUser={currentUser}
+              initialValues={{
+                active: false,
+                banks: [],
+                socialTelegram: undefined,
+                socialWhats: undefined,
+                socialMail: undefined,
+                socialLink: undefined,
+                avatar: undefined,
+                userName: undefined,
+                greetingText: undefined,
+                buttonBank: undefined,
+              }}
+            />
+          }
+        />
       </Routes>
     </div>
   );