Skip to content

Commit

Permalink
Merge pull request #95 from rushikesh2404/summit-R
Browse files Browse the repository at this point in the history 
RTL layout changes
  • Loading branch information
@Shadab-khan207
Shadab-khan207 authored Sep 27, 2023
2 parents 1da88d8 + c471bd7 commit cb7421a
Show file tree
Hide file tree
Showing 39 changed files with 1,152 additions and 776 deletions.
10 changes: 8 additions & 2 deletions _app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Provider } from "react-redux";
import { Provider, useSelector } from "react-redux";
// import "../styles/globals.css";
import type { AppProps } from "next/app";
import { persistor, store } from "../store/store";
Expand Down Expand Up @@ -34,7 +34,13 @@ function MyApp({ Component, pageProps }: AppProps) {
const TRACKING_ID = "G-JEKLX6CZRT";
ReactGA.initialize(TRACKING_ID);
}, []);

useEffect(() => {
const isRTL: any = document.documentElement.dir === "rtl";
// Load the appropriate global CSS file based on text direction
if (isRTL) {
import("../styles/pages/CssLayout-rtl.scss");
}
}, []);
return (
<div>
<Script
Expand Down
60 changes: 42 additions & 18 deletions cards/CartCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const CartCard = ({

return (
<>
<div className="d-lg-block d-none " >
<div className="d-lg-block d-none ">
<div className="row text-center cart_wrapper-detail">
<div className="col-lg-7 text-start">
<Link
Expand All @@ -68,15 +68,20 @@ const CartCard = ({
<a className="prod_name products-name">{orders.item_name}</a>
</Link>
<br />
<b className="products-name item-code-line-height ">Item code : {orders.item_code}</b>
<b className="products-name item-code-line-height d-inline-flex">
Item code :<span>{orders.item_code}</span>
</b>
<p>
<button
className="astext product-font-family line-height"
onClick={() =>
HandleDeleteCart(orders.item_code, cartListingItems.name)
}
>
<Link href="" className="text-primary product-font-family line-height-delete">
<Link
href=""
className="text-primary product-font-family line-height-delete"
>
{selectedMultiLangData?.delete}
</Link>
</button>
Expand All @@ -86,14 +91,14 @@ const CartCard = ({
{orders?.details.length > 0 &&
orders?.details !== null &&
(orders?.details[1]?.value !== 0 ? (
<p className="text-center price_font_family products-name">
<p className="text-center price_font_family products-name d-inline-flex">
{orders?.currency_symbol}
<span className="text-center products-name">
<IndianNumber value={orders.details[1]?.value} />
</span>
</p>
) : (
<p className="border button_color price_request products-name ">
<p className="border button_color price_request">
{selectedMultiLangData?.price_on_request}
</p>
))}
Expand Down Expand Up @@ -131,9 +136,9 @@ const CartCard = ({
/>
</div> */}
<div className="col-2 price_font_family">
<p className="products-name">
<p className="products-name d-inline-flex">
{orders.currency_symbol}
{orders.amount}
<span>{orders.amount}</span>
</p>
</div>
</div>
Expand All @@ -150,15 +155,15 @@ const CartCard = ({
<div className="col-5">
<Link href={`${orders.product_url}`} legacyBehavior>
<a className="prod_name products-name">{orders.item_name}</a>
</Link><br/>
</Link>
<br />
<b>{orders.item_code}</b>
<p className="my-0">
<button
className="astext"
onClick={() =>
HandleDeleteCart(orders.item_code, cartListingItems.name)
}

>
<Link href="" className="text-primary">
{selectedMultiLangData?.delete}
Expand All @@ -168,7 +173,11 @@ const CartCard = ({
</div>
</div>
<div className="row">
<div className="col-6 fs-4 products-name"> {selectedMultiLangData?.price}</div>:
<div className="col-6 fs-4 products-name">
{" "}
{selectedMultiLangData?.price}
</div>
:
<div className="col-5 text-start">
{orders?.details.length > 0 &&
orders?.details !== null &&
Expand All @@ -188,25 +197,37 @@ const CartCard = ({
</div>
</div>
<div className="row">
<div className="col-6 fs-4 products-name">{selectedMultiLangData?.unit_weight}</div>
:<div className="col-5 text-start products-name">{orders.weight_per_unit}</div>
<div className="col-6 fs-4 products-name">
{selectedMultiLangData?.unit_weight}
</div>
:
<div className="col-5 text-start products-name">
{orders.weight_per_unit}
</div>
</div>
<div className="row">
<div className="col-6 fs-4 products-name">
{selectedMultiLangData?.total_weight}
</div>
:<div className="col-5 text-start products-name">{orders.total_weight}</div>
:
<div className="col-5 text-start products-name">
{orders.total_weight}
</div>
</div>
<div className="row">
<div className="col-6 fs-4 products-name">
{selectedMultiLangData?.tax} </div>:
<div className="col-5 text-start price_font_family" >
{selectedMultiLangData?.tax}{" "}
</div>
:
<div className="col-5 text-start price_font_family">
{orders.currency_symbol}
{orders.tax}
</div>
</div>
<div className="row my-5">
<div className="col-6 fs-4 products-name">{selectedMultiLangData?.quantity_c} </div>
<div className="col-6 fs-4 products-name">
{selectedMultiLangData?.quantity_c}{" "}
</div>
:
<div className="col-5 ">
<input
Expand All @@ -221,7 +242,7 @@ const CartCard = ({
<button
type="button"
className="text-start astext"
// onClick={() => UpdateCart(orders.item_code)}
// onClick={() => UpdateCart(orders.item_code)}
>
<Link href="" legacyBehavior>
<a className="text-primary">{selectedMultiLangData?.update}</a>
Expand All @@ -230,7 +251,10 @@ const CartCard = ({
</div>
</div>
<div className="row">
<div className="col-6 fs-4 products-name">{selectedMultiLangData?.total} </div>:
<div className="col-6 fs-4 products-name">
{selectedMultiLangData?.total}{" "}
</div>
:
<div className="col-5 price_font_family products-name">
{orders.currency_symbol}
{orders.amount}
Expand Down
103 changes: 53 additions & 50 deletions cards/MyOrderCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ const MyOrderCard = ({ data, selectedMultiLangData }: any) => {
const currency_state_from_redux: any = useSelector(currency_selector_state);
return (
<>
<div key={data.id} >
<div className="card-header myorder-card-header " >
<div className="row pb-0" >
<div key={data.id}>
<div className="card-header pb-1 ">
<div className="row pb-0">
<div className=" mb-sm-0 col-md-2 col-6 order-div">
<p className="text-uppercase gray myorder_p">
{selectedMultiLangData?.order_placed}
Expand Down Expand Up @@ -53,48 +53,49 @@ const MyOrderCard = ({ data, selectedMultiLangData }: any) => {
<div className="dropdown text-dark" key={index}>
{personAddress?.name === "Shipping Address"
? personAddress?.values.map((addr: any) => (
<div key={addr.address_id}>
<a
className="dropdown-toggle p-0 bold text-dark"
role="button"
id="ship_to"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
{personAddress?.name}
</a>
<ul
className="dropdown-menu"
aria-labelledby="ship_to"
>
<li className="ps-1 pe-1 ">
{addr?.address_title}
</li>
<li className="ps-1 pe-1 ">
{addr?.address_1}
</li>
<li className="ps-1 pe-1 ">
{addr?.address_2}
</li>
<li className="ps-1 pe-1 ">
{addr?.city} - {addr?.postal_code}
</li>
<li className="ps-1 pe-1 ">{addr?.country}</li>
<li className="ps-1 pe-1 ">
{selectedMultiLangData?.mobile_number}:{" "}
{addr?.contact}
</li>
</ul>
</div>
))
<div key={addr.address_id}>
<a
className="dropdown-toggle p-0 bold text-dark"
role="button"
id="ship_to"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
{personAddress?.name}
</a>
<ul
className="dropdown-menu"
aria-labelledby="ship_to"
>
<li className="ps-1 pe-1 mb-0 ">
{addr?.address_title}
</li>
<li className="ps-1 pe-1 mb-0 ">
{addr?.address_1}
</li>
<li className="ps-1 pe-1 mb-0">
{addr?.address_2}
</li>
<li className="ps-1 pe-1 mb-0">
{addr?.city} - {addr?.postal_code}
</li>
<li className="ps-1 pe-1 mb-0">{addr?.country}</li>
<li className="ps-1 pe-1 mb-0">
{selectedMultiLangData?.mobile_number}:{" "}
{addr?.contact}
</li>
</ul>
</div>
))
: null}
</div>
))}
</div>
<div className="text-end col-md-6 col-8 order-cards">
<p className=" myorder_p">
{selectedMultiLangData?.orders} # {data?.name}
<p className="mb-0 myorder_p d-inline-flex justify-content-end">
{selectedMultiLangData?.orders}
<span># {data?.name}</span>
</p>

<div className="d-flex justify-content-end align-items-center">
Expand All @@ -116,19 +117,21 @@ const MyOrderCard = ({ data, selectedMultiLangData }: any) => {
>
<div className="d-flex pb-0" >
<div className="flex-fill">
<h6 className="green text-capitalize bold mt-2 order-ptag ">
{selectedMultiLangData?.status} : {data?.payment_status}
<h6 className="green text-capitalize bold mb-0 mt-2 order-ptag d-inline-flex">
<div>{selectedMultiLangData?.status} </div>
<div>&nbsp;: {data?.payment_status}</div>
</h6>
</div>
<div className="justify-content-end d-none d-sm-block align-items-end"></div>
</div>

<div className="d-flex align-items-center row" >
<div className=" mb-sm-0 col-lg-2 col-md-2 col-4 mt-2">
<div className="product-img cart-image mt-2 mb-4">
<div className="d-flex align-items-center row">
<div className="mb-3 mb-sm-0 col-lg-2 col-md-2 col-4 mt-2">
<div className="product-img">
<img
src={`${CONSTANTS.API_BASE_URL}/${detail?.img !== null ? detail?.img : detail?.brand_img
}`}
src={`${CONSTANTS.API_BASE_URL}/${
detail?.img !== null ? detail?.img : detail?.brand_img
}`}
className="product_img img-fluid orderdetail_img"
alt="product-img"
/>
Expand Down Expand Up @@ -219,15 +222,15 @@ const MyOrderCard = ({ data, selectedMultiLangData }: any) => {
</p>

{data?.shipping_method.door_delivery === 0 &&
data?.shipping_method?.godown_delivery === 0 ? (
<p className="">
data?.shipping_method?.godown_delivery === 0 ? (
<p className="mb-0">
{selectedMultiLangData?.door_delivery_yes}
</p>
) : (
""
)}
{data?.shipping_method?.door_delivery === 0 &&
data?.shipping_method?.godown_delivery !== 0 ? (
data?.shipping_method?.godown_delivery !== 0 ? (
<>
<p className="">
{selectedMultiLangData?.godown_delivery_yes}
Expand Down
Loading

0 comments on commit cb7421a

Please sign in to comment.