Skip to content

Commit

Permalink
Internationalization
Browse files Browse the repository at this point in the history
Prince-Kid committed Jul 23, 2024
1 parent bfbe99d commit 7370f62
Showing 11 changed files with 513 additions and 299 deletions.
3 changes: 2 additions & 1 deletion src/Components/Homepage/AboutCrafters.tsx
Original file line number Diff line number Diff line change
@@ -11,7 +11,8 @@ const AboutCrafters: React.FC = () => {
>
<h2 className="text-2xl sm:text-3xl font-bold mb-12 mt-32">
{" "}
ABOUT <span className="text-secondary"> CRAFTERS </span>
{t("ABOUT")}
<span className="text-secondary"> CRAFTERS </span>
</h2>
<div className="container flex flex-col md:flex-row gap-8 md:gap-20">
<div className="flex-none w-full md:w-1/3 mb-8">
53 changes: 34 additions & 19 deletions src/Components/Homepage/PopularProducts.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPopularProducts } from '../../Redux/features/PopularProductsSlice';
import { RootState, AppDispatch } from '../../Redux/store';
import { useNavigate } from 'react-router-dom';

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchPopularProducts } from "../../Redux/features/PopularProductsSlice";
import { RootState, AppDispatch } from "../../Redux/store";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
const PopularProducts: React.FC = () => {
const dispatch = useDispatch<AppDispatch>();
const { products, loading, error } = useSelector((state: RootState) => state.popularProducts);
const { products, loading, error } = useSelector(
(state: RootState) => state.popularProducts
);
const navigate = useNavigate();

const { t } = useTranslation();
useEffect(() => {
dispatch(fetchPopularProducts());
}, [dispatch]);
@@ -32,22 +34,35 @@ const PopularProducts: React.FC = () => {
<div className="mb-8">
<div className="flex items-center">
<div className="w-24 h-2 bg-secondary mr-4"></div>
<h2 className="text-xl sm:text-2xl font-bold text-black">POPULAR PRODUCTS</h2>
<h2 className="text-xl sm:text-2xl font-bold text-black">
{t("POPULAR PRODUCTS")}
</h2>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
{displayProducts.map((product) => (
<div key={product.productId} className=" cursor-pointer rounded-t-[12px] shadow-md" onClick={() => handleCardClick(product.productId)}>
<img src={product.image[0]} alt={product.name} className=" rounded-t-[12px] h-[30vh] " />
<div className='flex flex-col p-2'>

<p className="md:text-lg sm:text-sm text-gray-500">{product.category}</p>
<h3 className="md:text-xl sm:text-lg text-secondary">{product.name}</h3>
<div
key={product.productId}
className=" cursor-pointer rounded-t-[12px] shadow-md"
onClick={() => handleCardClick(product.productId)}
>
<img
src={product.image[0]}
alt={product.name}
className=" rounded-t-[12px] h-[30vh] "
/>
<div className="flex flex-col p-2">
<p className="md:text-lg sm:text-sm text-gray-500">
{product.category}
</p>
<h3 className="md:text-xl sm:text-lg text-secondary">
{product.name}
</h3>
<div className="flex justify-between items-center mt-2">
<p className="md:text-xl sm:text-lg font-semibold text-gray-900">{product.price} Rwf</p>
<button
className="text-secondary text-xl sm:text-xl"
>
<p className="md:text-xl sm:text-lg font-semibold text-gray-900">
{product.price} Rwf
</p>
<button className="text-secondary text-xl sm:text-xl">
<svg
width="30"
height="34"
11 changes: 4 additions & 7 deletions src/Components/Modal/EmailSents.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
import React from 'react';
import React from "react";

interface emailProps {
email?: string
email?: string;
}

const EmailSents: React.FC<emailProps> = ({ email }) => (
<div className="w-full p-4 z-40 absolute bg-black/50 h-full top-0 flex items-center justify-center">
<div className="w-full p-4 lg:w-1/3 h-1/4 bg-white rounded-[12px] flex items-center justify-center">
<h1 className="font-outfit flex flex-col text-[18px] font-[400] items-center text-center">
<span>
Check Your gmail inbox
</span>
<span>Check Your gmail inbox</span>
<span className="font-[300]">{email}</span>
</h1>
</div>
</div>

);

export default EmailSents;
export default EmailSents;
19 changes: 14 additions & 5 deletions src/Components/OrderTracking/contactInfo.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import { useGetOrderQuery } from "../../Redux/OrderSlice";
import { useTranslation } from "react-i18next";

interface ContactInfoProps {
contactName: string;
@@ -22,21 +23,29 @@ export const ContactInfo: React.FC<ContactInfoProps> = ({
if (!data) return <p>No order details available</p>;

const deliveryAddress = data.deliveryAddress;

const { t } = useTranslation();
return (
<>
<div className="flex flex-col gap-12 lg:flex-row justify-between border-b pb-8 font-outfit lg:pl-0">
<div className="delivery-address ">
<h3 className="font-bold pb-2 font-poppins">Delivery Address</h3>
<h3 className="font-bold pb-2 font-poppins">
{t("Delivery Address")}
</h3>
<p className="text-gray-400">
{deliveryAddress.city}, {deliveryAddress.street}
</p>
</div>

<div className="contact">
<h3 className="font-bold pb-2 font-poppins">Contact Details</h3>
<p className="text-gray-400">Name: {contactName}</p>
<p className="text-gray-400">Email: {email}</p>
<h3 className="font-bold pb-2 font-poppins">
{t("Contact Details")}
</h3>
<p className="text-gray-400">
{t("Name")}: {contactName}
</p>
<p className="text-gray-400">
{t("Email")}: {email}
</p>
</div>
</div>
</>
16 changes: 9 additions & 7 deletions src/Components/OrderTracking/orderDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,37 @@
import React from "react";
import { useGetOrderQuery } from "../../Redux/OrderSlice";
import { useTranslation } from "react-i18next";

interface OrderDetailsProps {
orderId?: string;
}

const OrderDetails: React.FC<OrderDetailsProps> = ({ orderId }) => {
const { data: order, error, isLoading } = useGetOrderQuery({ orderId });

const { t } = useTranslation();
if (error) {
console.error("Error fetching order:", error);
return <p>Error fetching order details</p>;
return <p>{t("Error fetching order details")}</p>;
}

if (isLoading) return <p>Loading...</p>;

if (!order) return <p>No order details available</p>;
if (!order) return <p>{t("No order details available")}</p>;

const { status, createdAt, expectedDeliveryDate } = order;

return (
<>
<div className=" ">
<div className="font-poppins font-bold pb-8">
<p>Order #{orderId}</p>
<p>
{t("Order")} #{orderId}
</p>
</div>

<div className="flex flex-col gap-8 justify-between pb-8 lg:flex-row font-outfit">
<div className="placed-date">
<p className="text-gray-400">Placed On</p>
<p className="text-gray-400">{t("Placed On")}</p>
<p>
{new Date(createdAt).toLocaleDateString("en-US", {
year: "numeric",
@@ -38,7 +41,7 @@ const OrderDetails: React.FC<OrderDetailsProps> = ({ orderId }) => {
</p>
</div>
<div className="expected-delivery pr-10">
<p className="text-gray-400">Expected Delivery Date</p>
<p className="text-gray-400">{t("Expected Delivery Date")}</p>
<p>
{expectedDeliveryDate
? new Date(expectedDeliveryDate).toLocaleDateString("en-US", {
@@ -50,7 +53,6 @@ const OrderDetails: React.FC<OrderDetailsProps> = ({ orderId }) => {
</p>
</div>
</div>

</div>
</>
);
23 changes: 14 additions & 9 deletions src/Components/OrderTracking/orderProductDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import { useGetOrderQuery } from "../../Redux/OrderSlice";
import { useTranslation } from "react-i18next";

interface Product {
productName: string;
@@ -12,31 +13,35 @@ interface OrderDetailsProps {
orderId?: string;
}

export const OrderProductDetails: React.FC<OrderDetailsProps> = ({ orderId }) => {
export const OrderProductDetails: React.FC<OrderDetailsProps> = ({
orderId,
}) => {
const { data: order, error, isLoading } = useGetOrderQuery({ orderId });

const { t } = useTranslation();
if (error) {
console.error("Error fetching order: ", error);
return <p>Error fetching product details</p>;
return <p>{t("Error fetching product details")}</p>;
}

if (isLoading) return <p>Loading...</p>;

if (!order) return <p>No product found </p>;
if (!order) return <p>{t("No product found")}</p>;

const { products } = order;
return (
<>
<div className="container font-outfit">
<h3 className="font-bold mb-4 text-lg font-poppins">Order Details</h3>
<h3 className="font-bold mb-4 text-lg font-poppins">
{t("Order Details")}
</h3>
<div>
<table className="min-w-full bg-white">
<thead>
<tr className=" text-left">
<th className="text-primary ">Product</th>
<th className="text-primary">Quantity</th>
<th className="text-primary">Price</th>
<th className="text-primary">Total</th>
<th className="text-primary ">{t("Product")}</th>
<th className="text-primary">{t("Quantity")}</th>
<th className="text-primary">{t("Price")}</th>
<th className="text-primary">{t("Total")}</th>
</tr>
</thead>
<tbody>
Loading

0 comments on commit 7370f62

Please sign in to comment.