fix(checkout): rebranding

plughacker · Jan 11, 2023 · 8de0e14 · 8de0e14
1 parent 1fdaa1e
commit 8de0e14
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-# Demo Plug Checkout Full VanillaJS
+# Demo Malga Checkout Full VanillaJS
 
-This project is a demo of Plug Checkout Full running on VanillaJS
+This project is a demo of Malga Checkout Full running on VanillaJS
 
 ## Running App
 
 Clone this app and open `index.html` in your browser
 
 ## Learn More
 
-You can know more about Plug on our [website](https://www.plugpagamentos.com/).
+You can know more about Malga on our [website](https://www.malga.io/).
diff --git a/index.css b/index.css
@@ -1,80 +1,60 @@
 :root {
   /* Colors */
-  --plug-checkout-color-brand-accent-light: #4ebff1;
-  --plug-checkout-color-brand-accent-normal: #0055a2;
-  --plug-checkout-color-brand-clean: #d8dff0;
-  --plug-checkout-color-brand-light: #0091ea;
-  --plug-checkout-color-brand-normal: #5c7ec0;
-  --plug-checkout-color-brand-middle: #344383;
-  --plug-checkout-color-brand-dark: #141b4d;
-  --plug-checkout-color-grey-light: #aaafc5;
-  --plug-checkout-color-grey-normal: #8b90a7;
-  --plug-checkout-color-grey-middle: #5e6277;
-  --plug-checkout-color-grey-dark: #3f4252;
-  --plug-checkout-color-grey-darkness: #1d1f2a;
-  --plug-checkout-color-accent-light: #ffffff;
-  --plug-checkout-color-accent-normal: #eef2f6;
-  --plug-checkout-color-accent-middle: #aebfd0;
-  --plug-checkout-color-warning-light: #fff8e1;
-  --plug-checkout-color-warning-normal: #fac30e;
-  --plug-checkout-color-warning-middle: #ffa200;
-  --plug-checkout-color-modal-success: #32c000;
-  --plug-checkout-color-modal-error: #ff1744;
-  --plug-checkout-color-modal-action-button-error: #344383;
-  --plug-checkout-color-modal-action-button-error-hover: #5c7ec0;
-  --plug-checkout-color-modal-action-button-success: #344383;
-  --plug-checkout-color-modal-action-button-success-hover: #5c7ec0;
-  --plug-checkout-color-modal-action-button-success-font-color: #ffffff;
-  --plug-checkout-color-modal-action-button-error-font-color: #ffffff;
+  --malga-checkout-color-page-background: #eef2f6;
+  --malga-checkout-color-brand-accent-light: #79dbd4;
+  --malga-checkout-color-brand-accent-normal: #39bfad;
+  --malga-checkout-color-brand-clean: #c3f4ef;
+  --malga-checkout-color-brand-light: #79dbd4;
+  --malga-checkout-color-brand-normal: #39bfad;
+  --malga-checkout-color-brand-middle: #2fac9b;
+  --malga-checkout-color-brand-dark: #147f70;
+  --malga-checkout-color-grey-light: #666666;
+  --malga-checkout-color-grey-normal: #4d4d4d;
+  --malga-checkout-color-grey-middle: #333333;
+  --malga-checkout-color-grey-dark: #1a1a1a;
+  --malga-checkout-color-grey-darkness: #000000;
+  --malga-checkout-color-accent-light: #ffffff;
+  --malga-checkout-color-accent-normal: #f1f1f1;
+  --malga-checkout-color-accent-middle: #cbcbcb;
+  --malga-checkout-color-warning-light: #fff8e6;
+  --malga-checkout-color-warning-normal: #f9df8d;
+  --malga-checkout-color-warning-middle: #ffa400;
+  --malga-checkout-color-modal-success: #00ae42;
+  --malga-checkout-color-modal-error: #ed3a3d;
+  --malga-checkout-color-modal-neutral: #4d4d4d;
+  --malga-checkout-color-modal-action-button-error: #000000;
+  --malga-checkout-color-modal-action-button-error-hover: #333333;
+  --malga-checkout-color-modal-action-button-success: #000000;
+  --malga-checkout-color-modal-action-button-success-hover: #333333;
+  --malga-checkout-color-modal-action-button-success-font-color: #ffffff;
+  --malga-checkout-color-modal-action-button-error-font-color: #ffffff;
 
   /* Typography */
-  --plug-checkout-typography-family: "Roboto", sans-serif;
+  --malga-checkout-typography-family: "Inter", sans-serif;
 
   /* Spacings */
-  --plug-checkout-spacing-xxs: 4px;
-  --plug-checkout-spacing-xs: 8px;
-  --plug-checkout-spacing-sm: 16px;
-  --plug-checkout-spacing-default: 24px;
-  --plug-checkout-spacing-md: 32px;
-  --plug-checkout-spacing-lg: 48px;
-  --plug-checkout-spacing-xlg: 64px;
-  --plug-checkout-spacing-xxlg: 96px;
+  --malga-checkout-spacing-xxs: 4px;
+  --malga-checkout-spacing-xs: 8px;
+  --malga-checkout-spacing-sm: 16px;
+  --malga-checkout-spacing-default: 24px;
+  --malga-checkout-spacing-md: 32px;
+  --malga-checkout-spacing-lg: 48px;
+  --malga-checkout-spacing-xlg: 64px;
+  --malga-checkout-spacing-xxlg: 96px;
 
   /* Sizes */
-  --plug-checkout-size-min-width: 250px;
+  --malga-checkout-size-min-width: 250px;
 
   /* Border Radius */
-  --plug-checkout-border-radius-default: 4px;
-  --plug-checkout-border-radius-md: 6px;
-  --plug-checkout-border-radius-lg: 20px;
+  --malga-checkout-border-radius-default: 4px;
+  --malga-checkout-border-radius-md: 6px;
+  --malga-checkout-border-radius-lg: 20px;
 
   /* Transitions Time */
-  --plug-checkout-transition-slow: 0.3s;
-  --plug-checkout-transition-default: 0.5s;
+  --malga-checkout-transition-slow: 0.3s;
+  --malga-checkout-transition-default: 0.5s;
 }
 
-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
+html {
   background: #eef2f6;
-  margin: 0;
-  padding: 8px;
-}
-
-main {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: white;
-  border-radius: 8px;
-  padding: 10px;
-}
-
-@media only screen and (min-width: 600px) {
-  main {
-    padding: 50px;
-    width: 500px;
-  }
-}
+}
diff --git a/index.html b/index.html
@@ -4,26 +4,26 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/png" href="./public/favicon.png" />
+  <link rel="icon" href="./public/favicon.ico" />
   <link rel="stylesheet" href="./index.css" />
   <script
     type="module"
-    src="https://unpkg.com/@plug-checkout-full/core@latest/dist/plug-checkout-full/plug-checkout-full.esm.js"
+    src="https://unpkg.com/@malga-checkout-full/core@latest/dist/malga-checkout-full/malga-checkout-full.esm.js"
   ></script>
   <script
     defer
     src="./main.js"
   ></script>
-  <title>Plug Checkout Full Demo</title>
+  <title>Malga Checkout Full Demo</title>
 </head>
 <body>
   <main>
-    <plug-checkout-full
+    <malga-checkout-full
       sandbox
       public-key="<YOUR_PUBLIC_KEY>"
       client-id="<YOUR_CLIENT_ID>"
       merchant-id="<YOUR_MERCHANT_ID>"
-    ></plug-checkout-full>
+    ></malga-checkout-full>
   </main>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,7 +1,7 @@
 (() => {
-  const plugCheckoutFull = document.querySelector("plug-checkout-full");
+  const malgaCheckoutFull = document.querySelector("malga-checkout-full");
 
-  plugCheckoutFull.paymentMethods = {
+  malgaCheckoutFull.paymentMethods = {
     pix: {
       expiresIn: 3600,
     },
@@ -27,28 +27,26 @@
     },
   };
 
-  plugCheckoutFull.transactionConfig = {
-    statementDescriptor: "#1 Demonstration Plug Checkout",
+  malgaCheckoutFull.transactionConfig = {
+    statementDescriptor: "#1 Demonstration Malga Checkout",
     amount: 100,
     description: "",
     orderId: "",
-    customerId: "<CUSTOMER_ID>",
     currency: "BRL",
     capture: false,
   };
 
-  plugCheckoutFull.dialogConfig = {
+  malgaCheckoutFull.dialogConfig = {
     show: true,
     actionButtonLabel: "Continuar",
     errorActionButtonLabel: "Tentar novamente",
     successActionButtonLabel: "Continuar",
-    successRedirectUrl: "https://www.plugpagamentos.com/",
+    successRedirectUrl: "https://www.malga.io/",
   };
 
-  plugCheckoutFull.pageConfig = {
-    brandUrl: "https://exampleurl/images/logo.png",
-    footerDescription: "Todos os direitos reservados © 2022 Plug Pagamentos.",
-    backRoute: "https://www.plugpagamentos.com/",
+  malgaCheckoutFull.pageConfig = {
+    footerDescription: "Todos os direitos reservados © 2023 Malga.",
+    backRoute: "https://www.malga.io/",
     delivery: 0,
     products: [
       {
@@ -70,14 +68,14 @@
     ],
   };
 
-  plugCheckoutFull.addEventListener(
+  malgaCheckoutFull.addEventListener(
     "transactionSuccess",
     ({ detail: { data } }) => {
       console.log(data);
     }
   );
 
-  plugCheckoutFull.addEventListener(
+  malgaCheckoutFull.addEventListener(
     "transactionFailed",
     ({ detail: { error } }) => {
       console.log(error);

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png