Initial commit

src/pages/address/page.tsx

@@ -0,0 +1,196 @@
+import { Button, Card, Divider, Form, Input, Row } from "antd";
+import ApartmentIcon from "components/Icons/address/ApartmentIcon";
+import HouseIcon from "components/Icons/address/HouseIcon";
+import OfficeIcon from "components/Icons/address/OfficeIcon";
+import ProHeader from "components/ProHeader/ProHeader";
+import ProText from "components/ProText";
+import { selectCart } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
+import { AddressSummary } from "../checkout/components/AddressSummary";
+import styles from "./address.module.css";
+
+export default function AddressPage() {
+  const { t } = useTranslation();
+  const { location } = useAppSelector(selectCart);
+  const [form] = Form.useForm();
+  const { id } = useParams();
+
+  return (
+    <>
+      <ProHeader>{t("address.title")}</ProHeader>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "80vh",
+          minHeight: "80vh",
+          padding: 16,
+          overflowY: "auto",
+          scrollbarWidth: "none",
+          marginBottom: "10vh",
+        }}
+      >
+        <AddressSummary />
+
+        <Card style={{ marginTop: 16 }} title={t("addressDetails")}>
+          <div className={styles.services}>
+            <Button className={styles.serviceButton} icon={<ApartmentIcon />}>
+              <ProText
+                style={{ fontWeight: "bold", color: "rgba(95, 108, 123, 1)" }}
+              >
+                {t("apartment")}
+              </ProText>
+            </Button>
+            <Button className={styles.serviceButton} icon={<HouseIcon />}>
+              <ProText
+                style={{ fontWeight: "bold", color: "rgba(95, 108, 123, 1)" }}
+              >
+                {t("house")}
+              </ProText>
+            </Button>
+            <Button className={styles.serviceButton} icon={<OfficeIcon />}>
+              <ProText
+                style={{ fontWeight: "bold", color: "rgba(95, 108, 123, 1)" }}
+              >
+                {t("office")}
+              </ProText>
+            </Button>
+          </div>
+
+          <Divider style={{ margin: "17px 0 0 0" }} />
+
+          <Form
+            layout="vertical"
+            style={{ marginTop: 12 }}
+            name="loginForm"
+            form={form}
+          >
+            <div style={{ display: "flex", gap: 10 }}>
+              <Form.Item
+                label={t("floor")}
+                name="floor"
+                rules={[{ required: true, message: "" }]}
+              >
+                <Input
+                  placeholder={t("floor")}
+                  style={{
+                    fontSize: 14,
+                  }}
+                  autoFocus={false}
+                />
+              </Form.Item>{" "}
+              <Form.Item
+                label={t("aptNumber")}
+                name="apt"
+                rules={[{ required: true, message: "" }]}
+              >
+                <Input
+                  placeholder={t("aptNumber")}
+                  style={{
+                    fontSize: 14,
+                  }}
+                  autoFocus={false}
+                />
+              </Form.Item>
+            </div>
+            <Form.Item
+              label={t("street")}
+              name="street"
+              rules={[{ required: true, message: "" }]}
+            >
+              <Input
+                placeholder={t("street")}
+                style={{
+                  fontSize: 14,
+                }}
+                autoFocus={false}
+              />
+            </Form.Item>
+            <Form.Item
+              label={t("additionalDirection")}
+              name="additional"
+              rules={[{ required: true, message: "" }]}
+            >
+              <Input
+                placeholder={t("additionalDirection")}
+                style={{
+                  fontSize: 14,
+                }}
+                autoFocus={false}
+              />
+            </Form.Item>
+
+            <Form.Item
+              label={t("mobileNumber")}
+              name="phone"
+              rules={[{ required: true, message: "" }]}
+            >
+              <Input
+                placeholder={t("mobileNumber")}
+                style={{
+                  fontSize: 14,
+                }}
+                autoFocus={false}
+              />
+            </Form.Item>
+
+            <Form.Item
+              label={t("addressLabel")}
+              name="addressLabel"
+              rules={[{ required: true, message: "" }]}
+            >
+              <Input
+                placeholder={t("addressLabel")}
+                style={{
+                  fontSize: 14,
+                }}
+                autoFocus={false}
+              />
+            </Form.Item>
+          </Form>
+        </Card>
+      </div>
+      <Row
+        style={{
+          width: "100%",
+          padding: "16px 16px 0",
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          backgroundColor: "white",
+          boxShadow: "0px -1px 3px rgba(0, 0, 0, 0.1)",
+          height: "10vh",
+        }}
+      >
+        <Link
+          to={`/${id}/menu?orderType=delivery`}
+          style={{ width: "100%" }}
+          onClick={() => {
+            localStorage.setItem("orderType", "delivery");
+          }}
+        >
+          <Button
+            type="primary"
+            size="large"
+            style={{
+              width: "100%",
+              borderRadius: 1000,
+              backgroundColor: !location
+                ? "rgba(233, 233, 233, 1)"
+                : colors.primary,
+              color: "#FFF",
+              height: 50,
+              border: "none",
+            }}
+            disabled={false}
+          >
+            {t("saveAddress")}
+          </Button>
+        </Link>
+      </Row>
+    </>
+  );
+}