@evershop/evershop 1.0.0-beta

package/src/modules/setting/api/admin/saveSetting/route

@@ -0,0 +1,2 @@
+POST
+/settings

package/src/modules/setting/api/admin/saveSetting/saveSetting.js

@@ -0,0 +1,46 @@
+const { insertOnUpdate } = require('@evershop/mysql-query-builder');
+const { pool, getConnection } = require('../../../../../lib/mysql/connection');
+const { refreshSetting } = require('../../../services/setting');
+
+module.exports = async (request, response, stack, next) => {
+  const { body } = request;
+  const connection = await getConnection();
+  try {
+    // Loop through the body and insert the data
+    for (const key in body) {
+      if (Object.prototype.hasOwnProperty.call(body, key)) {
+        const value = body[key];
+        // Check if the value is a object or array
+        if (typeof value === 'object') {
+          await insertOnUpdate('setting')
+            .given({
+              name: key,
+              value: JSON.stringify(value),
+              is_json: 1
+            })
+            .execute(pool)
+        } else {
+          await insertOnUpdate('setting')
+            .given({
+              name: key,
+              value: value,
+              is_json: 0
+            })
+            .execute(pool)
+        }
+      }
+    }
+    await connection.commit();
+    // Refresh the setting
+    await refreshSetting();
+    response.json({
+      success: true
+    });
+  } catch (error) {
+    await connection.rollback();
+    response.json({
+      success: false,
+      message: error.message
+    });
+  }
+};

package/src/modules/setting/components/SettingMenu.js

@@ -0,0 +1,16 @@
+import React from "react";
+import Area from "../../../lib/components/Area";
+import { Card } from "../../cms/components/admin/Card";
+import './SettingMenu.scss';
+
+export default function SettingMenu() {
+  return <div className="setting-page-menu">
+    <Card>
+      <Area
+        id='settingPageMenu'
+        noOuter={true}
+        coreComponents={[]}
+      />
+    </Card>
+  </div>
+}

package/src/modules/setting/components/SettingMenu.scss

@@ -0,0 +1,8 @@
+.setting-page-menu {
+  .card-section-header {
+    a:hover {
+      color: var(--interactive);
+      text-decoration: underline;
+    }
+  }
+}

package/src/modules/setting/graphql/types/Setting/Setting.graphql

@@ -0,0 +1,7 @@
+type Setting {
+  storeName: String
+}
+
+extend type Query {
+  setting: Setting
+}

package/src/modules/setting/graphql/types/Setting/Setting.resolvers.js

@@ -0,0 +1,22 @@
+const { select } = require("@evershop/mysql-query-builder")
+
+module.exports = {
+  Query: {
+    setting: async (root, { _ }, { pool }) => {
+      const setting = await select()
+        .from('setting')
+        .execute(pool);
+      return setting;
+    }
+  },
+  Setting: {
+    storeName: (setting, { _ }, { pool }) => {
+      const storeName = setting.find(s => s.name === 'storeName');
+      if (storeName) {
+        return storeName.value;
+      } else {
+        return 'EverShop Store';
+      }
+    }
+  }
+}

package/src/modules/setting/graphql/types/ShippingSetting/ShippingSetting.graphql

@@ -0,0 +1,4 @@
+extend type Setting {
+  allowCountries: [String]
+  weightUnit: String
+}

package/src/modules/setting/graphql/types/ShippingSetting/ShippingSetting.resolvers.js

@@ -0,0 +1,20 @@
+module.exports = {
+  Setting: {
+    allowCountries: (setting, { _ }, { pool }) => {
+      const allowCountries = setting.find(s => s.name === 'allowCountries');
+      if (allowCountries && allowCountries.value) {
+        return JSON.parse(allowCountries.value);
+      } else {
+        return [];
+      }
+    },
+    weightUnit: (setting, { _ }, { pool }) => {
+      const weightUnit = setting.find(s => s.name === 'weightUnit');
+      if (weightUnit) {
+        return weightUnit.value;
+      } else {
+        return 'kg';
+      }
+    }
+  }
+}

package/src/modules/setting/graphql/types/StoreSetting/StoreSetting.graphql

@@ -0,0 +1,14 @@
+extend type Setting {
+  storeName: String
+  storeDescription: String
+  storeLanguage: String
+  storeCurrency: String
+  storeTimeZone: String
+  storePhoneNumber: String
+  storeEmail: String
+  storeCountry: String
+  storeAddress: String
+  storeCity: String
+  storeProvince: String
+  storePostalCode: String
+}

package/src/modules/setting/graphql/types/StoreSetting/StoreSetting.resolvers.js

@@ -0,0 +1,100 @@
+module.exports = {
+  Setting: {
+    storeName: (setting, { _ }, { pool }) => {
+      const storeName = setting.find(s => s.name === 'storeName');
+      if (storeName) {
+        return storeName.value;
+      } else {
+        return 'An Amazing EverShop Store';
+      }
+    },
+    storeDescription: (setting, { _ }, { pool }) => {
+      const storeDescription = setting.find(s => s.name === 'storeDescription');
+      if (storeDescription) {
+        return storeDescription.value;
+      } else {
+        return 'An Amazing EverShop Store';
+      }
+    },
+    storeLanguage: (setting, { _ }, { tokenPayload }) => {
+      const storeLanguage = setting.find(s => s.name === 'storeLanguage');
+      if (storeLanguage) {
+        return storeLanguage.value;
+      } else {
+        return 'en';
+      }
+    },
+    storeCurrency: (setting, { _ }, { tokenPayload }) => {
+      const storeCurrency = setting.find(s => s.name === 'storeCurrency');
+      if (storeCurrency) {
+        return storeCurrency.value;
+      } else {
+        return 'USD';
+      }
+    },
+    storeTimeZone: (setting, { _ }, { tokenPayload }) => {
+      const storeTimeZone = setting.find(s => s.name === 'storeTimeZone');
+      if (storeTimeZone) {
+        return storeTimeZone.value;
+      } else {
+        return 'America/New_York';
+      }
+    },
+    storePhoneNumber: (setting, { _ }, { tokenPayload }) => {
+      const storePhoneNumber = setting.find(s => s.name === 'storePhoneNumber');
+      if (storePhoneNumber) {
+        return storePhoneNumber.value;
+      } else {
+        return null;
+      }
+    },
+    storeEmail: (setting, { _ }, { tokenPayload }) => {
+      const storeEmail = setting.find(s => s.name === 'storeEmail');
+      if (storeEmail) {
+        return storeEmail.value;
+      } else {
+        return null;
+      }
+    },
+    storeCountry: (setting, { _ }, { tokenPayload }) => {
+      const storeCountry = setting.find(s => s.name === 'storeCountry');
+      if (storeCountry) {
+        return storeCountry.value;
+      } else {
+        return 'US';
+      }
+    },
+    storeAddress: (setting, { _ }, { tokenPayload }) => {
+      const storeAddress = setting.find(s => s.name === 'storeAddress');
+      if (storeAddress) {
+        return storeAddress.value;
+      } else {
+        return null;
+      }
+    },
+    storeCity: (setting, { _ }, { tokenPayload }) => {
+      const storeCity = setting.find(s => s.name === 'storeCity');
+      if (storeCity) {
+        return storeCity.value;
+      } else {
+        return null;
+      }
+    },
+    storeProvince: (setting, { _ }, { tokenPayload }) => {
+      const storeProvince = setting.find(s => s.name === 'storeProvince');
+      if (storeProvince) {
+        return storeProvince.value;
+      } else {
+        return null;
+      }
+    },
+    storePostalCode: (setting, { _ }, { tokenPayload }) => {
+      const storePostalCode = setting.find(s => s.name === 'storePostalCode');
+      if (storePostalCode) {
+        return storePostalCode.value;
+      } else {
+        return null;
+      }
+    }
+  }
+}

package/src/modules/setting/migration/Version-1.0.0.js

@@ -0,0 +1,16 @@
+const { execute } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = async () => {
+  await execute(pool, `DROP TABLE IF EXISTS \`setting\``);
+  await execute(pool, `CREATE TABLE \`setting\` (
+  \`setting_id\` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  \`name\` varchar(255) NOT NULL,
+  \`value\` text DEFAULT NULL,
+  \`is_json\` smallint(6) NOT NULL DEFAULT '0',
+  PRIMARY KEY (\`setting_id\`),
+  UNIQUE KEY \`UNIQUE_SETTING_NAME\` (\`name\`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Setting';
+`);
+};

package/src/modules/setting/pages/admin/all/PaymentSettingMenu.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Card } from "../../../../cms/components/admin/Card";
+
+export default function PaymentSettingMenu({ paymentSettingUrl }) {
+  return <Card.Session title={<a href={paymentSettingUrl}>Payment Setting</a>} >
+    <div>Configure the available payment methods</div>
+  </Card.Session>
+}
+
+export const layout = {
+  areaId: 'settingPageMenu',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    paymentSettingUrl: url(routeId: "paymentSetting")
+  }
+`

package/src/modules/setting/pages/admin/all/SettingMenuGroup.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import CogIcon from '@heroicons/react/solid/esm/CogIcon';
+import NavigationItemGroup from '../../../../cms/components/admin/NavigationItemGroup';
+
+export default function CmsMenuGroup({ storeSetting }) {
+  return <NavigationItemGroup
+    id="settingMenuGroup"
+    name="Setting"
+    Icon={() => <CogIcon width={15} height={15} />}
+    url={storeSetting}
+  />
+}
+
+export const layout = {
+  areaId: 'adminMenu',
+  sortOrder: 500
+}
+
+export const query = `
+  query Query {
+    storeSetting: url(routeId:"storeSetting")
+  }
+`

package/src/modules/setting/pages/admin/all/ShippingSettingMenu.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Card } from "../../../../cms/components/admin/Card";
+
+export default function ShippingSettingMenu({ shippingSettingUrl }) {
+  return <Card.Session title={<a href={shippingSettingUrl}>Shipping Setting</a>} >
+    <div>Where you ship, shipping methods and delivery fee</div>
+  </Card.Session>
+}
+
+export const layout = {
+  areaId: 'settingPageMenu',
+  sortOrder: 15
+}
+
+export const query = `
+  query Query {
+    shippingSettingUrl: url(routeId: "shippingSetting")
+  }
+`

package/src/modules/setting/pages/admin/all/StoreSettingMenu.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Card } from "../../../../cms/components/admin/Card";
+
+export default function StoreSettingMenu({ storeSettingUrl }) {
+  return <Card.Session title={<a href={storeSettingUrl}>Store Setting</a>} >
+    <div>Configure your store information</div>
+  </Card.Session>
+}
+
+export const layout = {
+  areaId: 'settingPageMenu',
+  sortOrder: 5
+}
+
+export const query = `
+  query Query {
+    storeSettingUrl: url(routeId: "storeSetting")
+  }
+`

package/src/modules/setting/pages/admin/paymentSetting/PaymentSetting.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import { Form } from '../../../../../lib/components/form/Form';
+import SettingMenu from '../../../components/SettingMenu';
+import { toast } from 'react-toastify';
+
+export default function PaymentSetting({ saveSettingApi }) {
+  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='paymentSettingForm'
+          method="POST"
+          action={saveSettingApi}
+          onSuccess={(response) => {
+            if (response?.success === true) {
+              toast.success('Setting saved');
+            }
+          }}
+        >
+          <Area
+            id="paymentSetting"
+            noOuter={true}
+          />
+        </Form>
+      </div>
+    </div>
+  </div>;
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    saveSettingApi: url(routeId: "saveSetting")
+  }
+`

package/src/modules/setting/pages/admin/paymentSetting/index.js

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

package/src/modules/setting/pages/admin/paymentSetting/route

@@ -0,0 +1,2 @@
+GET
+/setting/payments

package/src/modules/setting/pages/admin/shippingSetting/ShippingSetting.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Field } from '../../../../../lib/components/form/Field';
+import { Form } from '../../../../../lib/components/form/Form';
+import { Card } from '../../../../cms/components/admin/Card';
+import SettingMenu from '../../../components/SettingMenu';
+import { useQuery } from 'urql';
+import { toast } from 'react-toastify';
+import Select from 'react-select';
+
+const CountriesQuery = `
+  query Country($countries: [String]) {
+    countries (countries: $countries) {
+      value: code
+      label: name
+    }
+  }
+`;
+
+export function AllowCountries({
+  selectedCountries = ''
+}) {
+  const [result, reexecuteQuery] = useQuery({
+    query: CountriesQuery,
+  });
+  const { data, fetching, error } = result;
+
+  if (fetching) return <p>Loading...</p>;
+  if (error) return <p>Oh no... {error.message}</p>;
+
+  return (
+    <div>
+      <div style={{ marginBottom: '0.3rem' }}>Allow Countries</div>
+      <Select
+        name='allowCountries'
+        options={data.countries}
+        hideSelectedOptions={true}
+        isMulti={true}
+        defaultValue={selectedCountries.map(c => { return { value: c, label: (data.countries.find(ctr => ctr.value === c))?.label } })}
+      />
+    </div>
+  );
+}
+
+export default function StoreSetting({ saveSettingApi, setting: { allowCountries, weightUnit } }) {
+  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
+          method="POST"
+          id='shippingSettingForm'
+          action={saveSettingApi}
+          onSuccess={(response) => {
+            if (response?.success === true) {
+              toast.success('Setting saved');
+            }
+          }}
+        >
+          <Card
+          >
+            <Card.Session title={"Shipping Details"}>
+              <div>
+                <AllowCountries
+                  selectedCountries={allowCountries}
+                />
+                <Field
+                  name="weightUnit"
+                  label="Weight Unit"
+                  placeholder="Weight Unit"
+                  type="select"
+                  value={weightUnit}
+                  options={[
+                    { value: 'kg', text: 'kg' },
+                    { value: 'lb', text: 'lb' }
+                  ]}
+                />
+              </div>
+            </Card.Session>
+          </Card>
+        </Form>
+      </div>
+    </div>
+  </div>;
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    saveSettingApi: url(routeId: "saveSetting")
+    setting {
+      allowCountries
+      weightUnit
+    }
+  }
+`

package/src/modules/setting/pages/admin/shippingSetting/index.js

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

package/src/modules/setting/pages/admin/shippingSetting/route

@@ -0,0 +1,2 @@
+GET
+/setting/shipping