canonical · minkyngkm · Nov 5, 2024
diff --git a/...s/src/advantage/distributor/components/DistributorBuyButton/DistributorBuyButton.test.tsx b/...s/src/advantage/distributor/components/DistributorBuyButton/DistributorBuyButton.test.tsx
@@ -12,7 +12,7 @@ import {
   FormContext,
   defaultValues,
 } from "advantage/distributor/utils/FormContext";
-import { distributorProduct } from "advantage/subscribe/checkout/utils/test/Mocks";
+import { DistributorProduct } from "advantage/subscribe/checkout/utils/test/Mocks";
 import { ChannelOfferFactory } from "advantage/offers/tests/factories/channelOffers";
 import { UserSubscriptionMarketplace } from "advantage/api/enum";
 
@@ -27,7 +27,7 @@ const mockSubscription: SubscriptionItem = {
 const mockContextValue = {
   ...defaultValues,
   subscriptionList: [mockSubscription] as SubscriptionItem[],
-  products: [distributorProduct] as ChannelProduct[],
+  products: [DistributorProduct] as ChannelProduct[],
   offer: ChannelOfferFactory.build({ id: "offer-id-1" }),
 };
 

diff --git a/...nents/DistributorShopForm/AddSubscriptions/SubscriptionCard.tsx/SubscriptionCard.test.tsx b/...nents/DistributorShopForm/AddSubscriptions/SubscriptionCard.tsx/SubscriptionCard.test.tsx
@@ -11,7 +11,7 @@ import {
   FormContext,
   defaultValues,
 } from "advantage/distributor/utils/FormContext";
-import { distributorProduct } from "advantage/subscribe/checkout/utils/test/Mocks";
+import { DistributorProduct } from "advantage/subscribe/checkout/utils/test/Mocks";
 
 const mockSubscription: SubscriptionItem = {
   id: "mocked-id-1",
@@ -25,7 +25,7 @@ const mockContextValue = {
   ...defaultValues,
   subscriptionList: [mockSubscription] as SubscriptionItem[],
   setSubscriptionList: jest.fn(),
-  products: [distributorProduct] as ChannelProduct[],
+  products: [DistributorProduct] as ChannelProduct[],
   duration: 1,
 };
 

diff --git a/static/js/src/advantage/subscribe/checkout/components/Taxes/Taxes.test.tsx b/static/js/src/advantage/subscribe/checkout/components/Taxes/Taxes.test.tsx
@@ -3,7 +3,7 @@ import { Formik } from "formik";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { UAProduct } from "../../utils/test/Mocks";
+import { DistributorProduct, UAProduct } from "../../utils/test/Mocks";
 import Taxes from "./Taxes";
 
 describe("TaxesTests", () => {
@@ -112,7 +112,7 @@ describe("TaxesTests", () => {
     global.window = Object.create(window);
     Object.defineProperty(window, "accountId", { value: "ABCDEF" });
 
-    const intialValues = {
+    const initialValues = {
       country: "GB",
     };
     const products = [
@@ -123,7 +123,7 @@ describe("TaxesTests", () => {
     ];
     render(
       <QueryClientProvider client={queryClient}>
-        <Formik initialValues={intialValues} onSubmit={jest.fn()}>
+        <Formik initialValues={initialValues} onSubmit={jest.fn()}>
           <Elements stripe={stripePromise}>
             <Taxes products={products} setError={jest.fn()} />
           </Elements>
@@ -158,7 +158,7 @@ describe("TaxesTests", () => {
     global.window = Object.create(window);
     Object.defineProperty(window, "accountId", { value: "ABCDEF" });
 
-    const intialValues = {
+    const initialValues = {
       country: "GB",
       VATNumber: "GB123123123",
     };
@@ -171,7 +171,7 @@ describe("TaxesTests", () => {
     ];
     render(
       <QueryClientProvider client={queryClient}>
-        <Formik initialValues={intialValues} onSubmit={jest.fn()}>
+        <Formik initialValues={initialValues} onSubmit={jest.fn()}>
           <Elements stripe={stripePromise}>
             <Taxes products={products} setError={jest.fn()} />
           </Elements>
@@ -212,4 +212,62 @@ describe("TaxesTests", () => {
     expect(screen.getByTestId("country")).toHaveTextContent("United Kingdom");
     expect(screen.getByTestId("vat-number")).toHaveTextContent("GB123123123");
   });
+
+  it("Edit button should be displayed for pro users", () => {
+    global.window = Object.create(window);
+    Object.defineProperty(window, "accountId", { value: "ABCDEF" });
+
+    const initialValues = {
+      country: "GB",
+      VATNumber: "GB123123123",
+      marketPlace: "canonical-ua",
+    };
+
+    const products = [
+      {
+        product: UAProduct,
+        quantity: 1,
+      },
+    ];
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Formik initialValues={initialValues} onSubmit={jest.fn()}>
+          <Elements stripe={stripePromise}>
+            <Taxes products={products} setError={jest.fn()} />
+          </Elements>
+        </Formik>
+      </QueryClientProvider>,
+    );
+
+    expect(screen.queryByRole("button", { name: "Edit" })).toBeInTheDocument();
+  });
+
+  it("Edit button should not be displayed for channel users", () => {
+    global.window = Object.create(window);
+    Object.defineProperty(window, "accountId", { value: "ABCDEF" });
+
+    const initialValues = {
+      country: "GB",
+      VATNumber: "GB123123123",
+      marketPlace: "canonical-pro-channel",
+    };
+
+    const products = [
+      {
+        product: DistributorProduct,
+        quantity: 1,
+      },
+    ];
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Formik initialValues={initialValues} onSubmit={jest.fn()}>
+          <Elements stripe={stripePromise}>
+            <Taxes products={products} setError={jest.fn()} />
+          </Elements>
+        </Formik>
+      </QueryClientProvider>,
+    );
+
+    expect(screen.queryByTestId("tax-edit-button")).not.toBeInTheDocument();
+  });
 });
diff --git a/static/js/src/advantage/subscribe/checkout/components/Taxes/Taxes.tsx b/static/js/src/advantage/subscribe/checkout/components/Taxes/Taxes.tsx
@@ -18,6 +18,7 @@
 import { getLabel } from "advantage/subscribe/react/utils/utils";
 import postCustomerTaxInfo from "../../hooks/postCustomerTaxInfo";
 import { CheckoutProducts, FormValues } from "../../utils/types";
+import { UserSubscriptionMarketplace } from "advantage/api/enum";
 
 type TaxesProps = {
   products: CheckoutProducts[];
@@ -35,7 +36,14 @@
     setErrors: setFormikErrors,
   } = useFormikContext<FormValues>();
   const [isEditing, setIsEditing] = useState(!initialValues.country);
+  const isChannelUser =
+    products[0]?.product?.marketplace ===
+    UserSubscriptionMarketplace.CanonicalProChannel;
   const queryClient = useQueryClient();
+  const postCustomerTaxInfoMutation = postCustomerTaxInfo();
+  const hasZeroPriceValue = products.some(
+    (item) => item.product.price.value === 0,
+  );
 
   useEffect(() => {
     if (errors.VATNumber) {
@@ -53,10 +61,6 @@
     }
   }, [initialValues]);
 
-  const postCustomerTaxInfoMutation = postCustomerTaxInfo();
-  const hasZeroPriceValue = products.some(
-    (item) => item.product.price.value === 0,
-  );
   const onSaveClick = () => {
     setIsEditing(false);
     setFieldTouched("isTaxSaved", false);
@@ -70,8 +74,12 @@
         },
         {
           onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: ["preview"] });
-            queryClient.invalidateQueries({ queryKey: ["customerInfo"] });
+            queryClient.invalidateQueries({
+              queryKey: ["preview"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["customerInfo"],
+            });
           },
           onError: (error) => {
             setFieldValue("Description", false);
@@ -290,43 +298,52 @@
             error={touched?.isTaxSaved && errors?.isTaxSaved}
           />
         </Col>
-        <hr />
-        <div
-          className="u-align--right"
-          style={{ marginTop: "calc(.5rem - 1.5px)" }}
-        >
-          {isEditing ? (
-            <>
-              {window.accountId && !!initialValues.country ? (
+        {!isChannelUser && (
+          <>
+            <hr />
+            <div
+              className="u-align--right"
+              style={{ marginTop: "calc(.5rem - 1.5px)" }}
+            >
+              {isEditing ? (
+                <>
+                  {window.accountId && !!initialValues.country && (
+                    <ActionButton
+                      onClick={() => {
+                        setFieldValue("country", initialValues.country);
+                        setFieldValue("usState", initialValues.usState);
+                        setFieldValue("caProvince", initialValues.caProvince);
+                        setFieldValue("VATNumber", initialValues.VATNumber);
+                        setIsEditing(false);
+                        setFieldValue("isTaxSaved", true);
+                        setFieldTouched("isTaxSaved", false);
+                      }}
+                    >
+                      Cancel
+                    </ActionButton>
+                  )}
+                  <ActionButton
+                    onClick={onSaveClick}
+                    disabled={
+                      !values.country ||
+                      (values.country === "US" && !values.usState) ||
+                      (values.country === "CA" && !values.caProvince)
+                    }
+                  >
+                    Save
+                  </ActionButton>
+                </>
+              ) : (
                 <ActionButton
-                  onClick={() => {
-                    setFieldValue("country", initialValues.country);
-                    setFieldValue("usState", initialValues.usState);
-                    setFieldValue("caProvince", initialValues.caProvince);
-                    setFieldValue("VATNumber", initialValues.VATNumber);
-                    setIsEditing(false);
-                    setFieldValue("isTaxSaved", true);
-                    setFieldTouched("isTaxSaved", false);
-                  }}
+                  onClick={onEditClick}
+                  data-testid="tax-edit-button"
                 >
-                  Cancel
+                  Edit
                 </ActionButton>
-              ) : null}
-              <ActionButton
-                onClick={onSaveClick}
-                disabled={
-                  !values.country ||
-                  (values.country === "US" && !values.usState) ||
-                  (values.country === "CA" && !values.caProvince)
-                }
-              >
-                Save
-              </ActionButton>
-            </>
-          ) : (
-            <ActionButton onClick={onEditClick}>Edit</ActionButton>
-          )}
-        </div>
+              )}
+            </div>
+          </>
+        )}
       </Row>
     </>
   );

diff --git a/static/js/src/advantage/subscribe/checkout/components/UserInfoForm/UserInfoForm.test.tsx b/static/js/src/advantage/subscribe/checkout/components/UserInfoForm/UserInfoForm.test.tsx
@@ -4,6 +4,7 @@ import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { fireEvent, render, screen } from "@testing-library/react";
 import UserInfoForm from "./UserInfoForm";
+import { UserSubscriptionMarketplace } from "advantage/api/enum";
 
 describe("UserInfoFormTests", () => {
   let queryClient: QueryClient;
@@ -17,7 +18,7 @@ describe("UserInfoFormTests", () => {
     global.window = Object.create(window);
     Object.defineProperty(window, "accountId", { value: "ABCDEF" });
 
-    const intialValues = {
+    const initialValues = {
       name: "Joe",
       organisationName: "Canonical",
       buyingFor: "organisation",
@@ -36,7 +37,7 @@ describe("UserInfoFormTests", () => {
 
     render(
       <QueryClientProvider client={queryClient}>
-        <Formik initialValues={intialValues} onSubmit={jest.fn()}>
+        <Formik initialValues={initialValues} onSubmit={jest.fn()}>
           <Elements stripe={stripePromise}>
             <UserInfoForm setError={jest.fn()} />
           </Elements>
@@ -75,4 +76,54 @@ describe("UserInfoFormTests", () => {
       "AB12 3CD",
     );
   });
+
+  it("Channel user should be able to edit only card number", () => {
+    global.window = Object.create(window);
+    Object.defineProperty(window, "accountId", { value: "ABCDEF" });
+
+    const initialValues = {
+      name: "Min",
+      marketplace: UserSubscriptionMarketplace.CanonicalProChannel,
+      buyingFor: "organisation",
+      organisationName: "Canonical",
+      address: "ABC Street",
+      city: "DEF City",
+      postalCode: "AB12 3CD",
+      defaultPaymentMethod: {
+        brand: "visa",
+        country: "US",
+        expMonth: 4,
+        expYear: 2024,
+        id: "pm_ABCDEF",
+        last4: "4242",
+      },
+    };
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Formik initialValues={initialValues} onSubmit={jest.fn()}>
+          <Elements stripe={stripePromise}>
+            <UserInfoForm setError={jest.fn()} />
+          </Elements>
+        </Formik>
+      </QueryClientProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit" }));
+    fireEvent.change(screen.getByTestId("field-card-number"), {
+      target: { value: "1234 5678 1234 5678" },
+    });
+
+    expect(screen.getByTestId("customer-name")).toHaveTextContent("Min");
+    expect(screen.getByTestId("organisation-name")).toHaveTextContent(
+      "Canonical",
+    );
+    expect(screen.getByTestId("customer-address")).toHaveTextContent(
+      "ABC Street",
+    );
+    expect(screen.getByTestId("customer-city")).toHaveTextContent("DEF City");
+    expect(screen.getByTestId("customer-postal-code")).toHaveTextContent(
+      "AB12 3CD",
+    );
+  });
 });