Skip to content

Commit 66f284d

Browse files
iliniejailinieja
committed
feat: setup basic landing store
0 parents  commit 66f284d

11 files changed

+551
-0
lines changed

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }]
4+
]
5+
}

‎.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
7+
# Editor directories and files
8+
.idea
9+
*.suo
10+
*.ntvs*
11+
*.njsproj
12+
*.sln

‎README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# poc-landing-store
2+
3+
> A Vue.js project
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# build for production with minification
15+
npm run build
16+
```
17+
18+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Stickly</title>
8+
<!-- Styles -->
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">
11+
<link rel="stylesheet" href="./css/main.css">
12+
</head>
13+
<body>
14+
<div class="hero is-fullheight">
15+
<div id="app"></div>
16+
</div>
17+
<!-- Scripts -->
18+
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
19+
<script src="/dist/build.js"></script>
20+
</body>
21+
</html>

‎package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "poc-landing-store",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "b2709f1b",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
9+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10+
},
11+
"dependencies": {
12+
"axios": "^0.17.0",
13+
"moments": "0.0.2",
14+
"vue": "^2.4.4",
15+
"vue-router": "^3.0.1"
16+
},
17+
"devDependencies": {
18+
"babel-core": "^6.26.0",
19+
"babel-loader": "^7.1.2",
20+
"babel-preset-env": "^1.6.0",
21+
"cross-env": "^5.0.5",
22+
"css-loader": "^0.28.7",
23+
"file-loader": "^1.1.4",
24+
"vue-loader": "^13.0.5",
25+
"vue-template-compiler": "^2.4.4",
26+
"webpack": "^3.6.0",
27+
"webpack-dev-server": "^2.9.1"
28+
}
29+
}

‎src/components/App.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div id="app">
3+
<div class="hero-head">
4+
<div class="container">
5+
<nav class="nav">
6+
<div class="container">
7+
<div class="nav-left">
8+
<router-link to="/" class="nav-item">Stickly</router-link>
9+
</div>
10+
<span class="nav-toggle">
11+
<span></span>
12+
<span></span>
13+
<span></span>
14+
</span>
15+
<div class="nav-right nav-menu">
16+
<a class="nav-item" href="[email protected]">Contact</a>
17+
</div>
18+
</div>
19+
</nav>
20+
</div>
21+
</div>
22+
<router-view></router-view>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
name: 'app',
29+
data() {
30+
return {}
31+
}
32+
}
33+
</script>

‎src/components/Complete.vue

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class='container content'>
3+
<br>
4+
<h3 style='color: white;'>Order complete!</h3>
5+
<p>
6+
Congratulations! Your order for Sticks will be shipped out within 1–2 business days.
7+
<a href=''>[email protected]</a>.
8+
We sent you a confirmation email for your records. Thanks so much!
9+
</p>
10+
<div v-if='orderDetails'>
11+
<dl>
12+
<dt>Order Number</dt>
13+
<dd>{{ orderDetails.id }}</dd>
14+
<dt>Order Created</dt>
15+
<dd>{{ orderDetails.created | moment }}</dd>
16+
<dt>Payment Amount</dt>
17+
<dd>{{ orderDetails.amount | currency }}</dd>
18+
<dt>Shipping Address</dt>
19+
<dd>{{ orderDetails.shipping.address.line1 }}, {{ orderDetails.shipping.address.city }},
20+
{{orderDetails.shipping.address.state }} {{ orderDetails.shipping.address.postal_code }}
21+
</dd>
22+
<dt>Engraving Text</dt>
23+
<dd>{{ orderDetails.description }}</dd>
24+
<dt>Email</dt>
25+
<dd>{{ orderDetails.receipt_email }}</dd>
26+
</dl>
27+
</div>
28+
</div>
29+
</template>
30+
<style>
31+
dt {
32+
font-weight: bold;
33+
}
34+
</style>
35+
<script>
36+
import axios from 'axios';
37+
import moment from 'moment';
38+
export default {
39+
data() {
40+
return { orderDetails: false };
41+
},
42+
created() {
43+
var charge_id = this.$route.params.id;
44+
axios.get(`${window.endpoint}/charge/${charge_id}`)
45+
.then((res) => {
46+
this.orderDetails = res.data.charge;
47+
});
48+
},
49+
filters: {
50+
moment(date) {
51+
return moment.unix(date).format('MMMM Do, YYYY — h:mm a');
52+
},
53+
currency(amount) {
54+
return `$${(amount / 100).toFixed(2)}`;
55+
}
56+
}
57+
}
58+
</script>

0 commit comments

Comments
 (0)