@evershop/evershop 1.0.0-beta

package/src/modules/customer/pages/frontStore/account/components/Order.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default function Order({ order }) {
+  return <div className='order border-divider'>
+    <div className='order-inner grid grid-cols-1 md:grid-cols-3 gap-2'>
+      <div className='order-items col-span-2'>
+        {order.items.map((item) => <div className='order-item mb-1 flex gap-2 items-center'>
+          <div className="thumbnail border border-divider p-1 rounded">
+            {item.thumbnail && <img style={{ maxWidth: '6rem' }} src={item.thumbnail} alt={item.productName} />}
+            {!item.thumbnail && <svg style={{ width: '2rem' }} fill="currentcolor" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path fillRule="evenodd" d="M6 11h8V9H6v2zm0 4h8v-2H6v2zm0-8h4V5H6v2zm6-5H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V6l-4-4z" /></svg>}
+          </div>
+          <div className='order-item-info'>
+            <div className='order-item-name font-semibold'>{item.productName}</div>
+            <div className='order-item-sku italic'>Sku: #{item.productSku}</div>
+            <div className='order-item-qty' style={{ fontSize: '0.9em' }}>{item.qty} x {item.productPrice.text}</div>
+          </div>
+        </div>)}
+      </div>
+      <div className='order-total col-span-1'>
+        <div className='order-header'>
+          <div className='order-number'><span className='font-bold'>Order: #{order.orderNumber}</span><span className='italic pl-1'>{order.createdAt.text}</span></div>
+        </div>
+        <div className='order-total-value font-bold'>Total: {order.grandTotal.text}</div>
+      </div>
+    </div>
+  </div>
+}

package/src/modules/customer/pages/frontStore/account/index.js

@@ -0,0 +1,17 @@
+const { buildUrl } = require("../../../../../lib/router/buildUrl");
+const { getContextValue, setContextValue } = require("../../../../graphql/services/contextHelper");
+
+module.exports = (request, response, stack, next) => {
+  // Check if the user is logged in
+  const tokenPayload = getContextValue(request, 'tokenPayload');
+  if (!tokenPayload || !tokenPayload.user?.customerId) {
+    // Redirect to admin dashboard
+    response.redirect(buildUrl('homepage'));
+  } else {
+    setContextValue(request, 'pageInfo', {
+      title: 'Account details',
+      description: 'Account details'
+    });
+    next();
+  }
+}

package/src/modules/customer/pages/frontStore/account/route

@@ -0,0 +1,2 @@
+GET
+/account

package/src/modules/customer/pages/frontStore/address/AddressForm.js

@@ -0,0 +1,238 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/prop-types */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Field } from '../../../../../lib/components/form/Field';
+import Area from '../../../../../lib/components/Area';
+import { useQuery } from 'urql';
+
+const ProvincesQuery = `
+  query Province($countries: [String]) {
+    provinces (countries: $countries) {
+      code
+      name
+      countryCode
+    }
+  }
+`;
+const CountriesQuery = `
+  query Country($countries: [String]) {
+    countries (countries: $countries) {
+      code
+      name
+    }
+  }
+`;
+
+function Province({ selectedCountry = 'US', selectedProvince, allowCountries = [], formId, fieldName = 'province' }) {
+  const [result, reexecuteQuery] = useQuery({
+    query: ProvincesQuery,
+    variables: { countries: allowCountries },
+  });
+  const { data, fetching, error } = result;
+
+  if (fetching) return <p>Loading...</p>;
+  if (error) return <p>Oh no... {error.message}</p>;
+
+  return (
+    <Field
+      type="select"
+      value={selectedProvince}
+      name={fieldName}
+      label="Province"
+      placeholder="Province"
+      validationRules={['notEmpty']}
+      formId={formId}
+      options={
+        data.provinces
+          .filter(p => p.countryCode === selectedCountry)
+          .map(p => { return { value: p.code, text: p.name } })
+      }
+    />
+  );
+}
+
+Province.propTypes = {
+  formId: PropTypes.string.isRequired,
+  selectedProvince: PropTypes.string,
+  allowCountries: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+function Country({
+  selectedCountry, setSelectedCountry, allowCountries = [], formId, fieldName = 'country'
+}) {
+  const onChange = (e) => {
+    setSelectedCountry(e.target.value);
+  };
+  const [result, reexecuteQuery] = useQuery({
+    query: CountriesQuery,
+    variables: { countries: allowCountries },
+  });
+
+  const { data, fetching, error } = result;
+
+  if (fetching) return <p>Loading...</p>;
+  if (error) return <p>Oh no... {error.message}</p>;
+
+  return (
+    <div style={{ marginTop: '1rem' }}>
+      <Field
+        type="select"
+        value={selectedCountry}
+        label="Country"
+        name={fieldName}
+        placeholder="Country"
+        onChange={onChange}
+        formId={formId}
+        validationRules={['notEmpty']}
+        options={data.countries.map(c => { return { value: c.code, text: c.name } })}
+      />
+    </div>
+  );
+}
+
+Country.propTypes = {
+  allowCountries: PropTypes.arrayOf(PropTypes.string).isRequired,
+  selectedCountry: PropTypes.string.isRequired,
+  formId: PropTypes.string.isRequired,
+  setSelectedCountry: PropTypes.func.isRequired
+};
+
+function NameAndTelephone({ formId, address }) {
+  return (
+    <div className="grid grid-cols-2 gap-1">
+      <div>
+        <Field
+          type="text"
+          name="address[full_name]"
+          value={address?.fullName}
+          formId={formId}
+          label="Full name"
+          placeholder="Full Name"
+          validationRules={['notEmpty']}
+        />
+      </div>
+      <div>
+        <Field
+          type="text"
+          name="address[telephone]"
+          value={address?.telephone}
+          formId={formId}
+          label="Telephone"
+          placeholder="Telephone"
+          validationRules={['notEmpty']}
+        />
+      </div>
+    </div>
+  );
+}
+
+function ProvinceAndPostcode({
+  formId, address, allowCountries = [], selectedCountry
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-1 mt-1">
+      <div>
+        <Province
+          address={address}
+          allowCountries={allowCountries}
+          selectedCountry={selectedCountry}
+          selectedProvince={address?.province?.code}
+          formId={formId}
+          fieldName="address[province]"
+        />
+      </div>
+      <div>
+        <Field
+          type="text"
+          name="address[postcode]"
+          value={address?.postcode}
+          formId={formId}
+          label="Postcode"
+          placeholder="Postcode"
+          validationRules={['notEmpty']}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function CustomerAddressForm({ allowCountries = [], address = {}, formId = 'customerAddressForm', areaId = 'customerAddressForm' }) {
+  const [selectedCountry, setSelectedCountry] = React.useState(() => {
+    const country = address?.country?.code;
+    if (!country || !allowCountries.includes(country)) {
+      return allowCountries[0];
+    } else {
+      return country;
+    }
+  });
+
+  return (
+    <Area
+      id={areaId}
+      coreComponents={[
+        {
+          component: { default: NameAndTelephone },
+          props: {
+            formId,
+            address: address
+          },
+          sortOrder: 10,
+          id: 'fullName'
+        },
+        {
+          component: { default: Field },
+          props: {
+            type: 'text',
+            name: 'address[address_1]',
+            value: address?.address1,
+            formId,
+            label: 'Address',
+            placeholder: 'Address',
+            validationRules: ['notEmpty']
+          },
+          sortOrder: 20,
+          id: 'address1'
+        },
+        {
+          component: { default: Field },
+          props: {
+            type: 'text',
+            name: 'address[city]',
+            value: address?.city,
+            formId,
+            label: 'City',
+            placeholder: 'City',
+            validationRules: []
+          },
+          sortOrder: 40,
+          id: 'city'
+        },
+        {
+          component: { default: Country },
+          props: {
+            selectedCountry: selectedCountry,
+            allowCountries: allowCountries,
+            setSelectedCountry: setSelectedCountry,
+            formId,
+            fieldName: 'address[country]'
+          },
+          sortOrder: 50,
+          id: 'country'
+        },
+        {
+          component: { default: ProvinceAndPostcode },
+          props: {
+            formId,
+            selectedCountry,
+            address: address,
+            allowCountries: allowCountries,
+            selectedCountry: selectedCountry
+          },
+          sortOrder: 60,
+          id: 'province'
+        }
+      ]}
+    />
+  );
+}

package/src/modules/customer/pages/frontStore/address/AddressSummary.js

@@ -0,0 +1,60 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable camelcase */
+/* eslint-disable react/no-unstable-nested-components */
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+
+export function AddressSummary({ address }) {
+  return (
+    <Area
+      id="addressSummary"
+      className="address-summary"
+      coreComponents={[
+        {
+          component: { default: ({ fullName }) => <div className="full-name">{fullName}</div> },
+          props: {
+            fullName: address.fullName
+          },
+          sortOrder: 10,
+          id: 'fullName'
+        },
+        {
+          component: { default: ({ address1 }) => <div className="address-one">{address1}</div> },
+          props: {
+            address1: address.address1
+          },
+          sortOrder: 20,
+          id: 'address1'
+        },
+        {
+          component: {
+            default: ({
+              city, province, postcode, country
+            }) => (
+              <div className="city-province-postcode">
+                <div>{`${postcode}, ${city}`}</div>
+                <div>{`${province.name}, ${country.name}`}</div>
+              </div>
+            )
+          },
+          props: {
+            city: address.city,
+            province: address.province,
+            postcode: address.postcode,
+            country: address.country
+          },
+          sortOrder: 40,
+          id: 'cityProvincePostcode'
+        },
+        {
+          component: { default: ({ telephone }) => <div className="telephone">{telephone}</div> },
+          props: {
+            telephone: address.telephone
+          },
+          sortOrder: 60,
+          id: 'telephone'
+        }
+      ]}
+    />
+  );
+}

package/src/modules/customer/pages/frontStore/all/UserIcon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Icon from '@heroicons/react/outline/UserIcon';
+
+export default function UserIcon({ user, accountUrl, loginUrl }) {
+  return <div className='self-center'>
+    <a href={user ? accountUrl : loginUrl}>
+      <Icon width={25} height={25} />
+    </a>
+  </div>
+}
+
+export const layout = {
+  areaId: 'icon-wrapper',
+  sortOrder: 100
+}
+
+export const query = `
+  query Query {
+    user: customer(id: getContextValue("customerId", null)) {
+      uuid
+      fullName
+      email
+    }
+    accountUrl: url(routeId: "account")
+    loginUrl: url(routeId: "login")
+  }
+`

package/src/modules/customer/pages/frontStore/all/[tokenVerify]auth.js

@@ -0,0 +1,12 @@
+const { getContextValue, setContextValue } = require('../../../../graphql/services/contextHelper');
+const { get } = require('../../../../../lib/util/get');
+
+module.exports = (request, response, stack, next) => {
+  // Get the token Payload
+  const tokenPayLoad = getContextValue(request, 'tokenPayload');
+  console.log('tokenPayLoad', tokenPayLoad)
+  if (get(tokenPayLoad, 'user.uuid')) {
+    setContextValue(request, 'customerId', tokenPayLoad.user?.uuid || null);
+  }
+  next();
+};

package/src/modules/customer/pages/frontStore/checkout/CustomerInfoStep.js

@@ -0,0 +1,141 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Form } from '../../../../../lib/components/form/Form';
+import { Field } from '../../../../../lib/components/form/Field';
+import { useCheckoutSteps, useCheckoutStepsDispatch } from '../../../../../lib/context/checkoutSteps';
+import { useCheckout } from '../../../../../lib/context/checkout';
+
+function Edit({ user, setContactInfoUrl, email, setEmail, cartId, loginUrl }) {
+  const { completeStep } = useCheckoutStepsDispatch();
+
+  const onSuccess = (response) => {
+    setEmail(response.data.email);
+    completeStep('contact', response.data.email);
+  };
+
+  React.useEffect(() => {
+    async function setContactIfLoggedIn() {
+      if (!user) {
+        return;
+      }
+      // Post fetch to set contact info
+      const response = await fetch(setContactInfoUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          email: user.email,
+          cartId
+        })
+      });
+      const data = await response.json();
+      if (data.success === true) {
+        setEmail(data.data.email);
+        completeStep('contact', data.data.email);
+      }
+    }
+    setContactIfLoggedIn()
+  }, []);
+
+  return (
+    <div className="">
+      <h4 className="mb-1 mt-1">{'Contact information'}</h4>
+      {!user && <div className='mb-1'>
+        <span>Already have an account?</span> <a className='text-interactive hover:underline' href={loginUrl}>Login</a>
+      </div>}
+      <Form
+        id="checkout-contact-info-form"
+        action={setContactInfoUrl}
+        method="POST"
+        isJSON={true}
+        onSuccess={onSuccess}
+        submitBtn
+        btnText="Continue to shipping"
+      >
+        <Field
+          type="text"
+          formId="checkout-contact-info-form"
+          name="email"
+          validationRules={['notEmpty', 'email']}
+          placeholder="Email"
+          value={email}
+        />
+        <Field
+          type="hidden"
+          formId="checkout-contact-info-form"
+          name="cartId"
+          value={cartId}
+        />
+      </Form>
+    </div>
+  );
+}
+
+Edit.propTypes = {
+  setContactInfoUrl: PropTypes.string.isRequired
+};
+
+export default function ContactInformationStep({ setContactInfoUrl, cart: { customerEmail }, user, loginUrl }) {
+  const steps = useCheckoutSteps();
+  const { cartId } = useCheckout();
+  const [email, setEmail] = React.useState(customerEmail);
+  const [display, setDisplay] = React.useState(false);
+  const { canStepDisplay, addStep } = useCheckoutStepsDispatch();
+  const step = steps.find((e) => e.id === 'contact') || {};
+
+  React.useEffect(() => {
+    addStep({
+      id: 'contact',
+      title: 'Contact information',
+      previewTitle: 'Contact',
+      isCompleted: customerEmail ? true : false,
+      preview: customerEmail ? customerEmail : '',
+      sortOrder: 5,
+      editable: user ? false : true
+    });
+  }, []);
+
+  React.useEffect(() => {
+    setDisplay(canStepDisplay(step, steps));
+  });
+
+  if (step.isCompleted)
+    return null;
+
+  return (
+    <div className="checkout-contact checkout-step">
+      {display && <Edit
+        user={user}
+        step={step}
+        cartId={cartId}
+        email={email}
+        setContactInfoUrl={setContactInfoUrl}
+        setEmail={setEmail}
+        loginUrl={loginUrl}
+      />}
+    </div>
+  );
+}
+
+ContactInformationStep.propTypes = {
+  setContactInfoUrl: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'checkoutSteps',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    setContactInfoUrl: url(routeId: "checkoutSetContactInfo"),
+    cart {
+      customerEmail
+    }
+    user: customer(id: getContextValue("customerId", null)) {
+      email
+    }
+    loginUrl: url(routeId: "login")
+  }
+`

package/src/modules/customer/pages/frontStore/login/LoginForm.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Field } from '../../../../../lib/components/form/Field';
+import { Form } from '../../../../../lib/components/form/Form';
+import './LoginForm.scss';
+
+export default function LoginForm({ action, homeUrl, registerUrl }) {
+  const [error, setError] = React.useState(null);
+
+  return <div className='login-form flex justify-center items-center'>
+    <div className='login-form-inner'>
+      <h1 className='text-center'>Login</h1>
+      {error && <div className='text-critical mb-1'>{error}</div>}
+      <Form
+        id='loginForm'
+        action={action}
+        isJSON={true}
+        method='POST'
+        onSuccess={(response) => {
+          if (response.success) {
+            window.location.href = homeUrl;
+          } else {
+            setError(response.message);
+          }
+        }}
+        btnText='SIGN IN'
+      >
+        <Field
+          name='email'
+          type='text'
+          placeholder='Email'
+          validationRules={['notEmpty', 'email']}
+        />
+        <Field
+          name='password'
+          type='password'
+          placeholder='Password'
+          validationRules={['notEmpty']}
+        />
+      </Form>
+      <div className='text-center mt-1'>
+        <a className='text-interactive' href={registerUrl}>Create an account</a>
+      </div>
+    </div>
+  </div>
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    homeUrl: url(routeId: "homepage")
+    action: url(routeId: "auth")
+    registerUrl: url(routeId: "register")
+  }
+`

package/src/modules/customer/pages/frontStore/login/LoginForm.scss

@@ -0,0 +1,44 @@
+.content {
+  display: flex;
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
+}
+
+.login-form {
+  width: 468px;
+  max-width: 80%;
+  background-color: white;
+  border-radius: 5px;
+  padding: 4rem;
+  -webkit-box-shadow: 6px 12px 60px rgb(0 0 0 / 20%);
+  box-shadow: 6px 12px 60px rgb(0 0 0 / 20%);
+
+  h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  .form-submit-button {
+    button {
+      width: 100%;
+      padding: 1.2rem 1.6rem
+    }
+  }
+
+  .form-field-container {
+    label {
+      color: #666
+    }
+  }
+
+  input[type=text],
+  input[type=password] {
+    padding: 0.8rem 1.2rem
+  }
+  .login-form-inner {
+    width: 100%
+  }
+}

package/src/modules/customer/pages/frontStore/login/index.js

@@ -0,0 +1,17 @@
+const { buildUrl } = require("../../../../../lib/router/buildUrl");
+const { getContextValue, setContextValue } = require("../../../../graphql/services/contextHelper");
+
+module.exports = (request, response, stack, next) => {
+  // Check if the user is logged in
+  const tokenPayload = getContextValue(request, 'tokenPayload');
+  if (tokenPayload && tokenPayload.user?.customerId) {
+    // Redirect to admin dashboard
+    response.redirect(buildUrl('homepage'));
+  } else {
+    setContextValue(request, 'pageInfo', {
+      title: 'Login',
+      description: 'Login'
+    });
+    next();
+  }
+}

package/src/modules/customer/pages/frontStore/login/route

@@ -0,0 +1,2 @@
+GET
+/account/login