#151980450 Users should effectively be onboarded to the shop page

client/modules/router/main.js

@@ -182,6 +182,12 @@ Router.initPackageRoutes = () => {
  }
  });
 
+ shop.route("/help", {
+ name: "help", action() {
+ ReactionLayout({ template: "help" });
+ }
+ });
+
  shop.route("/wallet", {
  name: "wallet", action() {
  ReactionLayout({ template: "wallet" });

imports/plugins/core/checkout/client/templates/checkout/payment/methods/cards.js

@@ -81,6 +81,11 @@ Template.walletPayment.events({
  transactionType: "Debit"
  }, (err, res) => {
  if (res) {
+ if (res === 3) {
+ Alerts.toast("Insufficient balance", "error");
+ return false;
+ }
+
  const paymentMethod = {
  processor: "Wallet",
  storedCard: "",

imports/plugins/core/layout/client/index.js

@@ -24,3 +24,6 @@ import "./templates/theme/theme.js";
 // Wallet templates
 import "./templates/layout/wallet/wallet.html";
 import "./templates/layout/wallet/wallet.js";
+
+// Info templates
+import "./templates/layout/help/help.html";

imports/plugins/core/layout/client/templates/layout/help/help.html

@@ -0,0 +1,106 @@
+<template name="help">
+ <div class="container" id="help-tips">
+ <div class="row">
+ <div class="col-sm-12">
+ <h3>How To Shop</h3>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingOne">
+ <a role="button" data-toggle="collapse" data-parent="#accordion" href="#getting-started" aria-expanded="true" aria-controls="collapseOne">
+ <h4 class="panel-title">Getting Started</h4>
+ </a>
+ </div>
+ <div id="getting-started" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+ <div class="panel-body">
+ <p>This shop is very easy to use. To get started using our shop please click on the links below.</p>
+ </div>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingTwo">
+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#product-purchase" aria-expanded="false"
+ aria-controls="collapseTwo">
+ <h4 class="panel-title">Purchasing Products</h4>
+ </a> 
+ </div>
+ <div id="product-purchase" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
+ <div class="panel-body">
+ <p>Users can purchase varieties of products which is available on our platform by just clicking on the product</p>
+ <p>Registered users can also modify their profile to suite their preference</p>
+ </div>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingThree">
+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#search" aria-expanded="false"
+ aria-controls="collapseThree">
+ <h4 class="panel-title">Searching for products</h4>
+ </a>
+ </div>
+ <div id="search" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
+ <div class="panel-body">
+ <p>
+ Find what you’re looking for with our search tool. To start searching, click on the
+ magnifying glass icon <i class="fa fa-search"></i> located at the top of the page.
+ </p>
+ <p>
+ You can search for virtually any product on the shop.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingFour">
+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#cart" aria-expanded="false" aria-controls="collapseFour">
+ <h4 class="panel-title">Cart</h4>
+ </a>
+ </div>
+ <div id="cart" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
+ <div class="panel-body">
+ <p>Users can also add products to cart and view products already added to their cart , the cart icon <i class="fa fa-shopping-cart"></i> can be found on the navigation
+ bar</p>
+ </div>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingFive">
+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#delivery-method" aria-expanded="false"
+ aria-controls="collapseFour">
+ <h4 class="panel-title">Choosing Delivery Method</h4>
+ </a>
+ </div>
+ <div id="delivery-method" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
+ <div class="panel-body">
+ <p>Sign in or create an account if you do not have one.</p>
+ <p>If you are a new customer, fill out the delivery address form</p>
+ <p>If you are an existing customer, choose an existing address or fill out a new form if you want to deliver to a new address</p>
+ <p>Select a delivery or shipping method from the options available</p>
+ </div>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingSix">
+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#payment" aria-expanded="false"
+ aria-controls="collapseFour">
+ <h4 class="panel-title">Choose Payment Method</h4>
+ </a>
+ </div>
+ <div id="payment" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
+ <div class="panel-body">
+ <p>Users can make payment for products with any of our different method of payment</p>
+ <p>Select the payment method you would like to use</p>
+ <p>Fill in the required details</p>
+ <p>Then click confirm to complete your order</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+</template>

imports/plugins/core/layout/client/templates/layout/wallet/wallet.js

@@ -90,6 +90,8 @@ function confirmTransfer(transaction, recipient) {
  (err, res) => {
  if (res === 2) {
  Alerts.toast(`No user with email ${recipient}`, "error");
+ } else if (res === 3) {
+ Alerts.toast("Insufficient balance", "error");
  } else if (res === 1) {
  document.getElementById("recipient").value = "";
  document.getElementById("transferAmount").value = "";

imports/plugins/core/ui-navbar/client/components/helplink/helplink.html

@@ -0,0 +1,5 @@
+<template name="helplink">
+ <a role="help-item" class="help-item">
+ <i class="fa fa-info-circle"></i>&nbsp;Help
+ </a>
+</template>

imports/plugins/core/ui-navbar/client/components/helplink/helplink.js

@@ -0,0 +1,13 @@
+import { Template } from "meteor/templating";
+
+/**
+ * i18nChooser events
+ */
+
+Template.helplink.events({
+ "click .help-item": function (event) {
+ event.preventDefault();
+ FlowRouter.go("/help");
+ }
+});
+

imports/plugins/core/ui-navbar/client/components/navbar/navbar.html

@@ -8,6 +8,7 @@
  </div>
 
  <div class="search">{{> React IconButtonComponent}}</div>
+ <div class="helplink">{{> helplink}}</div>
  <div class="languages hidden-xs">{{> i18nChooser}}</div>
  <div class="accounts">{{> accounts tpl="loginDropdown"}}</div>
  <div class="cart">{{> cartIcon}}</div>

imports/plugins/core/ui-navbar/client/index.js

@@ -4,5 +4,8 @@ import "./components/brand/brand.js";
 import "./components/i18n/i18n.html";
 import "./components/i18n/i18n.js";
 
+import "./components/helplink/helplink.html";
+import "./components/helplink/helplink.js";
+
 import "./components/navbar/navbar.html";
 import "./components/navbar/navbar.js";

imports/plugins/custom/theoden-rc/client/styles/main.less

@@ -117,6 +117,50 @@ h1{
  position: fixed;
 }
 
+#help-tips h3 {
+ font-family: @font-family-patua-one;
+}
+
+#help-tips .panel-heading {
+ background-color: @background-purple;
+ &:hover{
+ background-color: #d9acd3;
+ }
+}
+
+#help-tips a > h4 {
+ font-family: @font-family-patua-one;
+ color: @white;
+}
+
+.helplink {
+ display: -webkit-flex;
+ display: -moz-flex;
+ display: -ms-flexbox;
+ display: -ms-flex;
+ display: flex;
+ -webkit-align-items: center;
+ -moz-align-items: center;
+ -ms-align-items: center;
+ align-items: center;
+ -webkit-flex: 0 0 auto;
+ -moz-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ height: 55px;
+ padding: 0px 14px;
+ cursor: pointer; 
+ &:hover {
+ background-color: #666666;
+ }
+}
+
+.helplink a {
+ color: @white;
+ display: flex;
+ align-items: center;
+}
+
 /**
  * Wallet
  */
@@ -140,10 +184,6 @@ body{
  color: #000000;
 }
 
-
-
-
-
 /**
  * Button
  * */
@@ -253,3 +293,4 @@ body{
  background-color: @background-purple;
 
 }
+

private/data/Shops.json

@@ -3082,7 +3082,8 @@
  "tag",
  "index",
  "cart/checkout",
- "cart/completed"
+ "cart/completed",
+ "help"
  ],
  "defaultRoles": [
  "account/profile",
@@ -3092,7 +3093,8 @@
  "index",
  "cart/checkout",
  "cart/completed",
- "wallet"
+ "wallet",
+ "help"
  ]
 }, {
  "_id": "ddzuN2YPvgvx7rJS5",

server/methods/core/wallet.js

@@ -12,9 +12,13 @@ Meteor.methods({
  balanceOptions = { balance: amount };
  }
  if (transactionType === "Debit") {
+ const sender = Accounts.findOne(userId);
+ wallet = Wallets.findOne({ userId });
+ if (!wallet || (wallet && (wallet.balance < amount))) {
+ return 3;
+ }
  if (transactions.to) {
  const recipient = Accounts.findOne({ "emails.0.address": transactions.to });
- const sender = Accounts.findOne(userId);
  if (!recipient) {
  return 2;
  }

server/startup/accounts.js

@@ -80,8 +80,8 @@ export default function () {
  Accounts.onCreateUser((options, user) => {
  const shop = Reaction.getCurrentShop();
  const shopId = shop._id;
- const defaultVisitorRole = ["anonymous", "guest", "product", "tag", "index", "cart/checkout", "cart/completed"];
- const defaultRoles = ["guest", "account/profile", "product", "tag", "index", "cart/checkout", "cart/completed", "wallet"];
+ const defaultVisitorRole = ["anonymous", "guest", "product", "tag", "index", "cart/checkout", "cart/completed", "help"];
+ const defaultRoles = ["guest", "account/profile", "product", "tag", "index", "cart/checkout", "cart/completed", "wallet", "help"];
  const roles = {};
  const additionals = {
  profile: Object.assign({}, options && options.profile)