Initial commit
This commit is contained in:
273
src/pages/address/address.module.css
Normal file
273
src/pages/address/address.module.css
Normal file
@@ -0,0 +1,273 @@
|
||||
.productContainer :global(.ant-radio-wrapper:last-child) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio-label) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* radio.module.css */
|
||||
.productContainer :global(.ant-radio-inner) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-radio-checked .ant-radio-inner) {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-wrapper:last-child) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-label) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* .productContainer :global(.ant-checkbox-input) {
|
||||
margin-top: 5px !important;
|
||||
} */
|
||||
|
||||
.productContainer :global(.ant-checkbox-inner) {
|
||||
border-radius: 40px !important;
|
||||
}
|
||||
|
||||
/* CheckboxGroup.module.css */
|
||||
.productContainer :global(.ant-checkbox-inner) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox) {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.productContainer :global(.ant-checkbox-checked .ant-checkbox-inner) {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.services {
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.services :global(.ant-btn) {
|
||||
padding: 0 11px !important;
|
||||
}
|
||||
|
||||
.serviceButton {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
height: 32px;
|
||||
color: #99a2ae;
|
||||
background-color: #f7f7f7;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.activeServiceButton {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
color: #ffb700;
|
||||
background-color: rgba(255, 183, 0, 0.12);
|
||||
width: 70px !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .services {
|
||||
color: #ffffff !important;
|
||||
background-color: #000000 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:global(.darkApp) .serviceButton {
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border: none;
|
||||
width: 70px !important;
|
||||
border-radius: 888px;
|
||||
}
|
||||
|
||||
:global(.darkApp) .activeServiceButton {
|
||||
color: #ffb700 !important;
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border: none;
|
||||
width: 70px !important;
|
||||
border-radius: 888px;
|
||||
}
|
||||
|
||||
/* Checkout Page Styles */
|
||||
.checkoutContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 80vh;
|
||||
min-height: 80vh;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* AddressSummary Styles */
|
||||
.addressCard {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.noLocationContainer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mapContainer {
|
||||
height: 260px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* BriefMenu Styles */
|
||||
.briefMenuContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.briefMenuItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.quantityButton {
|
||||
background-color: rgba(255, 183, 0, 0.08);
|
||||
}
|
||||
|
||||
.itemName {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* CheckoutButton Styles */
|
||||
.checkoutButtonContainer {
|
||||
width: 100%;
|
||||
padding: 16px 16px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 10vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
gap: 1rem;
|
||||
background-color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.splitBillButton {
|
||||
border-radius: 100px;
|
||||
height: 48px;
|
||||
border-color: black;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.placeOrderButton {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* GiftDetails, OfficeDetails, RoomDetails Styles */
|
||||
.detailsCard {
|
||||
/* Base card styles if needed */
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detailsRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detailItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
background-color: rgba(255, 183, 0, 0.08);
|
||||
}
|
||||
|
||||
.detailLabel {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Dark theme styles for checkout */
|
||||
:global(.darkApp) .checkoutButtonContainer {
|
||||
background-color: #000000 !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .splitBillButton {
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border-color: #ffffff !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .placeOrderButton {
|
||||
background-color: #ffb700 !important;
|
||||
border-color: #ffb700 !important;
|
||||
}
|
||||
|
||||
/* Additional styles for checkout components */
|
||||
.iconCenterContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detailsRowContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detailItemContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.iconButtonStyle {
|
||||
background-color: rgba(255, 183, 0, 0.08);
|
||||
}
|
||||
|
||||
.detailLabelStyle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.smallTextStyle {
|
||||
font-size: 12px;
|
||||
}
|
||||
196
src/pages/address/page.tsx
Normal file
196
src/pages/address/page.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
92
src/pages/address/types.ts
Normal file
92
src/pages/address/types.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
export interface ProductDetails {
|
||||
data: Daum[]
|
||||
name: string
|
||||
nameAR: string
|
||||
image: string
|
||||
price: number
|
||||
variants: Variant[]
|
||||
theExtrasGroups: TheExtrasGroup[]
|
||||
discount: number
|
||||
options: Option[]
|
||||
hasVariants: number
|
||||
currency: string
|
||||
short_description: string
|
||||
short_descriptionAR: string
|
||||
}
|
||||
|
||||
export interface Daum {
|
||||
id: number
|
||||
name: string
|
||||
data: string[]
|
||||
prices: string[]
|
||||
pricesNew: string[]
|
||||
nameAR: string
|
||||
dataAR: string[]
|
||||
}
|
||||
|
||||
export interface Variant {
|
||||
id: number
|
||||
price: number
|
||||
options: string
|
||||
image: string
|
||||
qty: number
|
||||
enable_qty: number
|
||||
order: number
|
||||
item_id: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
deleted_at: any
|
||||
available: string
|
||||
OptionsList: string
|
||||
extras: any[]
|
||||
}
|
||||
|
||||
export interface TheExtrasGroup {
|
||||
id: number
|
||||
name: string
|
||||
nameAR: string
|
||||
label: string
|
||||
labelAR: string
|
||||
limit: number
|
||||
item_id: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
deleted_at: any
|
||||
force_limit_selection: number
|
||||
extras: Extra[]
|
||||
}
|
||||
|
||||
export interface Extra {
|
||||
id: number
|
||||
item_id: number
|
||||
price: number
|
||||
name: string
|
||||
nameAR: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
deleted_at: any
|
||||
extra_for_all_variants: number
|
||||
is_custome: number
|
||||
is_available: number
|
||||
modifier_id: any
|
||||
pivot: Pivot
|
||||
}
|
||||
|
||||
export interface Pivot {
|
||||
group_id: number
|
||||
extra_id: number
|
||||
}
|
||||
|
||||
export interface Option {
|
||||
id: number
|
||||
item_id: number
|
||||
name: string
|
||||
nameAR: string
|
||||
options: string
|
||||
optionsAR: string
|
||||
optionprices: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
deleted_at: any
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user