);
export const CommercialImageIcon = () => (
);
export const CloseIcon = () => (
);
export const ChevronDownIcon = () => (
);
export const Buthcering = () => (
);
export const DeliveryCar = () => (
);
// File: src/assets/logo.tsx
import { cn } from "../lib/utils";
export default function Logo({ className }: { className?: string }) {
return (
);
}
// File: src/assets/no-data-icon.tsx
import { cn } from "../lib/utils";
export default function NoDataIcon({ className }: { className?: string }) {
return (
);
}
// File: src/components/accordion.tsx
import { useState } from "react";
import { cn } from "../lib/utils";
export default function Accordion({
title,
children,
}: {
title: string;
children: React.ReactNode;
}) {
const [isOpen, setIsOpen] = useState(true);
return (
{t("add-new-address")}
{errors.name && {errors.name.message && `${t(errors.name.message)} ${t("is-required")}`}}
{emirate?.name}
{region?.name}
{errors.streetName && {errors.streetName.message && `${t(errors.streetName.message)} ${t("is-required")}`}}
{errors.mobile && {errors.mobile.message && `${t(errors.mobile.message)} ${t("is-required")}`}}
{errors.buildingNumber && (
{errors.buildingNumber.message && `${t(errors.buildingNumber.message)} ${t("is-required")}`}
)}
{errors.additionalNumber && (
{errors.additionalNumber.message && `${t(errors.additionalNumber.message)} ${t("is-required")}`}
)}
{errors.apartmentNumber && (
{errors.apartmentNumber.message && `${t(errors.apartmentNumber.message)} ${t("is-required")}`}
)}
{t("address-type")}
{t("saved-addresses")}
{data.map((address) => (
))}
{t("deliver-to")}
{address.emirate.name} - {address.region.name} -{t("street-name")} {address.street_name} - {t("building-number")}{" "}
{address.building_number}
{/* */}
{" "}
{t("language")}
{t("account.change-language")}
{t("account.change-password")}
setPassword(e.target.value)}
/>
setNewPassword(e.target.value)}
/>
setConfirmNewPassword(e.target.value)}
/>
{t("account.edit-profile")}
{t("account.profile-info")}
{t("account.change-password")}
setFirstName(e.target.value)}
/>
setLastName(e.target.value)}
/>
setEmail(e.target.value)}
/>
setMobile(e.target.value)}
/>
{t("account.favourite")}
{data.map((fav) =>
fav.products ? (
{t("account.my-points")}
{t("account.my-points")}
1000
50 {t("account.points")} =
1 {t("AED")}
{t("account.use-points")}
{t("account.use-points-desc")} ={" "}
{t("account.minimum-points")}
{t("account.points-card")}
setPoints(e.target.value)}
/>
{t("account.orders")}
{t("account.retired-military-association")}
{t("account.enter-membership-number")}
{t("account.favourite")}
{t("account.invite-friends")}
{isCountryCodeSelecting && (
{t("account.add-phone")}
setMobile(e.target.value)}
/>
{t("account.special-deals")}
{t("account.special-customer-desc")}
{PROS.map((pro) => (
{pro.icon}
))}
{t(`account.${pro.title}`)}
{t(`account.${pro.desc}`)}
{t("driver-tip")}
{t("driver-tip-desc")}
{t("notes")}
);
}
// File: src/components/cart/payment-method.tsx
import { useTranslation } from "react-i18next";
import useSlaughterStore from "../../store/slaughterStore";
import useCartStore, { CartType } from "../../store/cartStore";
import useDonationsStore from "../../store/donations";
import useGiftsStore from "../../store/giftsStore";
export default function PaymentMethod({ type, paymentMethods }: { paymentMethods: string[]; type?: CartType }) {
const cartPaymentMethod = useCartStore((state) => state.paymentMethod);
const setCartPaymentMethod = useCartStore((state) => state.setPaymentMethod);
const slaughterPaymentMethod = useSlaughterStore((state) => state.paymentMethod);
const setSlaughterPaymentMethod = useSlaughterStore((state) => state.setPaymentMethod);
const donatorPaymentMethod = useDonationsStore((state) => state.paymentMethod);
const setDonatorPaymentMethod = useDonationsStore((state) => state.setPaymentMethod);
const giftPaymentMethod = useGiftsStore((state) => state.paymentMethod);
const setGiftPaymentMethod = useGiftsStore((state) => state.setPaymentMethod);
const paymentMethod =
type === "all"
? cartPaymentMethod
: type === "sacrifices"
? slaughterPaymentMethod
: type === "donations"
? donatorPaymentMethod
: giftPaymentMethod;
const setPaymentMethod =
type === "all"
? setCartPaymentMethod
: type === "sacrifices"
? setSlaughterPaymentMethod
: type === "donations"
? setDonatorPaymentMethod
: setGiftPaymentMethod;
const { t } = useTranslation();
return (
{t("payment-method")}
);
}
// File: src/components/cart/quantity-price.tsx
import axios from "axios";
import { useState } from "react";
import { useTranslation } from "react-i18next";
export default function QuantityPrice({
quantity: initialQuantity,
price,
cart_detail_id,
setTotalPrice,
}: {
quantity: number;
price: number;
cart_detail_id: number;
setTotalPrice: React.Dispatch
{paymentMethods.map((method, idx) => {
if (method === "2") {
return (
{idx !== paymentMethods.length - 1 &&
}
);
} else if (method === "1") {
return (
}
{idx !== paymentMethods.length - 1 &&
}
);
} else if (method === "6") {
return (
}
{idx !== paymentMethods.length - 1 &&
}
);
} else return null;
})}
}
+{quantity * price} {t("AED")}
);
}
// File: src/components/cart/redeem-points.tsx
import { useTranslation } from "react-i18next";
import useUserStore from "../../store/userStore";
import { useRef, useState } from "react";
import { cn } from "../../lib/utils";
import useSlaughterStore from "../../store/slaughterStore";
import useCartStore, { CartType } from "../../store/cartStore";
import useDonationsStore from "../../store/donations";
import useGiftsStore from "../../store/giftsStore";
export default function RedeemPoints({ type = "all" }: { type?: CartType }) {
const cartPoints = useCartStore((state) => state.points);
const setCartPoints = useCartStore((state) => state.setPoints);
const slaughterPoints = useSlaughterStore((state) => state.points);
const setSlaughterPoints = useSlaughterStore((state) => state.setPoints);
const donatorPoints = useDonationsStore((state) => state.points);
const setDonatorPoints = useDonationsStore((state) => state.setPoints);
const giftPoints = useGiftsStore((state) => state.points);
const setGiftPoints = useGiftsStore((state) => state.setPoints);
const points = type === "all" ? cartPoints : type === "sacrifices" ? slaughterPoints : type === "donations" ? donatorPoints : giftPoints;
const setPoints =
type === "all" ? setCartPoints : type === "sacrifices" ? setSlaughterPoints : type === "donations" ? setDonatorPoints : setGiftPoints;
const userPoints = useUserStore((state) => state.user?.points);
const { t } = useTranslation();
const [error, setError] = useState(false);
const ref = useRef
{quantity}
setPointsValue(e.target.value)}
/>
{cartItem.department.name}
{cartItem.details.map((detail) => (
);
}
// File: src/components/cart/request-review-all/choose-address.tsx
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Address, getAddresses } from "../../../actions/getAddresses";
import { useNavigate } from "react-router-dom";
import useModalsStore from "../../../store/modalsStore";
import useCartStore, { CartType } from "../../../store/cartStore";
import useUserStore from "../../../store/userStore";
import useSlaughterStore from "../../../store/slaughterStore";
export default function ChooseAddress({ type = "all" }: { type?: CartType }) {
const { t } = useTranslation();
const [addresses, setAddresses] = useState
{detail.product.name}
{detail.category.name}
+{+detail.product.price * detail.quantity} {t("AED")}
{+detail.quantity}
{addresses.map((add) => (
))}
) : address ? (
) : (
);
}
// File: src/components/cart/request-review-all/choose-delivery-slot.tsx
import { eachDayOfInterval, endOfDay, format, startOfDay } from "date-fns";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import LoadingSpinner from "../../loading-spinner";
import { cn } from "../../../lib/utils";
import axios from "axios";
import { DriverSvg } from "../../../assets/DriverSvg";
import useCartStore, { CollectionItem } from "../../../store/cartStore";
export type DeliveryTime = { available: boolean; from: string; to: string };
export type ShippingMethod = { id: number; name: string; price: number };
export default function ChooseDeliverySlot({ cart_id }: { cart_id: string }) {
const { t } = useTranslation();
const [isChoosingDelivery, setIsChoosingDelivery] = useState(false);
const [dateFrom, setDateFrom] = useState
{t("delivery-selection")}
{shippingMethods.map((_method, idx) => (
))}
{getDatesBetween(dateFrom!, dateTo!).map((_date, idx) => (
))}
{deliveryDay && (
{deliveryTimes.map((_time, idx) => (
))}
)}
{deliveryTime && (
{deliveryPoints.map((point) => (
))}
) : deliveryPoint ? (
) : (
);
}
// File: src/components/cart/request-review-sacrifices/choose-slaughter-day.tsx
import { useState } from "react";
import { DriverSvg } from "../../../assets/DriverSvg";
import { useTranslation } from "react-i18next";
import { Buthcering, Chevron, DeliveryCar } from "../../../assets/icons";
import SelectionModal from "../selection-modal";
import useSlaughterStore from "../../../store/slaughterStore";
export default function ChooseSlaughterDay({ cart_id }: { cart_id: string }) {
const { t } = useTranslation();
const { slaughterDay, deliveryDay, setSlaughterDay, setDeliveryDay } =
useSlaughterStore((state) => state);
const [isChoosingSlaughterDay, setIsChoosingSlaughterDay] = useState(false);
const [isChoosingDeliveryDay, setIsChoosingDeliveryDay] = useState(false);
return (
{t("select-slaughter-day")}
{t("select-delivery-day")}
);
}
// File: src/components/cart/selection-modal.tsx
import { useTranslation } from "react-i18next";
import Modal from "../custom-modal";
import { CloseIcon } from "../../assets/icons";
export default function SelectionModal({
isOpen,
setIsOpen,
selectionTitle,
selectedDay,
setSelectedDay,
optionsCount = 4,
confirmText,
}: {
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
selectionTitle: string;
selectedDay: number | null;
setSelectedDay: (day: number | null) => void;
optionsCount?: number;
confirmText: string;
}) {
const { t } = useTranslation();
return (
{selectionTitle}
{Array.from(
{ length: optionsCount },
(_, index) => index + 1,
).map((day) => (
))}
{selectedDay && (
{t("enter-coupon")}
{error && {t("invalid-coupon")}}
);
}
export type CouponType = {
id: number;
code: string;
percentage: null | number;
value: null | number;
description: string;
expire_at: null;
categories: [];
};
// File: src/components/cart/use-wallet.tsx
import { useTranslation } from "react-i18next";
import useUserStore from "../../store/userStore";
import { useRef, useState } from "react";
import { cn } from "../../lib/utils";
import useSlaughterStore from "../../store/slaughterStore";
import useCartStore, { CartType } from "../../store/cartStore";
import useDonationsStore from "../../store/donations";
import useGiftsStore from "../../store/giftsStore";
export default function UseWallet({ type = "all" }: { type?: CartType }) {
const cartBalance = useCartStore((state) => state.balance);
const setCartBalance = useCartStore((state) => state.setBalance);
const slaughterBalance = useSlaughterStore((state) => state.balance);
const setSlaughterBalance = useSlaughterStore((state) => state.setBalance);
const donatorBalance = useDonationsStore((state) => state.balance);
const setDonatorBalance = useDonationsStore((state) => state.setBalance);
const giftBalance = useGiftsStore((state) => state.balance);
const setGiftBalance = useGiftsStore((state) => state.setBalance);
const balance =
type === "all"
? cartBalance
: type === "sacrifices"
? slaughterBalance
: type === "donations"
? donatorBalance
: giftBalance;
const setBalance =
type === "all"
? setCartBalance
: type === "sacrifices"
? setSlaughterBalance
: type === "donations"
? setDonatorBalance
: setGiftBalance;
const { t } = useTranslation();
const userBalance = useUserStore((state) => state.user?.balance);
const [error, setError] = useState(false);
const ref = useRef
setUsedCoupon(e.target.value)}
/>
setUsedBalance(e.target.value)}
/>
{children}
{t("navlist.home")}
{t("navlist.nav-menu.terms-and-conditions")}
{t("navlist.nav-menu.offers")}
{t("navlist.nav-menu.register-as-a-store")}
{t("navlist.nav-menu.technical-support")}
{t("whatsapp")}: 0097128004664
{t("phone")}: 8004664
info@oasislivestock.com
{t("location")}
{" "}
{t("policy")}
{t("copyright")}
setPassword(e.target.value)}
placeholder={t("modals.password")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 1 && (
{t("modals.password")}{" "} {t("modals.errors.is-required-h")}
)}
setConfirmPassword(e.target.value)}
placeholder={t("modals.confirm-password")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 2 && (
{t("modals.confirm-password")}{" "} {t("modals.errors.is-required")}
)}{t("modals.errors.confirm-password")}
)}
setMobile(e.target.value)}
placeholder={t("modals.mobile")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 1 && (
{t("modals.mobile")} {t("modals.errors.is-required")}
)}
setPassword(e.target.value)}
placeholder={t("modals.password")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 2 && (
{t("modals.password")} {t("modals.errors.is-required-h")}
)}
{t("modals.login.dont-have-account")}{" "}
{t("modals.login-with")}
setMobile(e.target.value)}
placeholder={t("modals.mobile")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 1 && (
{t("modals.mobile")}{" "} {t("modals.errors.is-required")}
)}
0{minutes}:
{seconds < 10 ? `0${seconds}` : seconds}
setFirstName(e.target.value)}
placeholder={t("modals.first-name")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 1 && (
{t("modals.first-name")} {t("modals.errors.is-required")}
)}
setLastName(e.target.value)}
placeholder={t("modals.last-name")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 2 && (
{t("modals.last-name")} {t("modals.errors.is-required")}
)}
setMobile(e.target.value)}
placeholder={t("modals.mobile")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 3 && (
{t("modals.mobile")} {t("modals.errors.is-required-h")}
)}
setPassword(e.target.value)}
placeholder={t("modals.password")}
className="flex-1 font-light text-foreground placeholder:text-[rgba(212,212,212,1)] focus:outline-none"
/>
{error === 4 && (
{t("modals.password")} {t("modals.errors.is-required-h")}
)}
{t("modals.register.already-have-account")}{" "}
{t("modals.login-with")}
{t("navlist.home")}
);
}
// {NAV_LIST.map((item) => (
//
// {t("navlist." + item.title)}
// {item.icon}
//
// ))}
const NAV_LIST = [
{
title: "home",
href: "/",
icon: (
),
},
{
title: "account",
href: "/account",
icon: (
),
},
{
title: "cart",
href: "/cart",
icon: (
),
},
{
title: "notifications",
href: "/notifications",
icon: (
),
},
];
// File: src/components/header/nav-menu.tsx
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { cn } from "../../lib/utils";
export default function NavMenu() {
const [toggle, setToggle] = useState(false);
const { t } = useTranslation();
const ref = useRef
{t("navlist.menu")}
{MENU_LIST.map((item) => (
{item.icon}
{t("navlist.nav-menu." + item.title)}
))}
{t("categories")}
{title}
{title}
{product.badge && (
{product.badge.name}
)}
{product.badges &&
product.badges.length > 0 &&
product.badges.map((badge) => (
{badge.name}
))}
{!!product.limited_offer.has_limited_offer && !isExpired && (
{remainingDays < 10 ? `0${remainingDays}` : remainingDays}:
{remainingHours < 10 ? `0${remainingHours}` : remainingHours}:
{remainginMinutes < 10 ? `0${remainginMinutes}` : remainginMinutes}:
{remainginSeconds < 10 ? `0${remainginSeconds}` : remainginSeconds}
)}
-{discountPrecentage.toFixed(0)}%
)}
{product.shop?.name}
{product.name}
{product.category.name}
{product.price} {t("AED")}
{product.old_price && (
{product.old_price} {t("AED")}
)}
);
}
// File: src/components/home/products-section.tsx
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, A11y, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/a11y";
import "swiper/css/autoplay";
import { useTranslation } from "react-i18next";
import ProductCard from "./product-card";
import Product from "../../types/product";
export default function ProductsSection({
products,
title,
}: {
products: Product[];
title: string;
}) {
const { i18n } = useTranslation();
return (
{title}
{shop.department && (
{shop.department.name}
)}
{t("rate")}
{shop.rating}
{shop.name}
);
}
// File: src/components/home/shops-section.tsx
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, A11y, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/a11y";
import "swiper/css/autoplay";
import { useTranslation } from "react-i18next";
import ShopCard from "./shop-card";
import { Shop } from "../../types/shop";
export default function ShopsSection({ shops, title }: { shops: Shop[]; title: string }) {
const { i18n } = useTranslation();
return (
{title}
Loading...
);
}
// File: src/components/modals/MapModal.tsx
import React, { useState } from "react";
import {
GoogleMap,
useJsApiLoader,
MarkerF,
Libraries,
} from "@react-google-maps/api";
import LoadingSpinner from "../loading-spinner";
import Logo from "../../assets/logo";
import { useTranslation } from "react-i18next";
import { cn } from "../../lib/utils";
import { Country } from "../../types/user";
import axios from "axios";
import useUserStore, { Region } from "../../store/userStore";
import useModalsStore from "../../store/modalsStore";
import Search from "./search";
import { toast } from "react-toastify";
import { useNavigate } from "react-router-dom";
import Cookies from "js-cookie";
import { CloseIcon } from "../../assets/icons";
import CustomModal from "../custom-modal";
const libraries: Libraries = ["places"];
const mapContainerStyle: React.CSSProperties = {
width: "100%",
height: "678px",
};
interface MapState {
map?: google.maps.Map;
marker: google.maps.LatLngLiteral;
infoWindowOpen: boolean;
userLocation?: google.maps.LatLngLiteral;
}
const uaeCenter: google.maps.LatLngLiteral = {
lat: 24.469072681902656,
lng: 54.37144234303175,
};
const ksaCenter: google.maps.LatLngLiteral = {
lat: 24.774265,
lng: 46.738586,
};
const omCenter: google.maps.LatLngLiteral = {
lat: 23.614328,
lng: 58.545284,
};
const zoom = 14;
const MapModal = () => {
const isMapModalOpen = useModalsStore((state) => state.isMapModalOpen);
const setMapModalOpen = useModalsStore((state) => state.setMapModalOpen);
const { isLoaded } = useJsApiLoader({
id: "google-map-script",
googleMapsApiKey: "AIzaSyCMR0GifIRTiL2qcJgMhq1l4xp2ydau7FI",
libraries: libraries,
});
const [map, setMap] = useState
{step === 1 && (
) : (
);
};
export default MapModal;
// File: src/components/modals/language-country-modal.tsx
import { useState } from "react";
import Logo from "../../assets/logo";
import { cn } from "../../lib/utils";
import { Country, Language } from "../../types/user";
import useUserStore from "../../store/userStore";
import { useTranslation } from "react-i18next";
import useModalsStore from "../../store/modalsStore";
import Cookies from "js-cookie";
export default function LanguageCountryModal() {
const {
isLanguageCountryModalOpen,
setLanguageCountryModalOpen,
setLoginModalOpen,
} = useModalsStore();
const [step, setStep] = useState<1 | 2>(1);
const user = useUserStore((state) => state.user);
const { i18n, t } = useTranslation();
const [lang, setLang] = useState
{t("modals.select-country")}
)}
{step === 3 && (
<>
{t("modals.select-region")}
)}
{regions?.map((_region) => (
))}
{user?.address
.filter((add) => add.emirate?.id === emirate?.id)
.map((address) => (
))}
{icon}
{title}
{content &&
{content}
}
{status === "OK" && (
);
}
// File: src/components/modals/select-country-code.tsx
import { useTranslation } from "react-i18next";
import countries from "../../assets/countries.json";
import { cn } from "../../lib/utils";
export default function SelectCountryCode({
countryCode,
setCountryCode,
setIsCountryCodeSelecting,
}: {
countryCode: string;
setCountryCode: (code: string) => void;
setIsCountryCodeSelecting: (isSelecting: boolean) => void;
}) {
const { t } = useTranslation();
return (
<>
{t("modals.select-country-code")}
-
{renderSuggestions()}
{countries.map((country) => (
))}
);
}
// File: src/components/scroll-to-top.tsx
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
// File: src/components/terms-conditions/terms-accordion.tsx
import { useState } from "react";
import { cn } from "../../lib/utils";
export default function TermsAccordion({ title, children }: { title: string; children: React.ReactNode }) {
const [isOpen, setIsOpen] = useState(false);
return (
{isOpen &&
);
}
// File: src/error-page.tsx
import { Link } from "react-router-dom";
export default function ErrorPage() {
return (
<>
{children}
}
404 Error
Sorry! We could not find you the page you are looking for. Please check URL in address bar and try again.
Go to Homepage
{user?.first_name} {user?.last_name}
+{user?.country_code}
{user?.mobile}
{linkData.map(({ to, bgColor, Component, text }, index) => (
{t("account.get-points")}
{t("account.get-points-desc")}
{links.map(({ to, icon, text }, index) => (
{icon}
{t(text)}
))}
{t("cart")}
{tabButtons.map(({ key, filter }) => (
))}
{filteredCartItems.length > 0 ? (
{filteredCartItems.map((item, idx) => (
))}
) : (
{t("delivery-no")} {idx + 1}
{item.details.map((detail) => (
{
detail.product
.name
}
{
detail.category
.name
}
{t("price")}
{totalPrice} {t("AED")}
{t("complete-order")}
{data.name}
{data.sub_categories.length > 0 && (
{data.sub_categories?.map((subCategory, idx) => (
))}
)}
{data.sub_categories.length > 0 && (data.sub_categories[subCategoryIndex]?.sub_categories?.length ?? 0) > 0 && (
{t("species")} {data.sub_categories[subCategoryIndex].name}{" "} {t("species")}
{data.sub_categories[subCategoryIndex]?.sub_categories?.map((subCategory) => (
{subCategory.name}
))}
{data.limited_offer && data.limited_offer.length > 0 && (
{t("offers")}
{t("all-products")}
{data.products.map((product) => (
{t("all-shops")}
{data.shops.map((shop) => (
{data.name}
{+data.price * quantity} {t("AED")}
),
});
} catch (error) {
toast.error(t("messages.failed-to-add"));
}
setLoading(false);
};
return (
<>
{data.name}
{data.badge && (
{data.badge.name}
)}
{data.badges &&
data.badges.length > 0 &&
data.badges.map((badge) => (
{badge.name}
))}
{!!data.limited_offer.has_limited_offer &&
!isExpired && (
{remainingDays < 10
? `0${remainingDays}`
: remainingDays}
:
{remainingHours < 10
? `0${remainingHours}`
: remainingHours}
:
{remainginMinutes < 10
? `0${remainginMinutes}`
: remainginMinutes}
:
{remainginSeconds < 10
? `0${remainginSeconds}`
: remainginSeconds}
)}
-{discountPrecentage.toFixed(0)}%
)}
{data.name}
{data.price} {t("AED")}
{data.shop?.name || data.department.name}
{data.category.name}
{data.description && (
)}
{data.sub_product && data.sub_product.length > 0 && (
)}
{data.attributes &&
data.attributes.length > 0 &&
data.attributes.map((attribute) => {
if (attribute.section_name === "textarea")
return (
);
if (attribute.section_name === "without")
return (
);
if (attribute.section_name === "cutting")
return (
{attribute.values.map(
(value, idx) => (
),
)}
);
if (attribute.section_name === "packaging")
return (
{attribute.values.map(
(value, idx) => (
),
)}
);
return null;
})}
{data.description}
{data.sub_product.map((subProduct, index) => (
{data.sub_product &&
index !==
data.sub_product.length - 1 && (
)}
))}
)}
{attribute.values.map(
(value, idx) => (
{idx !==
attribute.values
.length -
1 && (
)}
),
)}
)}
{/*
);
}
// File: src/routes/register-store.tsx
import { useState } from "react";
import { useTranslation } from "react-i18next";
import SelectCountryCode from "../components/modals/select-country-code";
import {
ChevronDownIcon,
CloseIcon,
CommercialImageIcon,
CompanyProfileIcon,
CompanyTypeIcon,
EmailIcon,
MobileNumberIcon,
StoreIcon,
UAEAvailableIcon,
} from "../assets/icons";
export default function RegisterStore() {
const { t } = useTranslation();
const [isCountryCodeSelecting, setIsCountryCodeSelecting] = useState(false);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [uaeAvailable, setUaeAvailable] = useState("");
const [companyProfile, setCompanyProfile] = useState("");
const [companyType, setCompanyType] = useState("");
const [mobile, setMobile] = useState("");
const [countryCode, setCountryCode] = useState("971");
return (
{t("cook")}
*/}
{t("quantity")}
{quantity}
{t("price")}
{+data.price * quantity} {t("AED")}
{t("register-store")}
{t("register-store-desc")}{" "} {t("terms-and-conditions")}
{isCountryCodeSelecting && ({t("cart")}
{t("order-cost")}
+{toArabic(orderCost.toFixed(2))} {t("AED")}
{t("delivery")}
+{toArabic((+deliveryPrice + +driverTip).toFixed(2))} {t("AED")}
{t("added-tax")}
+{toArabic(tax.toFixed(2))} {t("AED")}
{t("discount")}
-{toArabic((discount + +balance + (coupon?.value ?? 0) + ((coupon?.percentage ?? 0) * orderCost) / 100).toFixed(2))}{" "}
{t("AED")}
{t("my-points")}
-{toArabic((+points / 100).toFixed(2))} {t("AED")}
{t("total")}
{toArabic((+total - +points / 100 - +balance).toFixed(2))} {t("AED")}
{t("delivery")}
{t("recipient")}
{t("recipient-select")}
{toggle && (
<>
setName(e.target.value)}
placeholder={t("recipient-name")}
className="w-full text-[rgba(38,38,38,1)] placeholder:text-[rgba(163,163,163,1)] focus:outline-none"
/>
{t("recipient-contact")}
setMobile(e.target.value)}
placeholder={t("contact-number")}
className="w-full text-lg text-[rgba(38,38,38,1)] placeholder:text-[rgba(163,163,163,1)] focus:outline-none"
/>
{t("paying-off")}
{isCountryCodeSelecting && (
{t("cart")}
{t("order-cost")}
+{toArabic(orderCost.toFixed(2))} {t("AED")}
{t("delivery")}
+
{toArabic(
(+deliveryPrice + +driverTip).toFixed(2),
)}{" "}
{t("AED")}
{t("added-tax")}
+{toArabic(tax.toFixed(2))} {t("AED")}
{t("discount")}
-
{toArabic(
(
discount +
+balance +
(coupon?.value ?? 0) +
((coupon?.percentage ?? 0) *
orderCost) /
100
).toFixed(2),
)}{" "}
{t("AED")}
{t("my-points")}
-{toArabic((+points / 100).toFixed(2))}{" "}
{t("AED")}
{t("total")}
{toArabic(
(+total - +points / 100 - +balance).toFixed(
2,
),
)}{" "}
{t("AED")}
{t("search")}
{data.length === 0 ? ({t("all-products")}
{data.map((product) => (
)}
{data.name}
{data.menus.map((tab) => (
))}
)}
{filteredProducts.length > 0 &&