Reza_ashrafi
3 years ago
parent
fb80e688ab
commit
7e551c5a50
21 changed files with 675 additions and 20 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 309 KiB |
@ -0,0 +1,13 @@ |
||||
import React from "react"; |
||||
import "./index.scss"; |
||||
|
||||
export default function Radio(props) { |
||||
return ( |
||||
<div className="radio flex items-center"> |
||||
<input id="radio-1" name={props.name} type="radio" /> |
||||
<label htmlFor="radio-1" className="radio-label text-xs"> |
||||
{/* {props.label} */} |
||||
</label> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,58 @@ |
||||
$color1: #f4f4f4; |
||||
$color2: #3197EE; |
||||
|
||||
.radio { |
||||
input[type="radio"] { |
||||
position: absolute; |
||||
opacity: 0; |
||||
+ .radio-label { |
||||
&:before { |
||||
content: ''; |
||||
background: $color1; |
||||
border-radius: 100%; |
||||
border: 1px solid darken($color1, 25%); |
||||
display: inline-block; |
||||
width: 1.4em; |
||||
height: 1.4em; |
||||
position: relative; |
||||
vertical-align: top; |
||||
margin-left: 0.5em; |
||||
cursor: pointer; |
||||
text-align: center; |
||||
transition: all 250ms ease; |
||||
} |
||||
} |
||||
&:checked { |
||||
+ .radio-label { |
||||
&:before { |
||||
background-color: $color2; |
||||
box-shadow: inset 0 0 0 4px $color1; |
||||
} |
||||
} |
||||
} |
||||
&:focus { |
||||
+ .radio-label { |
||||
&:before { |
||||
outline: none; |
||||
border-color: $color2; |
||||
} |
||||
} |
||||
} |
||||
&:disabled { |
||||
+ .radio-label { |
||||
&:before { |
||||
box-shadow: inset 0 0 0 4px $color1; |
||||
border-color: darken($color1, 25%); |
||||
background: darken($color1, 25%); |
||||
} |
||||
} |
||||
} |
||||
+ .radio-label { |
||||
&:empty { |
||||
&:before { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,61 @@ |
||||
import React, { useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Button from "../../../components/Button"; |
||||
import Radio from "../../../components/Radio"; |
||||
|
||||
function Address({ addresses, isDark }) { |
||||
const [activeAddress, setActiveAddress] = useState(addresses[0]); |
||||
const Location = ({ address }) => { |
||||
return ( |
||||
<button |
||||
className={`flex flex-row border-2 border-solid items-center w-full px-3 py-4 rounded-md mt-4 transition-all duration-500 dark:bg-opacity-5 ${ |
||||
activeAddress === address |
||||
? "bg-blueFD border-blueC0" |
||||
: "bg-grayF9 border-gray45" |
||||
}`}
|
||||
> |
||||
<Radio /> |
||||
<div className="flex flex-1 flex-col mr-3"> |
||||
<li className="text-right text-xs text-blue52 dark:text-white leading-4"> |
||||
آدرس: {address.address} |
||||
</li> |
||||
<li className="text-right text-xs text-blue52 dark:text-white mt-1.5"> |
||||
نام تحویل گیرنده: {address.receiver} |
||||
</li> |
||||
<li className="text-right text-xs text-blue52 dark:text-white mt-1.5"> |
||||
کد پستی: {address.postalCode} |
||||
</li> |
||||
<li className="text-right text-xs text-blue52 dark:text-white mt-1.5"> |
||||
شماره تماس: {address.cellphone} |
||||
</li> |
||||
</div> |
||||
</button> |
||||
); |
||||
}; |
||||
return ( |
||||
<section className="mt-2"> |
||||
<strong className="font-medium dark:text-white">انتخاب آدرس</strong> |
||||
<ul className="list-none p-0 m-0 flex flex-col"> |
||||
{addresses.map((address, index) => ( |
||||
<Location address={address} key={index} /> |
||||
))} |
||||
</ul> |
||||
<div className="w-full flex flex-row justify-between items-center mt-4"> |
||||
<Button |
||||
title="یک آدرس جدید اضافه کنید +" |
||||
backgroundColor="bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30" |
||||
border={{ color: isDark ? '#DBDBDB22' : "#DBDBDB", width: "1px" }} |
||||
bgOpacity="bg-opacity-100" |
||||
width="100%" |
||||
color={isDark ? "text-white" : "text-gray70"} |
||||
/> |
||||
</div> |
||||
</section> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(Address); |
||||
@ -0,0 +1,36 @@ |
||||
import React, { useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
function PaymentMethods({ paymentMethods, isDark }) { |
||||
const [activeMethod, setActiveMactiveMethod] = useState(paymentMethods[0]); |
||||
const Method = ({ method }) => { |
||||
return ( |
||||
<button |
||||
className={`flex flex-col border border-solid items-center w-full px-2.5 py-3.5 rounded-md mt-4 relative transition-all duration-500 dark:text-white ${ |
||||
activeMethod === method |
||||
? "bg-blueFD border-blueC0 text-blueC0 bg-opacity-5" |
||||
: "bg-grayF9 border-grayDB text-gray70 bg-opacity-5" |
||||
}`}
|
||||
onClick={() => setActiveMactiveMethod(method)} |
||||
> |
||||
{method.name} |
||||
</button> |
||||
); |
||||
}; |
||||
return ( |
||||
<section className="mt-8"> |
||||
<strong className="font-medium dark:text-white">انتخاب شیوه پرداخت</strong> |
||||
<ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap"> |
||||
{paymentMethods.map((method, index) => ( |
||||
<Method method={method} key={index} /> |
||||
))} |
||||
</ul> |
||||
</section> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(PaymentMethods); |
||||
@ -0,0 +1,53 @@ |
||||
import React, { useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Button from "../../../components/Button"; |
||||
import Radio from "../../../components/Radio"; |
||||
|
||||
function TransportDate({ transportDate, isDark }) { |
||||
const [activeDate, setActiveDate] = useState(transportDate?.times[0]); |
||||
const Time = ({ time }) => { |
||||
return ( |
||||
<button |
||||
className={`flex flex-col border border-solid items-center flex-1 mx-1 px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${ |
||||
activeDate === time |
||||
? "bg-blueFD border-blueC0 dark:bg-opacity-5" |
||||
: "bg-grayF9 border-grayDB dark:bg-opacity-5" |
||||
}`}
|
||||
onClick={() => setActiveDate(time)} |
||||
> |
||||
<strong |
||||
className={`text-sm transition-all duration-500 dark:text-white ${ |
||||
activeDate === time ? "text-blueC0" : "text-blue52" |
||||
}`}
|
||||
> |
||||
{time.time} |
||||
</strong> |
||||
{time.status === "completed" && ( |
||||
<span |
||||
className={`text-xs transition-all duration-500 dark:text-white ${ |
||||
activeDate === time ? "text-blueC0" : "text-blue52" |
||||
}`}
|
||||
> |
||||
تکمیل ظرفیت |
||||
</span> |
||||
)} |
||||
</button> |
||||
); |
||||
}; |
||||
return ( |
||||
<section className="mt-8"> |
||||
<strong className="font-medium dark:text-white">زمان ارسال را انتخاب کنید</strong> |
||||
<ul className="list-none p-0 m-0 flex flex-row justify-between flex-wrap"> |
||||
{transportDate.times.map((time, index) => ( |
||||
<Time time={time} key={index} /> |
||||
))} |
||||
</ul> |
||||
</section> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(TransportDate); |
||||
@ -0,0 +1,62 @@ |
||||
import React, { useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Button from "../../../components/Button"; |
||||
import Radio from "../../../components/Radio"; |
||||
|
||||
function TransportMethod({ transportMethods, isDark }) { |
||||
const [activeMethod, setActiveMethod] = useState(transportMethods[0]); |
||||
const Method = ({ method }) => { |
||||
return ( |
||||
<button |
||||
className={`flex flex-col border border-solid items-center w-full px-2 py-3 rounded-md mt-4 relative transition-all duration-500 ${ |
||||
activeMethod === method |
||||
? "bg-blueFD border-blueC0 dark:bg-opacity-5" |
||||
: "bg-grayF9 border-grayDB dark:bg-opacity-5" |
||||
}`}
|
||||
onClick={() => setActiveMethod(method)} |
||||
> |
||||
<strong |
||||
className={`text-sm transition-all duration-500 ${ |
||||
activeMethod === method |
||||
? "text-blueC0 dark:text-white" |
||||
: "text-blue52 dark:text-white" |
||||
}`}
|
||||
> |
||||
{method.name} |
||||
</strong> |
||||
<span |
||||
className={`text-xs transition-all duration-500 ${ |
||||
activeMethod === method |
||||
? "text-blueC0 dark:text-white" |
||||
: "text-blue52 dark:text-white" |
||||
}`}
|
||||
> |
||||
هزینه ارسال {method.cost} |
||||
</span> |
||||
<img |
||||
src={method.icon} |
||||
alt={method.name} |
||||
className="w-7 absolute left-3 top-1/2 transform -translate-y-1/2" |
||||
/> |
||||
</button> |
||||
); |
||||
}; |
||||
return ( |
||||
<section className="mt-8"> |
||||
<strong className="font-medium dark:text-white"> |
||||
لطفا یک روش ارسال انتخاب کنید |
||||
</strong> |
||||
<ul className="list-none p-0 m-0 flex flex-col"> |
||||
{transportMethods.map((method, index) => ( |
||||
<Method method={method} key={index} /> |
||||
))} |
||||
</ul> |
||||
</section> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
isDark: state.publicApi.isDark, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(TransportMethod); |
||||
@ -0,0 +1,18 @@ |
||||
import React, { useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { publicApi } from "../../../redux/actions"; |
||||
|
||||
export const Content = ({ headerOptions, setHeaderOptions, setPage }) => { |
||||
useEffect(() => { |
||||
setHeaderOptions(headerOptions); |
||||
}); |
||||
return <div></div>; |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = { |
||||
setHeaderOptions: publicApi.setHeaderOptions, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Content); |
||||
@ -0,0 +1,67 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { publicApi } from "../../../redux/actions"; |
||||
import { useNavigate } from "react-router-dom"; |
||||
import Scanner from "react-qr-reader"; |
||||
import laptopImage from "../../../assets/images/laptop.svg"; |
||||
|
||||
const facingMode = ["environment", "user"]; |
||||
|
||||
export const Scan = ({ headerOptions, setHeaderOptions, setPage }) => { |
||||
const navigation = useNavigate(); |
||||
const [result, setResult] = useState(""); |
||||
|
||||
const handleScan = (data) => { |
||||
setResult(data); |
||||
}; |
||||
|
||||
const handleError = (err) => { |
||||
console.error(err); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
setHeaderOptions(headerOptions); |
||||
}); |
||||
|
||||
return ( |
||||
<div |
||||
className="w-full h-screen bg-transparent px-0 transform -translate-y-16" |
||||
style={{ backgroundImage: `url(${laptopImage})` }} |
||||
> |
||||
{!result && ( |
||||
<div className="w-full h-full flex flex-col justify-center bg-gray50 items-center px-6 bg-opacity-70 backdrop-filter backdrop-blur-sm"> |
||||
<div className="rounded-3xl overflow-hidden w-full"> |
||||
<Scanner |
||||
delay={300} |
||||
onError={handleError} |
||||
onScan={handleScan} |
||||
style={{ width: "100%" }} |
||||
facingMode={facingMode[1]} |
||||
/> |
||||
</div> |
||||
<strong className="mt-4 text-white text-xl"> |
||||
اسکن کد QR فعالسازی کتاب |
||||
</strong> |
||||
<p className="text-sm text-white text-center mt-2 font-medium"> |
||||
کد کیو آر روی کارت فعالسازی را با دوربین گوشی اسکن کنید تا محتوای |
||||
دیجیتال مربوط به کتاب برای شما فعال شود |
||||
</p> |
||||
<button |
||||
onClick={() => navigation(-1)} |
||||
className="py-3 mt-16 w-2/5 rounded-3xl border-2 border-solid border-blueB9 text-white text-lg font-semibold" |
||||
> |
||||
بازگشت |
||||
</button> |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = { |
||||
setHeaderOptions: publicApi.setHeaderOptions, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Scan); |
||||
@ -0,0 +1,19 @@ |
||||
import React, { useState } from "react"; |
||||
import Scan from "./Scan"; |
||||
import Content from "./Content"; |
||||
|
||||
function QR({ headerOptions, page }) { |
||||
const [currentPage, setCurrentPage] = useState(page); |
||||
return ( |
||||
<> |
||||
{page === "scan" && ( |
||||
<Scan headerOptions={headerOptions} setPage={setCurrentPage} /> |
||||
)} |
||||
{page === "content" && ( |
||||
<Content headerOptions={headerOptions} setPage={setCurrentPage} /> |
||||
)} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default QR; |
||||
@ -0,0 +1,21 @@ |
||||
import React, { useState, useEffect, useCallback } from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import { connect } from "react-redux"; |
||||
import { book, publicApi } from "../../redux/actions"; |
||||
|
||||
|
||||
const Videos = ({ }) => { |
||||
return ( |
||||
<></> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
|
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
|
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Videos); |
||||
Loading…
Reference in new issue