[petdesk-b2c] Improve readme and remove unused imports

petcare-sample/b2c/web-app/petdesk/README.md

@@ -34,13 +34,13 @@ Authorized redirect URLs: https://localhost:3000 (This will be updated with the
 8. Use **Web App URL** in the step 3.3 as the **Authorized redirect URLs** and **Allowed origins**.
 9. Keep the rest of the default configurations and click **Update**.
 10. Create `acr` claim from `User Attributes & Stores/Attributes section.
-11. Create a scope called `acr` and map it to the previously created `acr` claim.
-12. Go to the **User Attributes** tab.
+11. Create an OIDC scope called `acr` and map it to the previously created `acr` claim.
+12. Go to the **User Attributes** tab in the created application in step 4.
 13. Tick on the `acr`.
 14. Tick on the **Email** section.
 15. Expand the **Profile** section.
 16. Add a tick on the Requested Column for the **Full Name** and click **Update**.
-17. Then go to the **Sign-In Method** tab.
+17. Then go to the **Login Flow** tab.
 18. Configure **Google login** as described in https://wso2.com/asgardeo/docs/guides/authentication/social-login/add-google-login/
 19. As shown in the below, add **Username & Password** as an **Authentication** step.
 20. To perform the acr-based step up authentication add the following conditional script to the login flow.
@@ -241,7 +241,7 @@ In this step, you will play the role of the API developer. You will create and p
 Let's create your first Service.
 1. On the **Home** page, click on the project you created.
 2. To add a new component, select **Components** from the left-side menu and click **Create**.
-3. Click **Create** in the **Service** card.
+3. Under **Select a Type**, click on the **Service** card.
 4. Enter a unique name and a description for the Service. For example, you can enter the name and the description given below:
 
     | Field | Value |
@@ -258,7 +258,7 @@ Let's create your first Service.
     | GitHub Account | Your account |
     | GitHub Repository | samples-is|
     | Branch | master |
-    | Build Preset | Click **Ballerina** because you are creating the REST API from a Ballerina project and Choreo needs to run a Ballerina build to build it. |
+    | Buildpack | Click **Ballerina** because you are creating the REST API from a Ballerina project and Choreo needs to run a Ballerina build to build it. |
     | Path | /petcare-sample/b2c/web-app/petdesk/apis/ballerina/pet-management-service |
 
 8. Click **Create** to initialize a Service with the implementation from your GitHub repository.
@@ -381,15 +381,16 @@ If you are not connecting the service to a MySQL database and storing the servic
 2. Go to the Set Up card and click **Endpoint Configurations**. This opens the Endpoint Configurations pane.
 3. Select the **Pass Security Context To Backend** checkbox.
 4. Optionally, specify an appropriate audience claim value for the backend service.
-Click Apply.
-5. To redeploy the component with the applied setting, go to the Set Up card and click Deploy.
+5. Scroll down the **Endpoint Configurations** wizard and click **Apply**.
+6. To redeploy the component with the applied setting, go to the Set Up card and click Deploy.
 
 ## Step 4.5: Test the Service
 
 Let's test the Pet Management Service via Choreo's Console by following the steps given below:
 1. Navigate to the **Test** section in the component and click **Console**. This will open up the definition of the service.
 2. Expand the **POST** method and click **Try it out**.
 3. Update the request body as below:
+
     ``` 
     {
       "breed": "Golden Retriever",
@@ -414,7 +415,7 @@ Similarly, you can expand and try out the other methods.
 
 Now that yourService is tested, let's publish it and make it available for applications to consume.
 
-1. Navigate to the **Manage** section of the channel service and click **Lifecycle**.
+1. Navigate to the **Manage** section of the created service and click **Lifecycle**.
 2. Click **Publish** to publish the Service to the **Developer Portal**. External applications can subscribe to the API via the Developer Portal.
 3. To access the Developer Portal, click **Go to DevPortal** in the top right corner.
 4. The Pet Management Service will open in the Developer Portal.
@@ -508,13 +509,13 @@ When deploying the webhook through choreo, provide the salesforce related config
 8. Use **Web App URL** in the step 3.3 as the **Authorized redirect URLs** and **Allowed origins**.
 9. Keep the rest of the default configurations and click **Update**.
 10. Create `acr` claim from `User Attributes & Stores/Attributes section.
-11. Create a scope called `acr` and map it to the previously created `acr` claim.
-12. Go to the **User Attributes** tab.
+11. Create an OIDC scope called `acr` and map it to the previously created `acr` claim.
+12. Go to the **User Attributes** tab of the created app.
 13. Tick on the `acr`.
 14. Tick on the **Email** section.
 15. Expand the **Profile** section.
 16. Add a tick on the Requested Column for the **Full Name** and click **Update**.
-17. Then go to the **Sign-In Method** tab.
+17. Then go to the **Login Flow** tab.
 18. Configure **Google login** as described in https://wso2.com/asgardeo/docs/guides/authentication/social-login/add-google-login/
 19. As shown in the below, add **Username & Password** as an **Authentication** step.
 20. To perform the acr-based step up authentication add the following conditional script to the login flow.
@@ -583,13 +584,11 @@ var onLoginRequest = function (context) {
 3. Visit the sample application at http://localhost:3000. 
 
 ## Run API Services
-1. Navigate to <PROJECT_HOME>/petcare-sample/b2c/web-app/petdesk/apis/ballerina/pet-management-service and start the 
-   pet management service by executing the following command in the terminal.
+1. Navigate to <PROJECT_HOME>/petcare-sample/b2c/web-app/petdesk/apis/ballerina/pet-management-service and start the pet management service by executing the following command in the terminal.
     ```
     bal run
     ```
-2. Navigate to <PROJECT_HOME>/petcare-sample/b2c/web-app/petdesk/apis/ballerina/billing-management-service and start the 
-   pet management service by executing the following command in the terminal.
+2. Navigate to <PROJECT_HOME>/petcare-sample/b2c/web-app/petdesk/apis/ballerina/billing-management-service and start the billing management service by executing the following command in the terminal.
     ```
     bal run
     ```

petcare-sample/b2c/web-app/petdesk/web/react/public/config.js

@@ -1,12 +1,12 @@
 window.config = {
-  baseUrl: "",
-  clientID: "",
-  signInRedirectURL: "http://localhost:3000",
-  signOutRedirectURL: "http://localhost:3000",
-  myAccountAppURL: "",
-  petManagementServiceURL: "http://localhost:9090",
-  billingServerURL: "http://localhost:9091",
-  salesforceServerURL: "http://localhost:9092",
-  scope: ["openid", "email", "profile", "acr"],
+  baseUrl: "https://api.asgardeo.io/t/pavinduorg",
+  clientID: "6X_5VJHgFIQYU1OFepf3ubPbw0oa",
+  signInRedirectURL: "https://localhost:3000",
+  signOutRedirectURL: "https://localhost:3000",
+  petManagementServiceURL: "<pet-management-service-url>",
+  billingServerURL: "<billing-service-url>",
+  salesforceServerURL: "<sales-force-service-url>",
+  scope: ["openid", "email", "profile"],
+  myAccountAppURL: "https://myaccount.asgardeo.io/t/pavinduorg",
   enableOIDCSessionManagement: true
-};
+  };

petcare-sample/b2c/web-app/petdesk/web/react/src/App.css

@@ -608,6 +608,7 @@ code {
   border-color: #e2e2e2;
   border-width: 0;
   width: 200px;
+  cursor: pointer;
 }
 
 .home-wording {

petcare-sample/b2c/web-app/petdesk/web/react/src/components/UserMenu.tsx

@@ -25,7 +25,7 @@ import LogoutIcon from '@mui/icons-material/Logout';
 import { BasicUserInfo, useAuthContext } from "@asgardeo/auth-react";
 import { getNotification } from "./Notifications/get-notification";
 import GetBilling from "../pages/billing";
-import { getBilling, getUpgrade } from "./Billing/billing";
+import { getBilling } from "./Billing/billing";
 import { AddCard } from "@mui/icons-material";
 import { getConfig } from "../util/getConfig";
 

petcare-sample/b2c/web-app/petdesk/web/react/src/pages/billing.tsx

@@ -22,7 +22,7 @@ import { Box, Grid, TextField } from "@mui/material";
 import React, { Fragment, useEffect, useState } from "react";
 import { AxiosResponse } from "axios";
 import { BillingInfo } from "../types/billing";
-import { getUpgrade, postBilling, postUpgrade } from "../components/Billing/billing";
+import { postBilling, postUpgrade } from "../components/Billing/billing";
 import { AddCard } from "@mui/icons-material";
 
 interface BillingProps {

petcare-sample/b2c/web-app/petdesk/web/react/src/pages/home.tsx

@@ -180,11 +180,14 @@ export const HomePage: FunctionComponent = (): ReactElement => {
             .catch(() => setHasAuthenticationErrors(true));
     }, [signIn]);
 
-    const handleBillingLogin = useCallback(() => {
+    const handleBillingLogin = useCallback(() => {        
         signIn({
             acr_values:"acr2"
         })
-        .catch(() => setHasAuthenticationErrors(true));
+        .catch((err) => {
+            console.error(err)
+            setHasAuthenticationErrors(true)
+        });
         //set value in session storage
         sessionStorage.setItem("billing", "true");
     }, []);