Skip to content

Commit d4141cd

Browse files
drajkdrajk
committed
feat: working checkout layout
1 parent a4d36d1 commit d4141cd

File tree

8 files changed

+1290
-33
lines changed

8 files changed

+1290
-33
lines changed

‎components/Layout.js

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React, { useEffect } from "react";
2+
import {
3+
Button,
4+
Card,
5+
Container,
6+
Grid,
7+
Header,
8+
Image,
9+
Menu,
10+
} from "semantic-ui-react";
11+
12+
import loadLatitudeContent from "../utils/loadLatitudeContent";
13+
14+
export const Layout = () => {
15+
const activeIndex = 0;
16+
17+
useEffect(() => {
18+
loadLatitudeContent(() => console.log("latitude content loaded."));
19+
});
20+
21+
return (
22+
<Container>
23+
<Menu fixed="top" inverted pointing size="large">
24+
<Container>
25+
<Header
26+
inverted
27+
as="h2"
28+
icon
29+
textAlign="center"
30+
style={{ padding: "10px" }}
31+
>
32+
Example JS Store
33+
</Header>
34+
</Container>
35+
</Menu>
36+
37+
<Grid reversed="computer" stackable style={{ marginTop: "4em" }}>
38+
<Grid.Row columns={2}>
39+
<Grid.Column width={6}>
40+
<Card fluid header="Cart">
41+
<Card.Content>
42+
<Card.Header>Order Summary</Card.Header>
43+
<Card.Meta>1 item</Card.Meta>
44+
</Card.Content>
45+
<Card.Content>
46+
<Header as="h5" floated="left">
47+
1 x Blue Tuxedo
48+
</Header>
49+
<Header as="h5" floated="right">
50+
$640.00
51+
</Header>
52+
<Card.Description>Color - Blue</Card.Description>
53+
<Card.Description>Size - L</Card.Description>
54+
</Card.Content>
55+
<Card.Content>
56+
<Header as="h5" floated="left">
57+
Shipping
58+
</Header>
59+
<Header as="h5" floated="right">
60+
$13.00
61+
</Header>
62+
</Card.Content>
63+
64+
<Card.Content>
65+
<Header as="h3" floated="left">
66+
Total
67+
<Header.Subheader>Including $58.18 in taxes</Header.Subheader>
68+
</Header>
69+
<Header as="h3" floated="right">
70+
$653.00
71+
</Header>
72+
</Card.Content>
73+
</Card>
74+
</Grid.Column>
75+
76+
<Grid.Column width={10}>
77+
<Card.Group>
78+
<Card fluid>
79+
<Card.Content>
80+
<Card.Header>Customer</Card.Header>
81+
<Card.Description>Fake Doe</Card.Description>
82+
<Card.Description>fake.doe@email.com</Card.Description>
83+
<Card.Description>+61 400 000 000</Card.Description>
84+
</Card.Content>
85+
</Card>
86+
87+
<Card fluid>
88+
<Card.Content>
89+
<Card.Header>Shipping</Card.Header>
90+
<Card.Meta>
91+
Express shipping <strong>13.00</strong>
92+
</Card.Meta>
93+
<Card.Description>
94+
100 Spencer Street, Melbourne, VIC, 3000
95+
</Card.Description>
96+
</Card.Content>
97+
</Card>
98+
99+
<Card fluid>
100+
<Card.Content>
101+
<Card.Header>Billing</Card.Header>
102+
<Card.Description>
103+
200 Bridge Road, Richmond, VIC, 3121
104+
</Card.Description>
105+
</Card.Content>
106+
</Card>
107+
</Card.Group>
108+
109+
<Header>Payment</Header>
110+
111+
<Card fluid>
112+
<Card.Content>
113+
<Card.Header>
114+
Latitude interest free
115+
<Image
116+
src="https://assets.latitudefinancial.com/merchant-services/latitude/icon/latitude-interest-free.svg"
117+
size="small"
118+
floated="right"
119+
/>
120+
</Card.Header>
121+
<Card.Description>
122+
<div id="latitude-payment--main"></div>
123+
<div id="latitude-payment--footer"></div>
124+
</Card.Description>
125+
</Card.Content>
126+
</Card>
127+
128+
<Button secondary size="big">
129+
Complete order
130+
</Button>
131+
</Grid.Column>
132+
</Grid.Row>
133+
</Grid>
134+
</Container>
135+
);
136+
};

‎components/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./Layout";
2+
export * from "./theme";

‎components/theme.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const SIZE_MOBILE = "768px";
2+
const SIZE_DESKTOP = "1280px";
3+
4+
export default {
5+
SIZE_MOBILE,
6+
SIZE_DESKTOP,
7+
MEDIA_MOBILE: `max-width: ${SIZE_MOBILE}`,
8+
MEDIA_DESKTOP: `max-width: ${SIZE_DESKTOP}`,
9+
};

‎package.json

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,32 @@
55
"scripts": {
66
"dev": "next dev",
77
"build": "next build",
8-
"start": "next start"
8+
"start": "next start",
9+
"find:unused": "next-unused"
10+
},
11+
"next-unused": {
12+
"alias": {
13+
"@assets/*": [
14+
"assets/*"
15+
],
16+
"@config/*": [
17+
"config/*"
18+
],
19+
"@components/*": [
20+
"components/*"
21+
],
22+
"@utils/*": [
23+
"utils/*"
24+
]
25+
}
926
},
1027
"dependencies": {
1128
"next": "10.0.7",
29+
"next-unused": "^0.0.3",
1230
"react": "17.0.1",
13-
"react-dom": "17.0.1"
31+
"react-dom": "17.0.1",
32+
"semantic-ui-css": "^2.4.1",
33+
"semantic-ui-react": "^2.0.3",
34+
"styled-components": "^5.2.1"
1435
}
1536
}

‎pages/_app.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
import '../styles/globals.css'
1+
import React from "react";
2+
import { Layout } from "../components";
3+
4+
import 'semantic-ui-css/semantic.min.css'
25

36
function MyApp({ Component, pageProps }) {
4-
return <Component {...pageProps} />
7+
return (
8+
<Layout>
9+
<Component {...pageProps} />
10+
</Layout>
11+
);
512
}
613

7-
export default MyApp
14+
export default MyApp;

‎pages/index.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import Head from 'next/head'
2-
import styles from '../styles/Home.module.css'
1+
import Head from "next/head";
32

43
export default function Home() {
54
return (
@@ -15,7 +14,7 @@ export default function Home() {
1514
</h1>
1615

1716
<p className={styles.description}>
18-
Get started by editing{' '}
17+
Get started by editing{" "}
1918
<code className={styles.code}>pages/index.js</code>
2019
</p>
2120

@@ -56,10 +55,10 @@ export default function Home() {
5655
target="_blank"
5756
rel="noopener noreferrer"
5857
>
59-
Powered by{' '}
58+
Powered by{" "}
6059
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
6160
</a>
6261
</footer>
6362
</div>
64-
)
63+
);
6564
}

‎utils/loadLatitudeContent.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const MERCHANT_ID = "someMerchantID";
2+
const SCRIPT_IDENTIFIER = "latitudeCheckoutScript";
3+
const SRC =
4+
"https://develop.checkout.dev.merchant-services-np.lfscnp.com/assets/content.js?platform=magento2";
5+
6+
export const PAYMENT_CONTAINER_MAIN = "latitude-payment--main";
7+
export const PAYMENT_CONTAINER_FOOTER = "latitude-payment--footer";
8+
9+
const loadLatitudeContent = (callback) => {
10+
const existingScript = document.getElementById(SCRIPT_IDENTIFIER);
11+
12+
window.LatitudeCheckout = {
13+
page: "checkout",
14+
merchantId: MERCHANT_ID,
15+
currency: "AUD",
16+
container: {
17+
main: PAYMENT_CONTAINER_MAIN,
18+
footer: PAYMENT_CONTAINER_FOOTER,
19+
},
20+
checkout: {},
21+
};
22+
23+
if (!existingScript) {
24+
const script = document.createElement("script");
25+
26+
script.async = true;
27+
script.src = SRC;
28+
script.id = SCRIPT_IDENTIFIER;
29+
30+
document.body.appendChild(script);
31+
32+
script.onload = () => {
33+
if (callback) callback();
34+
};
35+
}
36+
37+
if (existingScript && callback) callback();
38+
};
39+
40+
export default loadLatitudeContent;

0 commit comments

Comments
 (0)