Merge pull request #58 from mediaopt/fix-cardfield-styling

Fix cardfield styling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "private": false,
   "type": "module",
   "license": "MIT",

src/components/CardFields/CardFieldsMask.tsx

@@ -10,6 +10,8 @@ import {
 import { CARD_FIELDS_INPUTS, CARD_FIELDS_BUTTON } from "./constants";
 import { useNotifications } from "../../app/useNotifications";
 import { useLoader } from "../../app/useLoader";
+import { errorFunc } from "../errorNotification";
+import { useTranslation } from "react-i18next";
 
 export const CardFieldsMask: React.FC<CardFieldsProps> = ({
   enableVaulting,
@@ -27,6 +29,7 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
   const { settings, paymentTokens } = useSettings();
   const { notify } = useNotifications();
   const { isLoading } = useLoader();
+  const { t } = useTranslation();
 
   const [vaultId, setVaultId] = useState<string>();
   const [paying, setPaying] = useState(false);
@@ -61,14 +64,12 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
         approveData as ApproveVaultSetupTokenData
       ).catch((err) => {
         setPaying(false);
-        isLoading(false);
-        notify("Error", err.message);
+        errorFunc(err, isLoading, notify, t);
       });
     } else {
       handleOnApprove(approveData as CustomOnApproveData).catch((err) => {
         setPaying(false);
-        isLoading(false);
-        notify("Error", err.message);
+        errorFunc(err, isLoading, notify, t);
       });
     }
   };
@@ -133,8 +134,7 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
       },
       onError: function (error: Record<string, never>) {
         setPaying(false);
-        isLoading(false);
-        notify("Error", error.message);
+        errorFunc(error, isLoading, notify, t);
       },
     });
   }, []);
@@ -144,8 +144,7 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
     isLoading(true);
 
     cardField.submit().catch((err: Record<string, never>) => {
-      notify("Error", err.message);
-      isLoading(false);
+      errorFunc(err, isLoading, notify, t);
       setPaying(false);
     });
   };
@@ -201,7 +200,7 @@ export const CardFieldsMask: React.FC<CardFieldsProps> = ({
           {vaultId && (
             <div className="h-9">
               <button
-                className={`${hostedFieldClasses.hostedFieldsPayButtonClasses} float-left`}
+                className={`${hostedFieldClasses.hostedFieldsPayButtonClasses} float-right`}
                 onClick={() =>
                   handleCreateOrder({
                     paymentSource: "card",