seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

UI layout fixes in checkout and shopping cart pages

This commit is contained in:
Nuwan 2024-12-23 15:35:16 +05:30
parent 61eddbb2bc
commit c163d6b0ba
2 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
jam-ui/src/components/shopping-cart/JKCheckout.js
View File

@ -288,33 +288,38 @@ const JKCheckout = () => {
};
return (
<div style={{ width: greaterThan.sm ? '50%' : '100%' }} className="mx-auto">
<div style={{ width: greaterThan.sm ? '75%' : '100%' }} className="mx-auto">
<div className='mb-3'>
<Link to="/shopping-cart">{`< Back to shopping cart`}</Link>
</div>
{hasAlreadyEnteredBillingInfo && (
<div className="alert alert-info" role="alert">
<div className="d-flex">
<FontAwesomeIcon icon="info-circle" className="mr-2" />
<p>
You recently entered payment info successfully. If you want to change your payment info, click the
CHANGE PAYMENT INFO button. Otherwise, click the Confirm &amp; Pay button to checkout.
</p>
</div>
<div className='d-flex'>
<Button onClick={() => setHideBillingInfo(!hideBillingInfo)}>
{hideBillingInfo ? 'Change Payment Info' : 'Hide Payment Info'}
</Button>
<Button onClick={doPlaceOrder} className="ml-2">
Confirm &amp; Pay
</Button>
</div>
</div>
)}
<ContentWithAsideLayout
aside={cartLoading ? <div>Cart Loading...</div> : <CheckoutAside />}
isStickyAside={false}
>
{hasAlreadyEnteredBillingInfo && (
<div className="alert alert-info" role="alert">
<div className="d-flex">
<FontAwesomeIcon icon="info-circle" className="mr-2" />
<p>
You recently entered payment info successfully. If you want to change your payment info, click the
CHANGE PAYMENT INFO button. Otherwise, click the Confirm &amp; Pay button to checkout.
</p>
</div>
<div className='d-flex'>
<Button onClick={() => setHideBillingInfo(!hideBillingInfo)}>
{hideBillingInfo ? 'Change Payment Info' : 'Hide Payment Info'}
</Button>
<Button onClick={ doPlaceOrder } className="ml-2">
Confirm &amp; Pay
</Button>
</div>
</div>
)}
<form onSubmit={handleSubmit(onSubmit)} className={hideBillingInfo ? 'd-none' : 'd-block'}>
{hasRedeemableJamTrack ? (
{/* {hasRedeemableJamTrack ? (
<div className="alert alert-info d-flex" role="alert">
<FontAwesomeIcon icon="info-circle" className="mr-2" />
<p>
@ -328,12 +333,12 @@ const JKCheckout = () => {
<FontAwesomeIcon icon="info-circle" className="mr-2" />
<p>Please enter your billing address and payment information below.&nbsp; </p>
</div>
)}
)} */}
<Card className="mb-3">
<FalconCardHeader title="Billing Address" titleTag="h5" />
<CardBody>
<Row className="mb-2">
<Col xs={12} md={5} lg={4} className="text-right">
<Col xs={12} md={5} lg={4} className="text-md-right">
<Label for="first_name" className={labelClassName}>
First Name
</Label>
@ -348,7 +353,7 @@ const JKCheckout = () => {
</Col>
</Row>
<Row className="mb-2">
<Col xs={12} md={5} lg={4} className="text-right">
<Col xs={12} md={5} lg={4} className="text-md-right">
<Label for="last_name" className={labelClassName}>
Last Name
</Label>
@ -363,7 +368,7 @@ const JKCheckout = () => {
</Col>
</Row>
<Row className="mb-2">
<Col xs={12} md={5} lg={4} className="text-right">
<Col xs={12} md={5} lg={4} className="text-md-right">
<Label for="address1" className={labelClassName}>
Address 1
</Label>
@ -378,7 +383,7 @@ const JKCheckout = () => {
</Col>
</Row>
<Row className="mb-2">
<Col xs={12} md={5} lg={4} className="text-right">
<Col xs={12} md={5} lg={4} className="text-md-right">
<Label for="address2" className={labelClassName}>
Address 2
</Label>
@ -393,7 +398,7 @@ const JKCheckout = () => {
</Col>
</Row>
<Row className="mb-2">
<Col xs={12} md={5} lg={4} className="text-right">
<Col xs={12} md={5} lg={4} className="text-md-right">
<Label for="city" className={labelClassName}>
City
</Label>
@ -408,7 +413,7 @@ const JKCheckout = () => {
</Col>
</Row>
<Row className="mb-2">
<Col xs={12} md={5} lg={4} className="text-right">
<Col xs={12} md={5} lg={4} className="text-md-right">
<Label for="state" className={labelClassName}>
State or Region
</Label>
@ -423,7 +428,7 @@ const JKCheckout = () => {
</Col>
</Row>
<Row className="mb-2">
<Col xs={12} md={5} lg={4} className="text-right">
<Col xs={12} md={5} lg={4} className="text-md-right">
<Label for="zip" className={labelClassName}>
Zip or Postal Code
</Label>
@ -441,7 +446,7 @@ const JKCheckout = () => {
</Col>
</Row>
<Row className="mb-2">
<Col xs={12} md={5} lg={4} className="text-right">
<Col xs={12} md={5} lg={4} className="text-md-right">
<Label for="country" className={labelClassName}>
Country
</Label>
@ -634,12 +639,12 @@ const JKCheckout = () => {
/>
</Col>
</Row>
<hr className="border-dashed my-5" />
{/* <hr className="border-dashed my-5" /> */}
<Row>
<Col className="pl-lg-4 pl-xl-2 pl-xxl-5 text-center">
<hr className="border-dashed d-block d-md-none d-xl-block d-xxl-none my-4" />
<div className="fs-2 font-weight-semi-bold">
All Total:{' '}
Total:{' '}
<span className="text-primary">
{currency}
{payableTotal}
@ -650,7 +655,7 @@ const JKCheckout = () => {
</Button>
<p className="fs--1 mt-3 mb-0">
By clicking <strong>Confirm &amp; Pay </strong>button you agree to JamKazam's{' '}
<Link to="#!">Terms of service</Link>, including the <Link to="#!">JamTracks purchase terms</Link>.
<a href="https://www.jamkazam.com/corp/terms" target='_blank'>Terms Of Service</a>, including the <a href="https://www.jamkazam.com/corp/terms#purchasing-jamtracks">JamTracks Purchase Terms</a>.
</p>
</Col>
</Row>

2
jam-ui/src/components/shopping-cart/JKShoppingCart.js
View File

@ -25,7 +25,7 @@ const JKShoppingCart = () => {
}
return (
<Card style={{ width: greaterThan.sm ? '60%' : '100%' }} className="mx-auto">
<Card style={{ width: greaterThan.sm ? '75%' : '100%' }} className="mx-auto">
<FalconCardHeader title={`Shopping Cart (${shoppingCart.length} Items)`} light={false} breakPoint="sm">
<ButtonIcon
icon="chevron-left"