Merge pull request #918 from singnet/update-packages

Fixed service payment page

README.md

@@ -33,8 +33,10 @@ npm run start
 ```
 ## UI for Services
 
-Currently the UI needed by a service to capture inputs and render the output must be provided by the service developer as a PR. It must be provided in the form of a React component. 
-This approach will change in the future as we support a generic mechanism to declaratively describe a service's API. See [this](https://github.com/singnet/custom-ui-research) for more details
+Currently the UI needed by a service to capture inputs and render the output must be provided by the service developer through [Publisher](https://publisher.singularitynet.io/). To create a Snet-dapp style user interface, a developer can use the [next repository](https://github.com/singnet/snet-dapp-components).
+
+
+This approach will change in the future. Work on it is in progress
 
 ## Sandbox mode for Services
 

package.json

@@ -28,7 +28,7 @@
     "material-ui": "^1.0.0-beta.47",
     "material-ui-flat-pagination": "^3.2.0",
     "material-ui-rating": "^3.1.1",
-    "moment": "^2.29.1",
+    "moment": "^2.30.1",
     "notistack": "^0.8.9",
     "papaparse": "^5.3.0",
     "path": "^0.12.7",

src/App.js

@@ -16,7 +16,6 @@ import { userActions } from "./Redux/actionCreators";
 import PrivateRoute from "./components/common/PrivateRoute";
 import AppLoader from "./components/common/AppLoader";
 import { CircularProgress } from "@material-ui/core";
-// import NetworkChangeOverlay from "./components/common/NetworkChangeOverlay";
 import initHotjar from "./assets/externalScripts/hotjar";
 import initGDPRNotification from "./assets/externalScripts/gdpr";
 import PaymentCancelled from "./components/ServiceDetails/PaymentCancelled";
@@ -149,7 +148,6 @@ class App extends Component {
           </Router>
         </div>
         <AppLoader />
-        {/* <NetworkChangeOverlay /> */}
       </ThemeProvider>
     );
   }

src/components/AiMarketplace/index.js

@@ -1,9 +1,7 @@
-import React from "react";
-import { withStyles } from "@material-ui/styles";
+import React, { Fragment } from "react";
 import { connect } from "react-redux";
 
 import MainSection from "./MainSection";
-import { useStyles } from "./styles";
 import SeoMetadata from "../common/SeoMetadata";
 import ServiceListingHeader from "./ServiceListingHeader";
 import PromoComponent from "../PromoComponent";
@@ -17,9 +15,9 @@ const seoData = {
   url: `${process.env.REACT_APP_BASE_URL}`,
 };
 
-const AiMarketplace = ({ classes, isLoggedIn }) => {
+const AiMarketplace = ({ isLoggedIn }) => {
   return (
-    <React.Fragment>
+    <Fragment>
       <ServiceListingHeader />
       <SeoMetadata
         title={seoData.title}
@@ -30,12 +28,12 @@ const AiMarketplace = ({ classes, isLoggedIn }) => {
       />
       <MainSection />
       <PromoComponent />
-    </React.Fragment>
+    </Fragment>
   );
 };
 
 const mapStateToProps = (state) => ({
   isLoggedIn: state.userReducer.login.isLoggedIn,
 });
 
-export default connect(mapStateToProps)(withStyles(useStyles)(AiMarketplace));
+export default connect(mapStateToProps)(AiMarketplace);

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/CallPriceInput.js

@@ -1,16 +1,19 @@
 import React from "react";
 
 const CallPriceInput = ({ classes, disabled, inputProps }) => {
-  if (inputProps) {
-    return (
-      <div>
-        <input type="text" disabled={disabled} value={inputProps.noOfServiceCalls} onChange={inputProps.onChange} />
-        <span className={classes.value}>{inputProps.totalPrice}</span>
-        <span className={classes.unit}>{inputProps.unit}</span>
-      </div>
-    );
+  if (!inputProps) {
+    return null;
   }
-  return null;
+
+  return (
+    <div>
+      {!inputProps?.noInput && (
+        <input type="text" disabled={disabled} value={inputProps.noOfServiceCalls} onChange={inputProps.onChange} />
+      )}
+      <span className={classes.value}>{Number(inputProps.totalPrice)}</span>
+      <span className={classes.unit}>{inputProps.unit}</span>
+    </div>
+  );
 };
 
 export default CallPriceInput;

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/index.js

@@ -45,7 +45,7 @@ const ChannelSelectionBox = ({
         lg={8}
         className={`${classes.selectionBoxDescription} ${disabled && classes.disabledSelectionBoxDescription}`}
       >
-        <p>{description}.</p>
+        <p>{description}</p>
       </Grid>
     </Grid>
   );

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ChannelSelectionBox/styles.js

@@ -26,21 +26,25 @@ export const useStyles = (theme) => ({
     backgroundColor: theme.palette.text.cardBackground,
   },
   LeftSideSection: {
-    padding: "14px 8px 14px 28px",
+    padding: "14px 0",
     display: "flex",
     alignItems: "center",
-    "@media(max-width:1023px)": { padding: "14px 0" },
     "@media(max-width:480px)": { maxWidth: "100%" },
   },
   RadioButtonContainer: {
     "&.Mui-checked": { color: theme.palette.text.primary },
   },
   InputDataContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 7,
+
     "& h2": {
-      marginBottom: 8,
       color: theme.palette.text.darkShadedGray,
       fontSize: 22,
       lineHeight: "30px",
+      padding: 0,
+      margin: 0,
       "@media(max-width:1023px)": {
         fontSize: 16,
         lineHeight: "20px",
@@ -53,13 +57,12 @@ export const useStyles = (theme) => ({
       borderStyle: "solid",
       borderColor: theme.palette.text.inputBoxBorder,
       borderRadius: 4,
-      marginRight: 30,
+      marginRight: 10,
       backgroundColor: theme.palette.text.whiteColor,
       color: theme.palette.text.mediumShadeGray,
       fontSize: 16,
       textAlign: "center",
       "&:disabled": { backgroundColor: theme.palette.text.cardBackground, borderColor: "#eee" },
-      "@media(max-width:1023px)": { marginRight: 10 },
     },
     "& span": {
       color: theme.palette.text.lightShadedGray,

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/MetamaskFlow/index.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import Tooltip from "@material-ui/core/Tooltip";
-import Typography from "@material-ui/core/Typography";
 import { withStyles } from "@material-ui/styles";
 import { WebServiceClient as ServiceClient } from "snet-sdk-web";
 
@@ -31,6 +30,7 @@ const connectMMinfo = {
 Click below to install and learn more about how to use Metamask and your AGIX credits with SinguarlityNet AI Marketplace.`,
 };
 
+const MIN_CALLS_NUMBER = 1;
 class MetamaskFlow extends Component {
   state = {
     MMconnected: false,
@@ -154,8 +154,19 @@ class MetamaskFlow extends Component {
     this.setState({ showPurchaseDialog: false });
   };
 
+  isValidCallsNumber = (numberOfCalls) => {
+    const isMoreOrEqualThanMinimum = numberOfCalls >= MIN_CALLS_NUMBER;
+    const isInteger = numberOfCalls % 1 === 0;
+    const isNumber = Number(numberOfCalls);
+    return isMoreOrEqualThanMinimum && isInteger && isNumber;
+  };
+
   handleNoOfCallsChange = (event) => {
     const noOfServiceCalls = event.target.value;
+    console.log(noOfServiceCalls);
+    if (!this.isValidCallsNumber(noOfServiceCalls)) {
+      return;
+    }
     const totalPrice = String(cogsToAgi(this.paymentChannelManagement.noOfCallsToCogs(noOfServiceCalls)));
     this.setState({ noOfServiceCalls, totalPrice });
   };
@@ -213,8 +224,9 @@ class MetamaskFlow extends Component {
   };
 
   shouldContinueBeEnabled = () => {
-    const { mpeBal, totalPrice, channelBalance } = this.state;
+    const { mpeBal, totalPrice, channelBalance, selectedPayType } = this.state;
     return (
+      selectedPayType &&
       this.props.isServiceAvailable &&
       (Number(mpeBal) >= Number(totalPrice) || Number(channelBalance) >= Number(totalPrice))
     );
@@ -256,11 +268,6 @@ class MetamaskFlow extends Component {
     return (
       <div className={classes.PurchaseFlowContainer}>
         <PurchaseDialog show={showPurchaseDialog} onClose={this.handlePurchaseDialogClose} />
-        <Typography variant="body1" className={classes.PurchaseFlowDescription}>
-          Transfer the style of a “style Image” to a “content image” by choosing them in the boxes below. You can upload
-          a a file from your computer, URL, or select image from the gallery. You can specify additional parameters in
-          the panel below. “Mouse over” for tool tips.
-        </Typography>
         <div className={classes.paymentInfoCard}>
           {this.PaymentInfoCardData.map((item) => (
             <PaymentInfoCard key={item.title} title={item.title} value={item.value} unit={item.unit} />
@@ -271,7 +278,7 @@ class MetamaskFlow extends Component {
             <span className={classes.channelSelectionTitle}>Recommended</span>
             <ChannelSelectionBox
               title="Channel Balance"
-              description={`You have ${this.parseChannelBalFromPaymentCard()} AGIX in you channel. This can be used for running demos across all the services from this vendor.`}
+              description={`You have ${Number(this.parseChannelBalFromPaymentCard())} AGIX in you channel. This can be used for running demos across all the services from this vendor.`}
               checked={selectedPayType === payTypes.CHANNEL_BALANCE}
               value={payTypes.CHANNEL_BALANCE}
               onClick={() => this.handlePayTypeChange(payTypes.CHANNEL_BALANCE)}
@@ -301,10 +308,9 @@ class MetamaskFlow extends Component {
               value={payTypes.SINGLE_CALL}
               onClick={() => this.handlePayTypeChange(payTypes.SINGLE_CALL)}
               inputProps={{
-                noOfServiceCalls: 1,
                 totalPrice: cogsToAgi(this.props.pricing.price_in_cogs),
                 unit: "AGIX",
-                disabled: true,
+                noInput: true,
               }}
               disabled={disabledPayTypes.includes(payTypes.SINGLE_CALL)}
             />

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/MetamaskFlow/style.js

@@ -22,6 +22,7 @@ export const useStyles = (theme) => ({
     marginBottom: 25,
     display: "flex",
     justifyContent: "space-between",
+    "@media(max-width:460px)": { flexDirection: "column", gap: 25 },
   },
   paymentChannelDropDownContainer: { display: "flex" },
   infoIconContainer: {

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/styles.js

@@ -58,9 +58,9 @@ export const useStyles = (theme) => ({
   },
   paymentChannelDropDownContainer: {
     display: "flex",
-    marginRight: 40,
+    marginBottom: 30,
     "& fieldset": { display: "none" },
-    "@media(max-width:940px)": { marginBottom: 30 },
+    "@media(max-width:940px)": { width: "100%", marginBottom: 30 },
   },
   infoIconContainer: {
     marginRight: 10,

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/PaymentInfoCard/index.js

@@ -15,7 +15,7 @@ const PaymentInfoCard = ({ classes, title, value, unit, show }) => {
         <h5>{title}</h5>
       </div>
       <div>
-        <h3>{value}</h3>
+        <h3>{Number(value)}</h3>
         {unit ? <span className={classes.unit}>AGIX</span> : ""}
       </div>
     </div>

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/PaymentInfoCard/styles.js

@@ -26,6 +26,11 @@ export const useStyles = (theme) => ({
     },
     "@media(max-width:480px)": { textAlign: "left" },
   },
+  TitleContainer: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: 5,
+  },
   unit: {
     marginLeft: 8,
     display: "inline-block",

src/components/ServiceDetails/AboutService/styles.js

@@ -5,10 +5,7 @@ export const useStyles = (theme) => ({
     borderTopStyle: "solid",
     borderTopColor: theme.palette.text.verticalTabLeftBorder,
     "& h2": {
-      padding: "11px 22px",
-      borderBottomWidth: 1,
-      borderBottomStyle: "solid",
-      borderBottomColor: theme.palette.text.gray1,
+      padding: 0,
       margin: 0,
       color: theme.palette.text.darkShadedGray,
       fontSize: 20,

src/components/ServiceDetails/index.js

@@ -58,7 +58,7 @@ class ServiceDetails extends Component {
     } else {
       await this.initializeService();
     }
-    this.fetchTrainingModel();
+    await this.fetchTrainingModel();
   }
 
   fetchTrainingModel = async () => {

src/components/common/Footer/data.js

@@ -3,7 +3,7 @@ const PrimaryFooterLeft = [
   //{ label: "Foundation Main Site", link: "https://singularitynet.io/" },
   { label: "Singularity Studio", link: "https://singularitynet.io/studio/" },
   { label: "White Paper", link: "https://public.singularitynet.io/whitepaper.pdf" },
-  { label: "Jobs", link: "https://singularitynet.io/jobs-temp/" },
+  { label: "Jobs", link: "https://singularitynet.io/jobs" },
 ];
 
 const PrimaryFooterMain = [