Merge pull request #979 from singnet/ui-fix

Payment modal and rating system fixed

src/Redux/actionCreators/ServiceActions.js

@@ -166,7 +166,7 @@ const submitFeedbackAPI = (feedbackObj, token) => {
   const apiName = APIEndpoints.USER.name;
   const path = `${APIPaths.FEEDBACK}`;
   const apiOptions = initializeAPIOptions(token, feedbackObj);
-  return postAPI({ apiName, path, apiOptions });
+  return postAPI(apiName, path, apiOptions);
 };
 
 export const submitFeedback = (orgId, serviceId, feedback) => async (dispatch) => {

src/components/AiMarketplace/MainSection/ServiceCollection/ServiceListItem/styles.js

@@ -90,6 +90,7 @@ export const useStyles = makeStyles((theme) => ({
   ratingSection: {
     display: "flex",
     alignItems: "center",
+    gap: 20,
     "@media(max-width:768px)": {
       marginBottom: 10,
       flexDirection: "column",

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/GeneralAccountWallet/PaymentPopup/Details/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { withStyles } from "@mui/styles";
 import Typography from "@mui/material/Typography";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import Web3 from "web3";
 import isEmpty from "lodash/isEmpty";
 import MPEContract from "singularitynet-platform-contracts/networks/MultiPartyEscrow";
@@ -20,14 +20,11 @@ import {
   USDToAgi as getUSDToAgi,
   USDToCogs as getUSDToCogs,
 } from "../../../../../../../../../Redux/reducers/PaymentReducer";
-import { orderPayloadTypes, orderTypes } from "../../../../../../../../../utility/constants/PaymentConstants";
+import { orderTypes } from "../../../../../../../../../utility/constants/PaymentConstants";
 import AGITokens from "./AGITokens";
 
 import { ReactComponent as PayPal } from "../../../../../../../../../assets/images/PayPal.svg";
 import TextField from "@mui/material/TextField";
-import { pickBy } from "lodash";
-import { paymentActions } from "../../../../../../../../../Redux/actionCreators";
-import { useParams } from "react-router-dom";
 
 export const paymentTypes = [{ value: "paypal", label: "Paypal" }];
 
@@ -40,52 +37,24 @@ const description = {
   [orderTypes.CREATE_CHANNEL]: `Please enter the payment type in the box below, along with the amount you would like to enter into the payment channel.`,
 };
 
-const Details = ({ classes, handleClose, orderType, userProvidedPrivateKey: privateKey }) => {
+const Details = ({ classes, initiatePayment, handleClose, orderType, userProvidedPrivateKey: privateKey }) => {
   const groupInfo = useSelector((state) => getGroupInfo(state));
   const USDToAgi = useSelector((state) => getUSDToAgi(state));
   const USDToCogs = useSelector((state) => getUSDToCogs(state));
   const channelInfo = useSelector((state) => getChannelInfo(state));
 
-  const dispatch = useDispatch();
-  const { orgId, serviceId } = useParams();
-
   const payType = "paypal";
   const currency = "USD";
 
-  const [amount, setAmount] = useState(0);
+  const [amount, setAmount] = useState();
   const [alert, setAlert] = useState({});
   const [amountError, setAmountError] = useState();
 
-  const initiatePayment = (amount, currency, item, quantity, base64Signature, address, currentBlockNumber) => {
-    const itemDetails = {
-      item,
-      quantity: Number(quantity),
-      org_id: orgId,
-      service_id: serviceId,
-      group_id: groupInfo.group_id,
-      recipient: groupInfo.payment.payment_address,
-      order_type: orderPayloadTypes[orderType],
-      signature: base64Signature,
-      wallet_address: address,
-      current_block_number: currentBlockNumber,
-    };
-
-    const enhancedItemDetails = pickBy(itemDetails, (el) => el !== undefined); // removed all undefined fields
-
-    const paymentObj = {
-      price: { amount: Number(amount), currency },
-      item_details: enhancedItemDetails,
-      payment_method: "paypal",
-    };
-
-    return dispatch(paymentActions.initiatePayment(paymentObj));
-  };
-
   const handleAmountChange = (event) => {
     const { value } = event.target;
     if (!value) {
       setAmountError();
-      setAmount(0);
+      setAmount();
       return;
     }
     const isNotValid = snetValidator({ amount: value }, paymentGatewayConstraints);
@@ -153,6 +122,7 @@ const Details = ({ classes, handleClose, orderType, userProvidedPrivateKey: priv
         <TextField
           label="Select an Amount"
           value={amount}
+          placeholder="0"
           onChange={handleAmountChange}
           helperText={amountError ? amountError : <AGITokens amount={USDToAgi(amount)} />}
           InputProps={{ startAdornment: <span className={classes.currencyAdornment}>$</span> }}

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/GeneralAccountWallet/PaymentPopup/index.js

@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { withStyles } from "@mui/styles";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import pickBy from "lodash/pickBy";
 
 import { paymentActions, userActions } from "../../../../../../../../Redux/actionCreators";
+import { groupInfo as getGroupInfo } from "../../../../../../../../Redux/reducers/ServiceDetailsReducer";
 
 import Details from "./Details";
 import Purchase from "./Purchase";
@@ -11,7 +13,11 @@ import Summary from "./Summary";
 import { useStyles } from "./styles";
 import Routes from "../../../../../../../../utility/constants/Routes";
 import VerifyKey from "./VerifyKey";
-import { orderTypes, paymentTitles } from "../../../../../../../../utility/constants/PaymentConstants";
+import {
+  orderPayloadTypes,
+  orderTypes,
+  paymentTitles,
+} from "../../../../../../../../utility/constants/PaymentConstants";
 import { useNavigate, useParams } from "react-router-dom";
 import SNETDialog from "../../../../../../../common/SNETDialog";
 import ProgressBar from "../../../../../../../common/ProgressBar";
@@ -27,6 +33,8 @@ const PaymentPopup = ({ classes, isVisible, handleClose, paymentModalType }) =>
   const navigate = useNavigate();
   const { orgId, serviceId } = useParams();
 
+  const group = useSelector((state) => getGroupInfo(state));
+
   const [activeSection, setActiveSection] = useState(0); //indexOfPurchaseSection[paymentModalType] || 1);
   const [userProvidedPrivateKey, setUserProvidedPrivateKey] = useState();
   const [amount, setAmount] = useState("");
@@ -77,6 +85,40 @@ const PaymentPopup = ({ classes, isVisible, handleClose, paymentModalType }) =>
     }
   };
 
+  const handleInitiatePayment = (
+    payType,
+    amount,
+    currency,
+    item,
+    quantity,
+    base64Signature,
+    address,
+    currentBlockNumber
+  ) => {
+    const itemDetails = {
+      item,
+      quantity: Number(quantity),
+      org_id: orgId,
+      service_id: serviceId,
+      group_id: group.group_id,
+      recipient: group.payment.payment_address,
+      order_type: orderPayloadTypes[paymentModalType],
+      signature: base64Signature,
+      wallet_address: address,
+      current_block_number: currentBlockNumber,
+    };
+
+    const enhancedItemDetails = pickBy(itemDetails, (el) => el !== undefined); // removed all undefined fields
+
+    const paymentObj = {
+      price: { amount: Number(amount), currency },
+      item_details: enhancedItemDetails,
+      payment_method: "paypal",
+    };
+
+    return dispatch(paymentActions.initiatePayment(paymentObj));
+  };
+
   const executePaymentCompleted = useCallback(
     async (data, orgId, group_id) => {
       await dispatch(userActions.fetchWallet(orgId, group_id));
@@ -102,6 +144,7 @@ const PaymentPopup = ({ classes, isVisible, handleClose, paymentModalType }) =>
       component: (
         <Details
           handleNextSection={handleNextSection}
+          initiatePayment={handleInitiatePayment}
           handleClose={handleCancel}
           userProvidedPrivateKey={userProvidedPrivateKey}
           orderType={paymentModalType}

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

@@ -14,6 +14,7 @@ import {
 } from "../../../../../../../Redux/reducers/UserReducer";
 import PaymentPopup from "./PaymentPopup";
 import { orderTypes } from "../../../../../../../utility/constants/PaymentConstants";
+import { isEmpty } from "lodash";
 
 const GeneralAccountWallet = ({ classes, handleContinue }) => {
   const anyGeneralWallet = useSelector((state) => getAnyGeneralWallet(state));
@@ -32,7 +33,7 @@ const GeneralAccountWallet = ({ classes, handleContinue }) => {
           type="transparentBlueBorder"
           btnText="top up wallet"
           onClick={() => setPaymentPopupVisibile(orderTypes.TOPUP_WALLET)}
-          // disabled={isEmpty(channelInfo)} TODO
+          disabled={isEmpty(channelInfo)}
         />
         <NextAction
           channel={channelInfo}

src/components/ServiceDetails/AboutService/ServiceDemo/UserFeedback/index.js

@@ -48,7 +48,8 @@ const UserFeedback = ({ open, handleClose, feedback, submitFeedback, orgId, serv
     const feedback = { rating, comment };
     try {
       const response = await submitFeedback(orgId, serviceId, feedback);
-      refetchFeedback();
+      await refetchFeedback();
+
       if (response.status === "success") {
         handleClose();
         setOpenSnackbar(true);

src/components/ServiceDetails/TitleCard/index.js

@@ -68,7 +68,7 @@ const TitleCard = ({
 
         <h1>{display_name}</h1>
 
-        <div>
+        <div className={classes.ratingContainer}>
           <StarRatingComponent name="rate1" starCount={5} value={star_rating} className={classes.ratingStars} />
           <RatingsCount ratingGiven={star_rating} totalRating={totalRating} />
         </div>

src/components/common/RatingsCount/index.js

@@ -5,9 +5,10 @@ import { useStyles } from "./styles";
 
 const RatingsCount = ({ ratingGiven, totalRating }) => {
   const classes = useStyles();
+
   return (
     <p className={classes.ratedCount}>
-      <span> {parseFloat(ratingGiven).toFixed(1)} </span>
+      <span> {ratingGiven ? parseFloat(ratingGiven).toFixed(1) : 0} </span>
       <span>({totalRating ? `${totalRating}` : 0}) </span>
     </p>
   );