Merge pull request evershopcommerce#545 from evershopcommerce/dev

Adding age gate extension source code for tutorial

packages/agegate/api/verifyAge/[bodyParser]verifyAge.js

@@ -0,0 +1,41 @@
+const {
+ OK,
+ INTERNAL_SERVER_ERROR
+} = require('@evershop/evershop/src/lib/util/httpStatus');
+const { getSetting } = require('@evershop/evershop/src/modules/setting/services/setting');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = async (request, response, delegate, next) => {
+ const { age } = request.body;
+ try {
+ response.status(OK);
+ const minAge = await getSetting('minAge');
+ if (age && age >= minAge) {
+ // Set the age verified cookie
+ response.cookie('age-verified', 1, {
+ maxAge: 1000 * 60 * 60 * 24 * 10
+ });
+ response.json({
+ data: {
+ age,
+ passed: true
+ }
+ });
+ } else {
+ response.json({
+ data: {
+ age,
+ passed: false
+ }
+ });
+ }
+ } catch (e) {
+ response.status(INTERNAL_SERVER_ERROR);
+ response.json({
+ error: {
+ status: INTERNAL_SERVER_ERROR,
+ message: e.message
+ }
+ });
+ }
+};

packages/agegate/api/verifyAge/[context]bodyParser[auth].js

@@ -0,0 +1,5 @@
+const bodyParser = require('body-parser');
+
+module.exports = (request, response, delegate, next) => {
+ bodyParser.json({ inflate: false })(request, response, next);
+};

packages/agegate/api/verifyAge/payloadSchema.json

@@ -0,0 +1,11 @@
+{
+ "type": "object",
+ "properties": {
+ "age": {
+ "type": ["integer", "string"],
+ "pattern": "^[0-9]+$"
+ }
+ },
+ "required": ["age"],
+ "additionalProperties": true
+}

packages/agegate/api/verifyAge/route.json

@@ -0,0 +1,5 @@
+{
+ "methods": ["POST"],
+ "path": "/age-verify",
+ "access": "public"
+}

packages/agegate/graphql/types/AgeSetting/AgeSetting.graphql

@@ -0,0 +1,3 @@
+extend type Setting {
+ minAge: Int!
+}

packages/agegate/graphql/types/AgeSetting/AgeSetting.resolvers.js

@@ -0,0 +1,12 @@
+module.exports = {
+ Setting: {
+ minAge: (setting) => {
+ const minAge = setting.find((s) => s.name === 'minAge');
+ if (minAge) {
+ return minAge.value;
+ } else {
+ return 18;
+ }
+ }
+ }
+};

packages/agegate/pages/admin/ageSetting/AgeSetting.jsx

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { toast } from 'react-toastify';
+import Area from '@components/common/Area';
+import { Form } from '@components/common/form/Form';
+import SettingMenu from '@components/admin/setting/SettingMenu';
+import { Field } from '@components/common/form/Field';
+import { Card } from '@components/admin/cms/Card';
+
+export default function AgeSetting({ saveSettingApi, setting: { minAge } }) {
+ return (
+ <div className="main-content-inner">
+ <div className="grid grid-cols-6 gap-x-2 grid-flow-row ">
+ <div className="col-span-2">
+ <SettingMenu />
+ </div>
+ <div className="col-span-4">
+ <Form
+ id="ageSettingForm"
+ method="POST"
+ action={saveSettingApi}
+ onSuccess={(response) => {
+ if (!response.error) {
+ toast.success('Setting saved');
+ } else {
+ toast.error(response.error.message);
+ }
+ }}
+ >
+ <Card title="Age Setting">
+ <Card.Session>
+ <Area
+ id="ageSetting"
+ className="grid gap-2"
+ coreComponents={[
+ {
+ component: {
+ default: Field
+ },
+ props: {
+ name: 'minAge',
+ placeHolder: 'Minimum Age',
+ label: 'Minimum Age',
+ type: 'text',
+ value: minAge,
+ validationRules: ['notEmpty']
+ }
+ }
+ ]}
+ />
+ </Card.Session>
+ </Card>
+ </Form>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+AgeSetting.propTypes = {
+ saveSettingApi: PropTypes.string.isRequired,
+ setting: PropTypes.shape({
+ minAge: PropTypes.number.isRequired
+ }).isRequired
+};
+
+export const layout = {
+ areaId: 'content',
+ sortOrder: 10
+};
+
+export const query = `
+ query Query {
+ saveSettingApi: url(routeId: "saveSetting"),
+ setting {
+ minAge
+ }
+ }
+`;

packages/agegate/pages/admin/ageSetting/index.js

@@ -0,0 +1,8 @@
+const { setContextValue } = require("@evershop/evershop/src/modules/graphql/services/contextHelper");
+
+module.exports = (request) => {
+ setContextValue(request, 'pageInfo', {
+ title: 'Age Setting',
+ description: 'Age Setting'
+ });
+};

packages/agegate/pages/admin/ageSetting/route.json

@@ -0,0 +1,4 @@
+{
+ "methods": ["GET"],
+ "path": "/setting/agegate"
+}

packages/agegate/pages/admin/all/AgeSettingMenu.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Card } from '@components/admin/cms/Card';
+
+export default function AgeSettingMenu({ ageSettingUrl }) {
+ return (
+ <Card.Session title={<a href={ageSettingUrl}>Age Setting</a>}>
+ <div>Configure the minimum age to access the site</div>
+ </Card.Session>
+ );
+}
+
+AgeSettingMenu.propTypes = {
+ ageSettingUrl: PropTypes.string.isRequired
+};
+
+export const layout = {
+ areaId: 'settingPageMenu',
+ sortOrder: 50
+};
+
+export const query = `
+ query Query {
+ ageSettingUrl: url(routeId: "ageSetting")
+ }
+`;

packages/agegate/pages/frontStore/ageGate/AgeForm.jsx

@@ -0,0 +1,74 @@
+import { Field } from '@components/common/form/Field';
+import { Form } from '@components/common/form/Form';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { toast } from 'react-toastify';
+
+function AgeForm({ action, homeUrl, failurePageUrl, setting: { minAge } }) {
+ return (
+ <div className="page-width p-2">
+ <Form
+ id="ageForm"
+ action={action}
+ method="POST"
+ onSuccess={(response) => {
+ if (!response.error) {
+ if (response.data.passed) {
+ window.location.href = homeUrl;
+ } else {
+ // Redirect to age verification failure page
+ window.location.href = failurePageUrl;
+ }
+ } else {
+ toast.error('Something wront. Please try again later');
+ }
+ }}
+ btnText="Submit"
+ >
+ <div className="text-center">
+ <h3>Age Verification</h3>
+ <p>
+ We only allow users who are {minAge} years and above. Please enter
+ your age to proceed.
+ </p>
+ </div>
+ <br />
+ <div className="form-group">
+ <Field
+ type="text"
+ name="age"
+ value={1}
+ validationRules={['notEmpty']}
+ />
+ </div>
+ </Form>
+ </div>
+ );
+}
+
+AgeForm.propTypes = {
+ action: PropTypes.string.isRequired,
+ homeUrl: PropTypes.string.isRequired,
+ failurePageUrl: PropTypes.string.isRequired,
+ setting: PropTypes.shape({
+ minAge: PropTypes.number.isRequired
+ }).isRequired
+};
+
+export const layout = {
+ areaId: 'content',
+ sortOrder: 1
+};
+
+export const query = `
+ query Query {
+ action: url(routeId: "verifyAge"),
+ homeUrl: url(routeId: "homepage"),
+ failurePageUrl: url(routeId: "ageVerifyFailure"),
+ setting {
+ minAge
+ }
+ }
+`;
+
+export default AgeForm;

packages/agegate/pages/frontStore/ageGate/index.js

@@ -0,0 +1,8 @@
+const { setContextValue } = require("@evershop/evershop/src/modules/graphql/services/contextHelper");
+
+module.exports = (request) => {
+ setContextValue(request, 'pageInfo', {
+ title: 'Age Gate',
+ description: 'Age Gate'
+ })
+};

packages/agegate/pages/frontStore/ageGate/route.json

@@ -0,0 +1,4 @@
+{
+ "methods": ["GET"],
+ "path": "/age-gate"
+}

packages/agegate/pages/frontStore/ageVerifyFailure/Index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function Index() {
+ return (
+ <div className='page-width p-2'>
+ <div className='text-center p-2'>
+ <h3>Sorry!</h3>
+ <p>
+ You are not old enough to view this site. Sorry!!!
+ </p>
+ </div>
+ </div>
+ );
+}
+
+export const layout = {
+ areaId: 'content',
+ sortOrder: 1
+}
+
+export default Index;

packages/agegate/pages/frontStore/ageVerifyFailure/index.js

@@ -0,0 +1,8 @@
+const { setContextValue } = require("@evershop/evershop/src/modules/graphql/services/contextHelper");
+
+module.exports = (request) => {
+ setContextValue(request, 'pageInfo', {
+ title: 'Age verification failed',
+ description: 'Age verification failed'
+ });
+};

packages/agegate/pages/frontStore/ageVerifyFailure/route.json

@@ -0,0 +1,4 @@
+{
+ "methods": ["GET"],
+ "path": "/age-verify-failed"
+}

packages/agegate/pages/frontStore/all/checkAge.js

@@ -0,0 +1,20 @@
+const { buildUrl } = require('@evershop/evershop/src/lib/router/buildUrl');
+
+module.exports = async (request, response, delegate, next) => {
+ // Get the age verify cookie
+ const ageVerifyCookie = request.cookies['age-verified'];
+ if (!ageVerifyCookie || parseInt(ageVerifyCookie, 10) !== 1) {
+ // Get the current route
+ const { currentRoute } = request;
+ if (
+ currentRoute.id === 'ageGate' ||
+ currentRoute.id === 'ageVerifyFailure'
+ ) {
+ return next();
+ } else {
+ return response.redirect(buildUrl('ageGate'));
+ }
+ } else {
+ return next();
+ }
+};