10 |
11 |
18 |
19 | );
20 | };
21 |
22 | export default HomePage;
23 |
--------------------------------------------------------------------------------
/src/state/graphql/mutations/addSimpleProductToCart.graphql:
--------------------------------------------------------------------------------
1 | mutation addSimpleProductToCart($cartId: String!, $sku: String!, $qty: Float!) {
2 | addSimpleProductsToCart(
3 | input: {
4 | cart_id: $cartId
5 | cart_items: [
6 | {
7 | data: {
8 | quantity: $qty
9 | sku: $sku
10 | }
11 | }
12 | ]
13 | }
14 | ) {
15 | cart {
16 | items {
17 | id
18 | product {
19 | sku
20 | stock_status
21 | }
22 | quantity
23 | }
24 | }
25 | }
26 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "src",
4 | "target": "es5",
5 | "lib": [
6 | "dom",
7 | "dom.iterable",
8 | "esnext"
9 | ],
10 | "allowJs": true,
11 | "skipLibCheck": true,
12 | "esModuleInterop": true,
13 | "allowSyntheticDefaultImports": true,
14 | "strict": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "preserve"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/App/Navigation/QuickSearch/redux-container.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import QuickSearch from "./component";
4 | import { updateSearch } from "state/redux/ducks/search/actions";
5 |
6 | const QuickSearchReduxContainer = (props) => {
7 | const search = useSelector((state) => state.search.search);
8 | const dispatch = useDispatch();
9 | const onSearch = (search) => {
10 | dispatch(updateSearch(search));
11 | };
12 |
13 | return
8 |
19 | );
20 | };
21 |
22 | export default AddressBook;
23 |
--------------------------------------------------------------------------------
/stories/ProductPrice.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Price from "components/Atoms/Product/Price/component";
3 |
4 | export default {
5 | title: 'Product Price'
6 | };
7 |
8 | //export const productWithoutPrice = () => AddressBook
9 | {customer.addresses && customer.addresses.length ? ( 10 | <> 11 | {customer.addresses.map(address => ( 12 | 13 | ))} 14 | 15 | ) : ( 16 | "You have not added an address yet." 17 | )} 18 |No products found
; 9 | } 10 | 11 | return ( 12 |
13 |
14 | {props.products.map(product => (
15 |
20 |
21 | );
22 | };
23 |
24 | export default ProductListing;
25 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/cart/types.js:
--------------------------------------------------------------------------------
1 | // Action types
2 | const SET_CART_ID = "apolloPlayground/cart/SET_CART_ID";
3 | const SET_CART = "apolloPlayground/cart/SET_CART";
4 | const UPDATE_CART = "apolloPlayground/cart/UPDATE_CART";
5 | const ADD_PRODUCT = "apolloPlayground/cart/ADD_PRODUCT";
6 | const UPDATE_PRODUCT = "apolloPlayground/cart/UPDATE_PRODUCT";
7 | const REMOVE_CART_ITEM = "apolloPlayground/cart/REMOVE_CART_ITEM";
8 | const LOCK = "apolloPlayground/cart/LOCK";
9 | const UNLOCK = "apolloPlayground/cart/UNLOCK";
10 |
11 | export default {
12 | SET_CART_ID,
13 | SET_CART,
14 | UPDATE_CART,
15 | ADD_PRODUCT,
16 | UPDATE_PRODUCT,
17 | REMOVE_CART_ITEM,
18 | LOCK,
19 | UNLOCK
20 | };
21 |
--------------------------------------------------------------------------------
/src/components/Pages/CustomerPage/Account/Create/redux-container.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect } from "react-redux";
3 | import CustomerPageAccountCreate from "./component";
4 | import { customerActions } from "state/redux/ducks/customer";
5 |
6 | const CustomerPageAccountCreateReduxContainer = props => {
7 | return
28 |
35 | );
36 | };
37 |
38 | export default CmsPage;
39 |
--------------------------------------------------------------------------------
/src/components/Molecules/CmsBlock/component.jsx:
--------------------------------------------------------------------------------
1 | import SanitizedHTML from "react-sanitized-html";
2 | import React from "react";
3 |
4 | const CmsBlock = props => {
5 | const safeTags = [
6 | "div",
7 | "span",
8 | "p",
9 | "b",
10 | "i",
11 | "em",
12 | "strong",
13 | "ul",
14 | "ol",
15 | "li",
16 | "a",
17 | "img"
18 | ];
19 |
20 | const safeAtrr = {
21 | a: ["href"],
22 | div: ["class"],
23 | img: ["src", "alt"]
24 | };
25 |
26 | return (
27 | {title}
29 |
28 |
35 | );
36 | };
37 |
38 | export default CmsBlock;
39 |
--------------------------------------------------------------------------------
/src/state/graphql/queries/cart.graphql:
--------------------------------------------------------------------------------
1 | query cart($cartId: String!) {
2 | cart(cart_id: $cartId) {
3 | items {
4 | id
5 | product {
6 | url_key
7 | id
8 | sku
9 | name
10 | }
11 | quantity
12 | }
13 | prices {
14 | applied_taxes {
15 | amount {
16 | currency
17 | value
18 | }
19 | label
20 | }
21 | grand_total {
22 | currency
23 | value
24 | }
25 | subtotal_excluding_tax {
26 | currency
27 | value
28 | }
29 | subtotal_including_tax {
30 | currency
31 | value
32 | }
33 | subtotal_with_discount_excluding_tax {
34 | currency
35 | value
36 | }
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {props.title}
29 |
12 |
25 | );
26 | };
27 |
28 | export default CategoryPage;
29 |
--------------------------------------------------------------------------------
/src/state/graphql/queries/categoryPage.graphql:
--------------------------------------------------------------------------------
1 | query CategoryPage($id: Int) {
2 | category(id: $id) {
3 | name
4 | image
5 | description
6 | products {
7 | items {
8 | id
9 | sku
10 | name
11 | stock_status
12 | small_image {
13 | label
14 | url
15 | }
16 | url_key
17 | price {
18 | regularPrice {
19 | amount {
20 | currency
21 | value
22 | }
23 | }
24 | }
25 | short_description {
26 | __html: html
27 | }
28 | description {
29 | __html: html
30 | }
31 | }
32 | page_info {
33 | current_page
34 | page_size
35 | total_pages
36 | }
37 | total_count
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/customer/reducer.js:
--------------------------------------------------------------------------------
1 | import types from "./types";
2 | import postLogoutCustomerReducer from "./reducers/postLogoutCustomer";
3 | import setCustomerDataReducer from "./reducers/setCustomerData";
4 | import setCustomerTokenReducer from "./reducers/setCustomerToken";
5 |
6 | // Main reducer
7 | const customerReducer = (state, action) => {
8 | if (state === undefined) {
9 | return {};
10 | }
11 |
12 | if (action.type === types.POST_LOGOUT_CUSTOMER) {
13 | return postLogoutCustomerReducer(state, action);
14 | }
15 |
16 | if (action.type === types.SET_CUSTOMER_DATA) {
17 | return setCustomerDataReducer(state, action);
18 | }
19 |
20 | if (action.type === types.SET_CUSTOMER_TOKEN) {
21 | return setCustomerTokenReducer(state, action);
22 | }
23 |
24 | return state;
25 | };
26 |
27 | export default customerReducer;
28 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/cart/actions.js:
--------------------------------------------------------------------------------
1 | // Action Creators
2 | import types from "./types";
3 |
4 | const setCartId = cartId => {
5 | return { type: types.SET_CART_ID, cartId };
6 | };
7 |
8 | const setCart = (cartId, cart) => {
9 | return { type: types.SET_CART, cartId, cart };
10 | };
11 |
12 | const updateCart = () => {
13 | return { type: types.UPDATE_CART };
14 | };
15 |
16 | const addProduct = (sku, qty) => {
17 | if (!qty > 0) qty = 1;
18 | return { type: types.ADD_PRODUCT, sku, qty };
19 | };
20 |
21 | const updateProduct = (sku, qty) => {
22 | return { type: types.UPDATE_PRODUCT, sku, qty };
23 | };
24 |
25 | const removeCartItem = (id, name) => {
26 | return { type: types.REMOVE_CART_ITEM, id, name };
27 | };
28 |
29 | export default {
30 | setCartId,
31 | setCart,
32 | updateCart,
33 | addProduct,
34 | updateProduct,
35 | removeCartItem
36 | };
37 |
--------------------------------------------------------------------------------
/src/state/graphql/mutations/saveCustomer.graphql:
--------------------------------------------------------------------------------
1 | mutation saveCustomer($email: String, $firstname: String, $lastname: String) {
2 | updateCustomer(
3 | input: { email: $email, firstname: $firstname, lastname: $lastname }
4 | ) {
5 | customer {
6 | firstname
7 | middlename
8 | lastname
9 | email
10 | addresses {
11 | id
12 | city
13 | company
14 | country_id
15 | default_billing
16 | default_shipping
17 | vat_id
18 | telephone
19 | suffix
20 | street
21 | region_id
22 | region {
23 | region
24 | region_code
25 | region_id
26 | }
27 | prefix
28 | postcode
29 | fax
30 | }
31 | dob
32 | taxvat
33 | gender
34 | group_id
35 | is_subscribed
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/Atoms/Product/AddToCart/redux-container.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect } from "react-redux"
3 | import cartActions from "state/redux/ducks/cart/actions";
4 | import commonActions from "state/redux/ducks/common/actions";
5 | import AddToCart from "./component";
6 |
7 | const AddToCartReduxContainer = props => {
8 | return (
9 | {category.name}
13 | 14 | {category.description &&{category.description}
} 15 | {category.image && ( 16 |No price defined
;
9 | }
10 |
11 | if (product.price.regularPrice === undefined) {
12 | return No regular price defined
;
13 | }
14 |
15 | const price = product.price.regularPrice.amount;
16 |
17 | return (
18 |
19 | {price.currency} {price.value}
20 |
21 | );
22 | };
23 |
24 | Price.propTypes = {
25 | product: PropTypes.shape({
26 | price: PropTypes.shape({
27 | regularPrice: PropTypes.shape({
28 | amount: PropTypes.shape({
29 | currency: PropTypes.string.isRequired,
30 | value: PropTypes.number.isRequired
31 | })
32 | })
33 | })
34 | })
35 | };
36 |
37 | export default Price;
38 |
--------------------------------------------------------------------------------
/src/components/Pages/SearchPage/SearchPageViaQuery.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useQuery } from "@apollo/react-hooks";
3 | import { loader } from "graphql.macro";
4 | import ErrorPage from "components/Pages/ErrorPage";
5 | import ProductGrid from "../../Molecules/ProductGrid";
6 | import EmptySearchResults from "./EmptySearchResults";
7 | import Loading from "components/Utils/Loading";
8 |
9 | const query = loader("src/state/graphql/queries/search.graphql");
10 |
11 | const SearchPageViaQuery = props => {
12 | const { loading, error, data } = useQuery(query, {
13 | variables: { search: props.search }
14 | });
15 |
16 | if (loading) return My Account
11 |Account information
12 |Contact Information
15 | {customer.firstname} {customer.middlename} {customer.lastname} 16 |17 | {customer.email} 18 |
19 | Edit | 20 | Change Password 21 | 22 |
Newsletters
24 |Not implemented yet
25 | 26 |
10 |
11 |
12 |
29 |
30 |
31 | );
32 | };
33 |
34 | export default Footer;
35 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/customer/types.js:
--------------------------------------------------------------------------------
1 | // Action types
2 | const LOGIN_CUSTOMER = "apolloPlayground/customer/LOGIN_CUSTOMER";
3 | const LOGOUT_CUSTOMER = "apolloPlayground/customer/LOGOUT_CUSTOMER";
4 | const POST_LOGOUT_CUSTOMER = "apolloPlayground/customer/POST_LOGOUT_CUSTOMER";
5 | const SET_CUSTOMER_DATA = "apolloPlayground/customer/SET_CUSTOMER_DATA";
6 | const SET_CUSTOMER_TOKEN = "apolloPlayground/customer/SET_CUSTOMER_TOKEN";
7 | const CREATE_CUSTOMER = "apolloPlayground/customer/CREATE_CUSTOMER";
8 | const SAVE_CUSTOMER = "apolloPlayground/customer/SAVE_CUSTOMER";
9 | const SAVE_ADDRESS = "apolloPlayground/customer/SAVE_ADDRESS";
10 | const LOCK = "apolloPlayground/customer/LOCK";
11 | const UNLOCK = "apolloPlayground/customer/UNLOCK";
12 |
13 | export default {
14 | LOGIN_CUSTOMER,
15 | LOGOUT_CUSTOMER,
16 | POST_LOGOUT_CUSTOMER,
17 | SET_CUSTOMER_DATA,
18 | SET_CUSTOMER_TOKEN,
19 | CREATE_CUSTOMER,
20 | SAVE_CUSTOMER,
21 | SAVE_ADDRESS,
22 | LOCK,
23 | UNLOCK
24 | };
25 |
--------------------------------------------------------------------------------
/src/components/Pages/CustomerPage/Orders/component.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Order from "./Order";
3 | import Table from "react-bootstrap/Table";
4 |
5 | const Orders = props => {
6 | const orders = props.data.customerOrders.items || [];
7 | return (
8 |
9 |
12 |
13 |
27 | ) : (
28 | "You have not placed any order yet."
29 | )}
30 |
31 | );
32 | };
33 |
34 | export default Orders;
35 |
--------------------------------------------------------------------------------
/src/components/Molecules/CustomerMenu/component.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Nav from "react-bootstrap/Nav";
3 | import { Link } from "react-router-dom";
4 |
5 | const CustomerMenu = () => {
6 | return (
7 |
27 | );
28 | };
29 |
30 | export default CustomerMenu;
31 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/cart/middleware/updateCart.js:
--------------------------------------------------------------------------------
1 | import { loader } from "graphql.macro";
2 | import apolloClient from "../../../../graphql/apollo-client";
3 | import messagesActions from "../../messages/actions";
4 | import commonActions from "../../common/actions";
5 | import getCartId from "./getCartId";
6 | import cartActions from "../actions";
7 |
8 | const updateCart = async (store, action) => {
9 | action.cartId = await getCartId(store);
10 |
11 | try {
12 | const result = await apolloClient.query({
13 | query: loader("../../../../graphql/queries/cart.graphql"),
14 | variables: action,
15 | fetchPolicy: "network-only"
16 | });
17 |
18 | store.dispatch(cartActions.setCart(action.cartId, result.data.cart));
19 | store.dispatch(commonActions.unlock());
20 | } catch (error) {
21 | console.log(error);
22 | store.dispatch(messagesActions.addMessage(error.toString(), "danger"));
23 | store.dispatch(commonActions.unlock());
24 | return;
25 | }
26 | };
27 |
28 | export default updateCart;
29 |
--------------------------------------------------------------------------------
/src/components/Molecules/CustomerLoginForm/redux-container.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect } from "react-redux";
3 | import customerActions from "state/redux/ducks/customer/actions";
4 | import commonActions from "state/redux/ducks/common/actions";
5 | import CustomerLoginForm from "./component";
6 |
7 | const CustomerLoginFormReduxContainer = props => {
8 | return Orders
10 | {orders && orders.length ? ( 11 || ID | 15 |Increment ID | 16 |Created at | 17 |Total | 18 |Status | 19 |
|---|
8 |
9 |
29 | );
30 | };
31 |
32 | export default CartPrice;
33 |
--------------------------------------------------------------------------------
/src/state/graphql/mutations/updateCustomerAddress.graphql:
--------------------------------------------------------------------------------
1 | mutation updateCustomerAddress(
2 | $id: Int!
3 | $city: String
4 | $company: String
5 | $countryId: CountryCodeEnum
6 | $default_billing: Boolean
7 | $default_shipping: Boolean
8 | $firstname: String
9 | $lastname: String
10 | $middlename: String
11 | $postcode: String
12 | $prefix: String
13 | $region: CustomerAddressRegionInput
14 | $street: [String]
15 | $suffix: String
16 | $telephone: String
17 | $vatId: String
18 | ) {
19 | updateCustomerAddress(
20 | id: $id
21 | input: {
22 | city: $city
23 | company: $company
24 | country_id: $countryId
25 | default_billing: $default_billing
26 | default_shipping: $default_shipping
27 | firstname: $firstname
28 | lastname: $lastname
29 | middlename: $middlename
30 | postcode: $postcode
31 | prefix: $prefix
32 | region: $region
33 | street: $street
34 | suffix: $suffix
35 | telephone: $telephone
36 | vat_id: $vatId
37 | }
38 | ) {
39 | id
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/App/Navigation/MiniCart.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import Badge from "react-bootstrap/Badge";
4 | import { connect } from "react-redux"
5 | import cartActions from "../../../state/redux/ducks/cart/actions";
6 |
7 | const MiniCart = (props) => {
8 | return (
9 |
10 | Cart
11 | {props.cart.id &&
10 |
11 |
12 |
27 |
28 |
22 | {suggestion} }
27 | {search &&
29 | );
30 | };
31 |
32 | export default SearchPage;
33 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/cart/middleware/updateProduct.js:
--------------------------------------------------------------------------------
1 | import { loader } from "graphql.macro";
2 | import apolloClient from "../../../../graphql/apollo-client";
3 | import messagesActions from "../../messages/actions";
4 | import commonActions from "../../common/actions";
5 | import getCartId from "./getCartId";
6 |
7 | const updateProduct = async (store, action) => {
8 | if (!action.sku) {
9 | throw new Error("updateProduct action called with no valid SKU");
10 | }
11 |
12 | action.cartId = await getCartId(store);
13 |
14 | try {
15 | await apolloClient.mutate({
16 | mutation: loader(
17 | "../../../../graphql/mutations/updateProductInCart.graphql"
18 | ),
19 | variables: action
20 | });
21 |
22 | store.dispatch(messagesActions.addMessage('Cart item "' + action.sku + '" updated', "info"));
23 | store.dispatch(commonActions.unlock());
24 |
25 | } catch (error) {
26 | console.log(error);
27 | store.dispatch(messagesActions.addMessage(error.toString(), "danger"));
28 | store.dispatch(commonActions.unlock());
29 | return;
30 | }
31 | };
32 |
33 | export default updateProduct;
34 |
--------------------------------------------------------------------------------
/src/components/Pages/CustomerPage/redux-container.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect } from "react-redux";
3 | import CustomerPage from "./component";
4 | import { customerActions } from "state/redux/ducks/customer";
5 | import Dashboard from "./Dashboard";
6 | import { Redirect } from "react-router-dom";
7 |
8 | const CustomerPageReduxContainer = props => {
9 | if (!props.customerToken) {
10 | return Search
23 |
24 | Showing search results for: "{search}"
25 |
26 | {suggestion &&
13 |
14 |
31 |
32 | );
33 | };
34 |
35 | export default ProductPage;
36 |
--------------------------------------------------------------------------------
/src/components/Molecules/ProductGrid/Item/component.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import Image from "react-bootstrap/Image";
4 | import Price from "components/Atoms/Product/Price";
5 | import AddToCart from "components/Atoms/Product/AddToCart";
6 |
7 | const Product = props => {
8 | if (props.product === undefined) {
9 | return {product.name}
21 | 22 |No product
;
10 | }
11 |
12 | const product = props.product;
13 | const productLink = "/" + product.url_key + ".html";
14 |
15 | return (
16 |
17 | {product.small_image && (
18 |
19 |
36 | );
37 | };
38 | export default Product;
39 |
--------------------------------------------------------------------------------
/src/components/Pages/CustomerPage/Address/Edit/redux-container.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect } from "react-redux";
3 | import { customerActions } from "state/redux/ducks/customer";
4 | import AddressEdit from "./component";
5 |
6 | const extractAddressFromProps = props => {
7 | const addressId = props.match.params.id;
8 | let matchAddress = false;
9 | props.customerData.addresses.forEach(address => {
10 | if (parseInt(address.id) === parseInt(addressId)) {
11 | matchAddress = address;
12 | }
13 | });
14 | return matchAddress;
15 | };
16 |
17 | const AddressEditDataContainer = props => {
18 | const address = extractAddressFromProps(props);
19 | if (!address) {
20 | return <>Address was not found;
21 | }
22 |
23 | const newProps = Object.assign({}, props, { address });
24 | return {product.name}
25 | 26 | 27 |{product.sku}
28 |
29 | {product.description && (
30 |
31 | )}
32 |
33 |
8 |
32 | );
33 | };
34 |
35 | export default CustomerAccountChangePassword;
36 |
--------------------------------------------------------------------------------
/src/components/App/Navigation/QuickSearch/component.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Form from "react-bootstrap/Form";
3 | import { withRouter } from "react-router";
4 | import InputGroup from "react-bootstrap/InputGroup";
5 | import Button from "react-bootstrap/Button";
6 |
7 | const QuickSearch = (props) => {
8 | const [searchWord, setSearchWord] = useState(props.search);
9 |
10 | const onSearch = (event) => {
11 | props.history.replace("/search");
12 | setSearchWord(event.target.value);
13 | props.onSearch(event.target.value);
14 | };
15 |
16 | const onSubmit = () => {
17 | props.history.replace("/search");
18 | props.onSearch(searchWord);
19 | };
20 |
21 | return (
22 |
37 | );
38 | };
39 |
40 | export default withRouter(QuickSearch);
41 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/messages/actions.js:
--------------------------------------------------------------------------------
1 | // Action Creators
2 | import types from "./types";
3 |
4 | const isValidMessageType = messageType => {
5 | const validMessageTypes = [
6 | "primary",
7 | "secondary",
8 | "success",
9 | "danger",
10 | "warning",
11 | "info",
12 | "light",
13 | "dark"
14 | ];
15 |
16 | return validMessageTypes.includes(messageType);
17 | };
18 |
19 | const addMessage = (messageText, messageType = "info") => {
20 | if (!isValidMessageType(messageType)) {
21 | throw new Error("Invalid message type: " + messageType);
22 | }
23 |
24 | return {
25 | type: types.ADD_MESSAGE,
26 | messageText: messageText,
27 | messageType: messageType
28 | };
29 | };
30 |
31 | const removeMessage = (messageText, messageType = "info") => {
32 | if (!isValidMessageType(messageType)) {
33 | throw new Error("Invalid message type: " + messageType);
34 | }
35 |
36 | return {
37 | type: types.REMOVE_MESSAGE,
38 | messageText: messageText,
39 | messageType: messageType
40 | };
41 | };
42 |
43 | const cleanMessages = () => {
44 | return {
45 | type: types.CLEAN_MESSAGES
46 | };
47 | };
48 |
49 | export default {
50 | addMessage,
51 | removeMessage,
52 | cleanMessages
53 | };
54 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/customer/middleware.js:
--------------------------------------------------------------------------------
1 | // Middleware
2 | import types from "./types";
3 | import loginCustomer from "./middleware/loginCustomer";
4 | import logoutCustomer from "./middleware/logoutCustomer";
5 | import saveCustomer from "./middleware/saveCustomer";
6 | import createCustomer from "./middleware/createCustomer";
7 | import saveAddress from "./middleware/saveAddress";
8 | import setCustomerToken from "./middleware/setCustomerToken";
9 |
10 | export default store => {
11 | return next => {
12 | return async action => {
13 | next(action);
14 |
15 | switch (action.type) {
16 | case types.LOGIN_CUSTOMER:
17 | return loginCustomer(store, action);
18 |
19 | case types.LOGOUT_CUSTOMER:
20 | return logoutCustomer(store, action);
21 |
22 | case types.CREATE_CUSTOMER:
23 | return createCustomer(store, action);
24 |
25 | case types.SAVE_CUSTOMER:
26 | return saveCustomer(store, action);
27 |
28 | case types.SAVE_ADDRESS:
29 | return saveAddress(store, action);
30 |
31 | case types.SET_CUSTOMER_TOKEN:
32 | return setCustomerToken(store, action);
33 |
34 | default:
35 | return;
36 | }
37 | };
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/cart/middleware/removeCartItem.js:
--------------------------------------------------------------------------------
1 | import { loader } from "graphql.macro";
2 | import apolloClient from "../../../../graphql/apollo-client";
3 | import messagesActions from "../../messages/actions";
4 | import commonActions from "../../common/actions";
5 | import cartActions from "../../cart/actions";
6 | import getCartId from "./getCartId";
7 |
8 | const removeCartItem = async (store, action) => {
9 | if (!action.id) {
10 | throw new Error("removeCartItem action called with no valid ID: " + action.id);
11 | }
12 |
13 | action.cartId = await getCartId(store);
14 |
15 | try {
16 | await apolloClient.mutate({
17 | mutation: loader(
18 | "../../../../graphql/mutations/removeCartItem.graphql"
19 | ),
20 | variables: action
21 | });
22 |
23 | store.dispatch(cartActions.updateCart());
24 | store.dispatch(messagesActions.addMessage('Cart item "' + action.name + '" removed', "info"));
25 | store.dispatch(commonActions.unlock());
26 |
27 | } catch (error) {
28 | console.log(error);
29 | store.dispatch(cartActions.updateCart());
30 | store.dispatch(messagesActions.addMessage(error.toString(), "danger"));
31 | store.dispatch(commonActions.unlock());
32 | return;
33 | }
34 | };
35 |
36 | export default removeCartItem;
37 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/cart/middleware/addToCart.js:
--------------------------------------------------------------------------------
1 | import { loader } from "graphql.macro";
2 | import apolloClient from "../../../../graphql/apollo-client";
3 | import messagesActions from "../../messages/actions";
4 | import commonActions from "../../common/actions";
5 | import cartActions from "../../cart/actions";
6 | import getCartId from "./getCartId";
7 |
8 | const addToCart = async (store, action) => {
9 | if (!action.sku) {
10 | throw new Error("addToCart action called with no valid SKU");
11 | }
12 |
13 | action.cartId = await getCartId(store);
14 |
15 | try {
16 | await apolloClient.mutate({
17 | mutation: loader(
18 | "../../../../graphql/mutations/addSimpleProductToCart.graphql"
19 | ),
20 | variables: action,
21 | });
22 |
23 | let messageText = 'Product "' + action.sku + '" added to cart';
24 | store.dispatch(messagesActions.addMessage(messageText, "info"));
25 | store.dispatch(cartActions.updateCart());
26 | store.dispatch(commonActions.unlock());
27 | } catch (error) {
28 | console.log(error);
29 | store.dispatch(messagesActions.addMessage(error.toString(), "danger"));
30 | store.dispatch(cartActions.updateCart());
31 | store.dispatch(commonActions.unlock());
32 | return;
33 | }
34 | };
35 |
36 | export default addToCart;
37 |
--------------------------------------------------------------------------------
/src/state/redux/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers, applyMiddleware, compose } from "redux";
2 | import cartReducer, { cartMiddleware, cartInitialState } from "./ducks/cart";
3 | import customerReducer, {
4 | customerMiddleware,
5 | customerInitialState
6 | } from "./ducks/customer";
7 | import messagesReducer, { messagesInitialState } from "./ducks/messages";
8 | import commonReducer, { commonMiddleware } from "./ducks/common";
9 | import searchReducer from "./ducks/search";
10 |
11 | import { autoRehydrate } from "redux-phoenix"; // @todo: Load from session storage
12 |
13 | const reducers = combineReducers({
14 | cart: cartReducer,
15 | messages: messagesReducer,
16 | customer: customerReducer,
17 | search: searchReducer,
18 | common: commonReducer
19 | });
20 |
21 | const initialState = {
22 | cart: cartInitialState,
23 | messages: messagesInitialState,
24 | customer: customerInitialState
25 | };
26 |
27 | const middleware = applyMiddleware(
28 | cartMiddleware,
29 | customerMiddleware,
30 | commonMiddleware
31 | );
32 |
33 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
34 | const enhancements = composeEnhancers(middleware, autoRehydrate);
35 |
36 | const store = createStore(reducers, initialState, enhancements);
37 |
38 | export default store;
39 |
--------------------------------------------------------------------------------
/src/components/App/Content/customerPages.js:
--------------------------------------------------------------------------------
1 | import CustomerPageDashboard from "components/Pages/CustomerPage/Dashboard";
2 | import CustomerPageAddressBook from "components/Pages/CustomerPage/Address";
3 | import CustomerPageAddressEdit from "components/Pages/CustomerPage/Address/Edit";
4 | import CustomerPageAccountEdit from "components/Pages/CustomerPage/Account/Edit";
5 | import CustomerPageAccountChangePassword from "components/Pages/CustomerPage/Account/ChangePassword";
6 | import CustomerPageOrders from "components/Pages/CustomerPage/Orders";
7 | import WishlistPage from "components/Pages/WishlistPage";
8 | import DownloadsPage from "components/Pages/DownloadsPage";
9 |
10 | export default [
11 | { path: "/customer", component: CustomerPageDashboard },
12 | { path: "/customer/addressbook", component: CustomerPageAddressBook },
13 | { path: "/customer/address/edit/id/:id", component: CustomerPageAddressEdit },
14 | { path: "/customer/orders", component: CustomerPageOrders },
15 | { path: "/customer/account", component: CustomerPageAccountEdit },
16 | { path: "/customer/account/edit", component: CustomerPageAccountEdit },
17 | { path: "/customer/account/changePassword", component: CustomerPageAccountChangePassword },
18 | { path: "/wishlist", component: WishlistPage },
19 | { path: "/downloads", component: DownloadsPage }
20 | ];
21 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/customer/actions.js:
--------------------------------------------------------------------------------
1 | // Action Creators
2 | import types from "./types";
3 |
4 | const loginCustomer = (email, password) => {
5 | return {
6 | type: types.LOGIN_CUSTOMER,
7 | email: email,
8 | password: password
9 | };
10 | };
11 |
12 | const logoutCustomer = () => {
13 | return {
14 | type: types.LOGOUT_CUSTOMER
15 | };
16 | };
17 |
18 | const postLogoutCustomer = () => {
19 | return {
20 | type: types.POST_LOGOUT_CUSTOMER
21 | };
22 | };
23 |
24 | const setCustomerToken = token => {
25 | return {
26 | type: types.SET_CUSTOMER_TOKEN,
27 | token: token
28 | };
29 | };
30 |
31 | const createCustomer = customerData => {
32 | return Object.assign(customerData, {
33 | type: types.CREATE_CUSTOMER
34 | });
35 | };
36 |
37 | const saveCustomer = customerData => {
38 | return Object.assign(customerData, {
39 | type: types.SAVE_CUSTOMER
40 | });
41 | };
42 |
43 | const saveAddress = customerData => {
44 | return Object.assign(customerData, {
45 | type: types.SAVE_ADDRESS
46 | });
47 | };
48 |
49 | const setCustomerData = customerData => {
50 | return {
51 | type: types.SET_CUSTOMER_DATA,
52 | data: customerData
53 | };
54 | };
55 |
56 | export default {
57 | loginCustomer,
58 | logoutCustomer,
59 | postLogoutCustomer,
60 | setCustomerToken,
61 | createCustomer,
62 | saveCustomer,
63 | saveAddress,
64 | setCustomerData
65 | };
66 |
--------------------------------------------------------------------------------
/src/components/Pages/ProductPage/query-container.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { loader } from "graphql.macro";
3 | import Loading from "components/Utils/Loading";
4 | import ErrorPage from "components/Pages/ErrorPage";
5 | import NotFoundPage from "../NotFoundPage";
6 | import ProductPage from "./component";
7 | import { useQuery } from "@apollo/react-hooks";
8 |
9 | const productPageQuery = loader(
10 | "src/state/graphql/queries/productPage.graphql"
11 | );
12 |
13 | const ProductPageQueryContainer = props => {
14 | const { loading, error, data } = useQuery(productPageQuery, {
15 | variables: { url_key: props.url_key }
16 | });
17 |
18 | if (loading) {
19 | return Change Your Password
9 | 29 | 30 | Form submission not implemented yet 31 |
12 |
13 |
26 |
27 |
28 |
29 |
30 | Duka for React
31 |
32 |
34 |
37 |
39 |
40 |
41 |
42 | );
43 |
44 | export default Navigation;
45 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/customer/middleware/saveAddress.js:
--------------------------------------------------------------------------------
1 | import { loader } from "graphql.macro";
2 | import apolloClient from "state/graphql/apollo-client";
3 | import commonActions from "../../common/actions";
4 | import messagesActions from "../../messages/actions";
5 |
6 | export default async (store, action) => {
7 | const dispatch = store.dispatch;
8 |
9 | if (!action.id) {
10 | dispatch(messagesActions.addMessage("Invalid address ID", "danger"));
11 | dispatch(commonActions.unlock());
12 | return;
13 | }
14 |
15 | try {
16 | const token = store.getState().customer.token;
17 | const customerContext = {
18 | headers: {
19 | authorization: token ? `Bearer ${token}` : ""
20 | }
21 | };
22 |
23 | // @todo: Check for the address ID and determine whether to do a save or an update
24 | const { data } = await apolloClient.mutate({
25 | mutation: loader(
26 | "../../../../graphql/mutations/updateCustomerAddress.graphql"
27 | ),
28 | variables: action,
29 | context: customerContext
30 | });
31 |
32 | console.log(data);
33 |
34 | dispatch(messagesActions.cleanMessages());
35 | dispatch(messagesActions.addMessage("Your address have been saved"));
36 | dispatch(commonActions.unlock());
37 | } catch (error) {
38 | console.log(error);
39 | dispatch(messagesActions.addMessage(error.toString(), "danger"));
40 | dispatch(commonActions.unlock());
41 | return;
42 | }
43 | };
44 |
--------------------------------------------------------------------------------
/src/components/Pages/CartPage/component.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Table, Button } from "react-bootstrap";
3 | import useCart from "hooks/useCart";
4 | import CartTotals from "./CartTotals";
5 | import "./component.css";
6 |
7 | const CartPage = props => {
8 | return (
9 |
10 |
14 |
15 |
40 |
41 | {props.cart.prices &&
46 | );
47 | };
48 |
49 | export default CartPage;
50 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/messages/reducer.js:
--------------------------------------------------------------------------------
1 | import types from "./types";
2 |
3 | // Add a new message
4 | const addMessageReducer = (state, action) => {
5 | let currentMessages = state.items ? state.items : [];
6 | let newMessages = [...currentMessages];
7 | newMessages.push({ text: action.messageText, type: action.messageType });
8 | return Object.assign({}, state, { items: newMessages });
9 | };
10 |
11 | // Remove an existing message
12 | const removeMessageReducer = (state, action) => {
13 | let currentMessages = state.items ? state.items : [];
14 | let newMessages = [...currentMessages];
15 | newMessages.map((message, index) => {
16 | if (message.text === action.messageText) newMessages.splice(index, 1);
17 | return message;
18 | });
19 |
20 | return Object.assign({}, state, { items: newMessages });
21 | };
22 |
23 | // Clean messages
24 | const cleanMessagesReducer = (state, action) => {
25 | let newMessages = [];
26 | return Object.assign({}, state, { items: newMessages });
27 | };
28 |
29 | // Main reducer
30 | const messagesReducer = (state, action) => {
31 | if (state === undefined) return {};
32 | if (action.type === types.ADD_MESSAGE)
33 | return addMessageReducer(state, action);
34 | if (action.type === types.REMOVE_MESSAGE)
35 | return removeMessageReducer(state, action);
36 | if (action.type === types.CLEAN_MESSAGES)
37 | return cleanMessagesReducer(state, action);
38 |
39 | return state;
40 | };
41 |
42 | export default messagesReducer;
43 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/customer/middleware/saveCustomer.js:
--------------------------------------------------------------------------------
1 | import { loader } from "graphql.macro";
2 | import apolloClient from "state/graphql/apollo-client";
3 | import commonActions from "../../common/actions";
4 | import messagesActions from "../../messages/actions";
5 | import { customerActions } from "..";
6 |
7 | export default async (store, action) => {
8 | const dispatch = store.dispatch;
9 |
10 | if (!action.email || !action.firstname || !action.lastname) {
11 | dispatch(messagesActions.addMessage("Invalid email or name", "danger"));
12 | dispatch(commonActions.unlock());
13 | return;
14 | }
15 |
16 | try {
17 | const token = store.getState().customer.token;
18 | const customerContext = {
19 | headers: {
20 | authorization: token ? `Bearer ${token}` : ""
21 | }
22 | };
23 |
24 | const { data } = await apolloClient.mutate({
25 | mutation: loader("../../../../graphql/mutations/saveCustomer.graphql"),
26 | variables: action,
27 | context: customerContext
28 | });
29 |
30 | dispatch(customerActions.setCustomerData(data.updateCustomer.customer));
31 | dispatch(messagesActions.cleanMessages());
32 | dispatch(messagesActions.addMessage("Your new details have been saved"));
33 | dispatch(commonActions.unlock());
34 | } catch (error) {
35 | console.log(error);
36 | dispatch(messagesActions.addMessage(error.toString(), "danger"));
37 | dispatch(commonActions.unlock());
38 | return;
39 | }
40 | };
41 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/customer/middleware/loginCustomer.js:
--------------------------------------------------------------------------------
1 | import { loader } from "graphql.macro";
2 | import apolloClient from "../../../../graphql/apollo-client";
3 | import customerActions from "../actions";
4 | import messagesActions from "../../messages/actions";
5 | import commonActions from "../../common/actions";
6 |
7 | export default async (store, action) => {
8 | if (!action.email || !action.password) {
9 | store.dispatch(
10 | messagesActions.addMessage("Invalid email or password", "danger")
11 | );
12 | store.dispatch(commonActions.unlock());
13 | return;
14 | }
15 |
16 | try {
17 | const { data } = await apolloClient.mutate({
18 | mutation: loader(
19 | "../../../../graphql/mutations/generateCustomerToken.graphql"
20 | ),
21 | variables: action
22 | });
23 |
24 | if (!data.generateCustomerToken || !data.generateCustomerToken.token) {
25 | console.log("GraphQL response", data);
26 | throw new Error("No customer token received");
27 | }
28 |
29 | store.dispatch(
30 | customerActions.setCustomerToken(data.generateCustomerToken.token)
31 | );
32 | store.dispatch(messagesActions.cleanMessages());
33 | store.dispatch(messagesActions.addMessage("You have logged in", "info"));
34 | store.dispatch(commonActions.unlock());
35 | } catch (error) {
36 | console.log(error);
37 | store.dispatch(messagesActions.addMessage(error.toString(), "danger"));
38 | store.dispatch(commonActions.unlock());
39 | return;
40 | }
41 | };
42 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/cart/reducer.js:
--------------------------------------------------------------------------------
1 | import types from "./types";
2 | import setCartIdReducer from "./reducers/setCartId";
3 | import setCartReducer from "./reducers/setCart";
4 | import addProductReducer from "./reducers/addProduct";
5 | import updateCartReducer from "./reducers/updateCart";
6 | import updateProductReducer from "./reducers/updateProduct";
7 | import removeCartItemReducer from "./reducers/removeCartItem";
8 | import lockReducer from "../common/reducers/lock";
9 | import unlockReducer from "../common/reducers/unlock";
10 |
11 | // Main reducer
12 | const cartReducer = (state, action) => {
13 | if (state === undefined) {
14 | return {};
15 | }
16 |
17 | if (action.type === types.SET_CART_ID) {
18 | return setCartIdReducer(state, action);
19 | }
20 |
21 | if (action.type === types.SET_CART) {
22 | return setCartReducer(state, action);
23 | }
24 |
25 | if (action.type === types.UPDATE_CART) {
26 | return updateCartReducer(state, action);
27 | }
28 |
29 | if (action.type === types.ADD_PRODUCT) {
30 | return addProductReducer(state, action);
31 | }
32 |
33 | if (action.type === types.UPDATE_PRODUCT) {
34 | return updateProductReducer(state, action);
35 | }
36 |
37 | if (action.type === types.REMOVE_CART_ITEM) {
38 | return removeCartItemReducer(state, action);
39 | }
40 |
41 | if (action.type === types.LOCK) {
42 | return lockReducer(state, action);
43 | }
44 |
45 | if (action.type === types.UNLOCK) {
46 | return unlockReducer(state);
47 | }
48 |
49 | return state;
50 | };
51 |
52 | export default cartReducer;
53 |
--------------------------------------------------------------------------------
/src/components/App/Navigation/CustomerLogin/component.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Nav from "react-bootstrap/Nav";
3 | import CustomerLoginForm from "components/Molecules/CustomerLoginForm";
4 | import Modal from "react-bootstrap/Modal";
5 | import { Link } from "react-router-dom";
6 |
7 | const CustomerLogin = props => {
8 | const [showLoginBox, setShowLoginBox] = useState(false);
9 |
10 | const onAfterLogin = () => {
11 | setShowLoginBox(false);
12 | };
13 |
14 | const onClickToLogin = () => {
15 | setShowLoginBox(!showLoginBox);
16 | };
17 |
18 | return (
19 | <>
20 | {props.customer.token && (
21 |
22 | Your Account
23 |
24 | )}
25 |
26 | {!props.customer.token && (
27 | 11 | Shopping Cart {useCart.useItemsCount()} items 12 |
13 || Product | 17 |SKU | 18 |Qty | 19 ||
|---|---|---|---|
| {item.product.name} | 25 |{item.product.sku} | 26 |{item.quantity} | 27 |28 | 35 | | 36 |
38 | Login to your account to get access to your previous cart, 39 | wishlist or orders. 40 |
41 |
15 | {address.default_billing && (
16 | Default Billing Address
17 | )}
18 | {address.default_shipping && (
19 | Default Shipping Address
20 | )}
21 |
22 |
23 |
53 |
54 |
55 |
56 | );
57 | };
58 |
59 | export default Address;
60 |
--------------------------------------------------------------------------------
/src/components/Pages/CustomerPage/Account/Edit/component.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Form from "react-bootstrap/Form";
3 | import Button from "react-bootstrap/Button";
4 |
5 | const CustomerPageAccountEdit = props => {
6 | const customer = props.customerData;
7 | const [email, setEmail] = useState(customer.email);
8 | const [firstname, setFirstname] = useState(customer.firstname);
9 | const [lastname, setLastname] = useState(customer.lastname);
10 |
11 | const onSave = () => {
12 | props.onSaveCustomer({
13 | email,
14 | firstname,
15 | lastname
16 | });
17 | };
18 |
19 | return (
20 | | City | 25 |{address.city} | 26 |
| Company | 29 |{address.company} | 30 |
| Country | 33 |{address.country_id} | 34 |
| Postcode | 37 |{address.postcode} | 38 |
| Street | 41 |{address.street.join()} | 42 |
| Telephone | 45 |{address.telephone} | 46 |
| VAT ID | 49 |{address.vat_id} | 50 |
21 |
24 | Email address
25 | setEmail(event.target.value)}
31 | />
32 |
33 |
34 |
35 | First Name
36 | setFirstname(event.target.value)}
42 | />
43 |
44 |
45 |
46 | Last Name
47 | setLastname(event.target.value)}
53 | />
54 |
55 |
56 |
59 |
60 | );
61 | };
62 |
63 | export default CustomerPageAccountEdit;
64 |
--------------------------------------------------------------------------------
/src/state/redux/ducks/customer/middleware/createCustomer.js:
--------------------------------------------------------------------------------
1 | import { loader } from "graphql.macro";
2 | import apolloClient from "state/graphql/apollo-client";
3 | import commonActions from "../../common/actions";
4 | import messagesActions from "../../messages/actions";
5 | import { customerActions } from "..";
6 | import { createBrowserHistory } from 'history';
7 |
8 | export default async (store, action) => {
9 | const dispatch = store.dispatch;
10 |
11 | const token = store.getState().customer.token;
12 | if (token) {
13 | dispatch(messagesActions.addMessage("Already logged in", "danger"));
14 | const history = createBrowserHistory();
15 | history.push("/customer/account"); // @todo: This does not work as expected yet
16 | return;
17 | }
18 |
19 | if (!action.email || !action.firstname || !action.lastname || !action.password) {
20 | dispatch(messagesActions.addMessage("Invalid email or name or password", "danger"));
21 | dispatch(commonActions.unlock());
22 | return;
23 | }
24 |
25 | if (action.password !== action.password2) {
26 | dispatch(messagesActions.addMessage("Passwords do not match", "danger"));
27 | dispatch(commonActions.unlock());
28 | return;
29 | }
30 |
31 | try {
32 | await apolloClient.mutate({
33 | mutation: loader("../../../../graphql/mutations/createCustomer.graphql"),
34 | variables: action
35 | });
36 |
37 | // @todo: Check whether the account should be activated first?
38 | dispatch(customerActions.loginCustomer(action.email, action.password));
39 | dispatch(messagesActions.cleanMessages());
40 | dispatch(messagesActions.addMessage("Your account has been created. You are ready to login now"));
41 | dispatch(commonActions.unlock());
42 |
43 | const history = createBrowserHistory();
44 | history.push("/customer/account");
45 |
46 | } catch (error) {
47 | console.log(error);
48 | dispatch(messagesActions.addMessage(error.toString(), "danger"));
49 | dispatch(commonActions.unlock());
50 | return;
51 | }
52 | };
53 |
--------------------------------------------------------------------------------
/src/components/Molecules/CustomerLoginForm/component.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Form from "react-bootstrap/Form";
3 | import Button from "react-bootstrap/Button";
4 | import ButtonGroup from "react-bootstrap/ButtonGroup";
5 | import Loading from "components/Utils/Loading";
6 | import { Link } from "@reach/router";
7 |
8 | const CustomerLoginForm = props => {
9 | const [loading, setLoading] = useState(false);
10 | const [email, setEmail] = useState();
11 | const [password, setPassword] = useState();
12 |
13 | const onSubmit = () => {
14 | setLoading(true);
15 | props.onSubmit(email, password, () => {
16 | setLoading(false);
17 | if (props.onSubmitCallback) {
18 | props.onSubmitCallback();
19 | }
20 | });
21 | };
22 |
23 | if (loading) {
24 | return Edit Account Information
22 | 23 |
72 | {fields.map(field => {
73 | return (
74 |
75 | {field.label}
76 | field.setter(event.target.value)}
82 | />
83 |
84 | );
85 | })}
86 |
87 |
90 |
91 | );
92 | };
93 |
94 | export default AddressEdit;
95 |
--------------------------------------------------------------------------------
/src/components/Pages/CustomerPage/Account/Create/component.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Form from "react-bootstrap/Form";
3 | import Button from "react-bootstrap/Button";
4 |
5 | const CustomerPageAccountCreate = props => {
6 | const [email, setEmail] = useState('');
7 | const [firstname, setFirstname] = useState('');
8 | const [lastname, setLastname] = useState('');
9 | const [password, setPassword] = useState('');
10 | const [password2, setPassword2] = useState('');
11 |
12 | const onSave = () => {
13 | props.onCreateCustomer({
14 | email,
15 | firstname,
16 | lastname,
17 | password,
18 | password2
19 | });
20 | };
21 |
22 | return (
23 |
24 |
27 | Email address
28 | setEmail(event.target.value)}
34 | />
35 |
36 |
37 |
38 | First Name
39 | setFirstname(event.target.value)}
45 | />
46 |
47 |
48 |
49 | Last Name
50 | setLastname(event.target.value)}
56 | />
57 |
58 |
59 |
60 | Password
61 | setPassword(event.target.value)}
67 | />
68 |
69 |
70 |
71 | Retype Password
72 | setPassword2(event.target.value)}
78 | />
79 |
80 |
81 |
84 |
85 | );
86 | };
87 |
88 | export default CustomerPageAccountCreate;
89 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Duka for React
2 |
3 | A prototype e-commerce project that connects a React app (using Redux, Apollo Client and React Bootstrap) to a Magento 2.3 GraphQL site. Currently, the following functionality is working:
4 |
5 | - Displaying products, categories, CMS-pages (including routing)
6 | - Navigation showing top-level categories plus second-level categories
7 | - Showing messages in the message area (with auto-hide)
8 | - Adding simple products to cart (without custom options)
9 | - Create a customer account
10 | - Login to customer account and modify customer account
11 | - ElasticSearch 6 search (by simply filling in the `elasticsearch_url` variable in your `src/config.js`)
12 |
13 | ## Demo
14 | https://duka.yireo-demo.com/
15 |
16 | ## Technical details
17 |
18 | - React 16 with functional components
19 | - Redux middleware using Apollo Client to make GraphQL queries and mutations
20 | - Apollo Client is using introspection to support interfaces and unions with fragments (see notes below)
21 |
22 | ## Getting started
23 |
24 | This package is not bundled with a package lock, so let's pray that this works nicely. Just install the packages from `packages.json` using yarn or npm:
25 |
26 | ```bash
27 | npm install # or
28 | yarn install
29 | ```
30 |
31 | Next, copy the `src/config.js.dist` file to `src/config.js` and modify your Magento GraphQL URL.
32 |
33 | Afterwards, start the app:
34 |
35 | ```bash
36 | npm start # or
37 | yarn start
38 | ```
39 |
40 | ## Architecture
41 |
42 | This package is based on `create-react-app`. On top of this, [react-app-rewired](https://github.com/timarney/react-app-rewired) has been used to allow for a local `config-override.js` to extend Webpack, without the need to eject the full configuration.
43 |
44 | Redux uses the ducks-standard with 3 ducks (cart, customer, messages) to group action types, action creators, reducers and middleware together.
45 |
46 | The cart and customer ducks use a `locked` variable to prevent multiple simultaneous actions. Using a `setLock(true, callback)` action, the lock is set. When calling upon `setLock(false)`, the lock will be liften and the callback will be called as well. The callback allows for the Redux middleware (handling GraphQL things asyncronously) to send a message to the local component to update the local state.
47 |
48 | ## Development
49 |
50 | This project uses `plop`, so you can easily create new components using a command like this:
51 |
52 | npm run generate component Example
53 |
54 | ## Hints on using GraphQL Fragments and client-side schemas
55 |
56 | As soon as your queries include fragments that are based on unions and interfaces (and Magento is notorious for this), the Apollo Client needs to be pre-configured with a thing called `IntrospectionFragmentMatcher` and this matcher needs to be fed a GraphQL schema definition on the client side. To generate this, Duka makes use of [graphql-code-generator](https://graphql-code-generator.com/) with a configuration file `codegen.yml`. This YAML file includes a reference to a Magento 2.3+ instance to read GraphQL schemas from using a command `yarn graphql-codegen`. When modifying this Duka codebase and simultaneously upgrading Magento, it might very well be that the generated schemas in `src/codegen` are out-of-date. The command above should fix this.
57 |
58 | ## Roadmap
59 |
60 | This is not a very active project, mainly because it is a playground for Yireo personally. But if people raise their hands to mention that it is important to them as well, we are happy to add additional effort into it. The roadmap is therefore still limited:
61 |
62 | - Finish a basic checkout for Simple Products;
63 | - Refactor all Apollo and Redux components into hooks, reducing the number of components in the tree and simplifying lots of work as well;
64 | - Finalize theming logic, so that the core project is easily extendable. Perhaps even add documentation;
65 | - Move some GraphQL queries and mutations from the Redux middleware into standalone functions, so that they are even reusable without Redux;
66 | - Shift from Twitter Bootstrap into Material UI. Separating logical components (containers without any HTML) and presentational components (with bindings to specific UI libraries);
67 | - Move generic code into separate NPM packages, so that a new project is more easily bootstrapped;
68 | - Investigate a move to NextJS (because of easier routing, a more solid base architecture and Server Side Rendering);
69 |
70 | ## Todo
71 |
72 | - Optimize caching
73 | - Product options
74 | - Checkout flow
75 |
76 | ... and lots more
77 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/components/Pages/CheckoutPage/component.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Accordion from "react-bootstrap/Accordion";
3 | import Card from "react-bootstrap/Card";
4 | import Button from "react-bootstrap/Button";
5 | import Form from "react-bootstrap/Form";
6 |
7 | const CheckoutPage = () => {
8 | const [email, setEmail] = useState("");
9 | const [firstname, setFirstname] = useState("");
10 | const [lastname, setLastname] = useState("");
11 | const [company, setCompany] = useState("");
12 | const [streetAddress, setStreetAddress] = useState("");
13 | const [city, setCity] = useState("");
14 | const [postcode, setPostcode] = useState("");
15 | const [country, setCountry] = useState("");
16 | const [phonenumber, setPhonenumber] = useState("");
17 |
18 | const onEnableShippingAddress = () => {
19 | console.log("Let's load some data for shipping address");
20 | };
21 |
22 | return (
23 | Create Account
25 | 26 |
24 |
26 |
27 |
28 |
34 | Shipping Address
35 |
36 |
37 |
38 |
39 |
40 | Email Address
41 | setEmail(event.target.value)}
47 | />
48 |
49 |
50 |
51 | First Name
52 | setFirstname(event.target.value)}
58 | />
59 |
60 |
61 |
62 | Last Name
63 | setLastname(event.target.value)}
69 | />
70 |
71 |
72 |
73 | Company
74 | setCompany(event.target.value)}
80 | />
81 |
82 |
83 |
84 | Street Address
85 | setStreetAddress(event.target.value)}
91 | />
92 |
93 |
94 |
95 | City
96 | setCity(event.target.value)}
102 | />
103 |
104 |
105 |
106 | Postcode
107 | setPostcode(event.target.value)}
113 | />
114 |
115 |
116 |
117 | Country
118 | setCountry(event.target.value)}
124 | />
125 |
126 |
127 |
128 | Phone number
129 | setPhonenumber(event.target.value)}
135 | />
136 |
137 |
138 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 | Shipping Method
149 |
150 |
151 |
152 | @todo
153 |
154 |
155 |
156 |
157 |
158 |
159 | Payment Methods
160 |
161 |
162 |
163 | @todo
164 |
165 |
166 |
167 |
168 |
169 |
172 |
173 |
174 | @todo
175 |
176 |
177 |
178 |
179 | );
180 | };
181 |
182 | export default CheckoutPage;
183 |
--------------------------------------------------------------------------------
/src/edit.json:
--------------------------------------------------------------------------------
1 | {
2 | "state": {
3 | "customer": {
4 | "id": 2,
5 | "email": "milic@jolausa.com",
6 | "firstname": "Milic",
7 | "lastname": "Stankovic",
8 | "group_id": 1,
9 | "taxvat": null,
10 | "addresses": [
11 | {
12 | "id": 1,
13 | "default_billing": true,
14 | "default_shipping": false,
15 | "firstname": "zzzPeracacacaasaSAA",
16 | "lastname": "StankovicSADSADSADSAD",
17 | "street": ["Test 123"],
18 | "company": "addddd",
19 | "country_id": "US",
20 | "region": {
21 | "region": "Colorado",
22 | "region_id": 13,
23 | "region_code": "CO",
24 | "__typename": "CustomerAddressRegion"
25 | },
26 | "region_id": 13,
27 | "city": "New York",
28 | "postcode": "18000",
29 | "__typename": "CustomerAddress"
30 | },
31 | {
32 | "id": 2,
33 | "default_billing": false,
34 | "default_shipping": true,
35 | "firstname": "Milic",
36 | "lastname": "Stankovic",
37 | "street": ["Rararra"],
38 | "company": "JolaUsa",
39 | "country_id": "JP",
40 | "region": {
41 | "region": "Shibuya",
42 | "region_id": 0,
43 | "region_code": "Shibuya",
44 | "__typename": "CustomerAddressRegion"
45 | },
46 | "region_id": 0,
47 | "city": "Test Jola 123",
48 | "postcode": "123456",
49 | "__typename": "CustomerAddress"
50 | }
51 | ],
52 | "__typename": "Customer",
53 | "token": "o06xaahdps14lqikawanvcwdu4avgdle2"
54 | },
55 | "loading": false
56 | },
57 | "common": {
58 | "timestamp": 1572619445719,
59 | "authorize": true,
60 | "flag": "ready",
61 | "cache": "1572535119",
62 | "modal": { "loginModal": false },
63 | "locked": false,
64 | "loading": false
65 | },
66 | "messages": { "items": [] },
67 | "queries": {
68 | "items": {},
69 | "temp": {},
70 | "data": {
71 | "2": {
72 | "data": {
73 | "category": {
74 | "id": 2,
75 | "name": "Default Category",
76 | "description": null,
77 | "include_in_menu": 1,
78 | "url_path": null,
79 | "thumbnail_image": null,
80 | "path": "1/2",
81 | "children": [
82 | {
83 | "id": 10,
84 | "name": "Brands",
85 | "description": null,
86 | "thumbnail_image": "MENU_Brands-House_Brands.jpg",
87 | "url_key": "brands",
88 | "url_path": "brands",
89 | "include_in_menu": 1,
90 | "path": "1/2/10",
91 | "children": [
92 | {
93 | "id": 12,
94 | "name": "National Brand",
95 | "description": null,
96 | "thumbnail_image": null,
97 | "url_key": "national-brand",
98 | "url_path": "brands/national-brand",
99 | "include_in_menu": 1,
100 | "path": "1/2/10/12",
101 | "children": [
102 | {
103 | "id": 16,
104 | "name": "Internation Brand #1",
105 | "description": null,
106 | "thumbnail_image": null,
107 | "url_key": "internation-brand-1",
108 | "url_path": "brands/national-brand/internation-brand-1",
109 | "include_in_menu": 1,
110 | "path": "1/2/10/12/16",
111 | "__typename": "CategoryTree"
112 | }
113 | ],
114 | "__typename": "CategoryTree"
115 | },
116 | {
117 | "id": 11,
118 | "name": "House Brands",
119 | "description": "Checkout
25 |Test1
", 120 | "thumbnail_image": "KW1010A_1.jpg", 121 | "url_key": "house-brands", 122 | "url_path": "brands/house-brands", 123 | "include_in_menu": 1, 124 | "path": "1/2/10/11", 125 | "children": [ 126 | { 127 | "id": 15, 128 | "name": "My Garden", 129 | "description": "test1
", 130 | "thumbnail_image": "KW1009A.jpg", 131 | "url_key": "my-garden", 132 | "url_path": "brands/house-brands/my-garden", 133 | "include_in_menu": 1, 134 | "path": "1/2/10/11/15", 135 | "__typename": "CategoryTree" 136 | } 137 | ], 138 | "__typename": "CategoryTree" 139 | }, 140 | { 141 | "id": 14, 142 | "name": "International Brands", 143 | "description": null, 144 | "thumbnail_image": null, 145 | "url_key": "international-brands", 146 | "url_path": "brands/international-brands", 147 | "include_in_menu": 0, 148 | "path": "1/2/10/14", 149 | "children": [], 150 | "__typename": "CategoryTree" 151 | } 152 | ], 153 | "__typename": "CategoryTree" 154 | }, 155 | { 156 | "id": 13, 157 | "name": "Products", 158 | "description": null, 159 | "thumbnail_image": "MENU_Products.jpg", 160 | "url_key": "products", 161 | "url_path": "products", 162 | "include_in_menu": 1, 163 | "path": "1/2/13", 164 | "children": [ 165 | { 166 | "id": 9, 167 | "name": "Closeouts", 168 | "description": null, 169 | "thumbnail_image": null, 170 | "url_key": "closeouts", 171 | "url_path": "products/closeouts", 172 | "include_in_menu": 1, 173 | "path": "1/2/13/9", 174 | "children": [], 175 | "__typename": "CategoryTree" 176 | }, 177 | { 178 | "id": 8, 179 | "name": "Women's Accessories", 180 | "description": null, 181 | "thumbnail_image": null, 182 | "url_key": "women-s-accessories", 183 | "url_path": "products/women-s-accessories", 184 | "include_in_menu": 1, 185 | "path": "1/2/13/8", 186 | "children": [], 187 | "__typename": "CategoryTree" 188 | }, 189 | { 190 | "id": 7, 191 | "name": "Electronics", 192 | "description": null, 193 | "thumbnail_image": null, 194 | "url_key": "electronics", 195 | "url_path": "products/electronics", 196 | "include_in_menu": 1, 197 | "path": "1/2/13/7", 198 | "children": [], 199 | "__typename": "CategoryTree" 200 | }, 201 | { 202 | "id": 6, 203 | "name": "Auto", 204 | "description": null, 205 | "thumbnail_image": null, 206 | "url_key": "auto", 207 | "url_path": "products/auto", 208 | "include_in_menu": 1, 209 | "path": "1/2/13/6", 210 | "children": [], 211 | "__typename": "CategoryTree" 212 | }, 213 | { 214 | "id": 5, 215 | "name": "Household", 216 | "description": null, 217 | "thumbnail_image": null, 218 | "url_key": "household", 219 | "url_path": "products/household", 220 | "include_in_menu": 1, 221 | "path": "1/2/13/5", 222 | "children": [], 223 | "__typename": "CategoryTree" 224 | }, 225 | { 226 | "id": 4, 227 | "name": "Kitchen & Dining", 228 | "description": null, 229 | "thumbnail_image": null, 230 | "url_key": "kitchen-dining", 231 | "url_path": "products/kitchen-dining", 232 | "include_in_menu": 1, 233 | "path": "1/2/13/4", 234 | "children": [], 235 | "__typename": "CategoryTree" 236 | }, 237 | { 238 | "id": 3, 239 | "name": "Camping & Outdoor", 240 | "description": null, 241 | "thumbnail_image": null, 242 | "url_key": "camping-outdoor", 243 | "url_path": "products/camping-outdoor", 244 | "include_in_menu": 1, 245 | "path": "1/2/13/3", 246 | "children": [], 247 | "__typename": "CategoryTree" 248 | } 249 | ], 250 | "__typename": "CategoryTree" 251 | } 252 | ], 253 | "__typename": "CategoryTree" 254 | } 255 | } 256 | }, 257 | "home-map": { 258 | "data": { 259 | "cmsBlocks": { 260 | "items": [ 261 | { 262 | "content": "![\"\"](\"https://hglobalinc.joladev.com/pub/media/entire_map_with_pin.jpg\")
![\"\"](\"https://hglobalinc.joladev.com/pub/media/coleman.png\")