@sikka/hawa 0.0.2 → 0.0.5

package/src/blocks/Payment/PaymentMethod.js

@@ -0,0 +1,132 @@
+import useTranslation from "next-translate/useTranslation";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+
+const PaymentMethod = (props) => {
+  const { t } = useTranslation("common");
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  return (
+    <>
+      {props.wallet ? (
+        <PaymentMethodButton
+          imageURL={`/wallet.png`}
+          methodCode="wallet"
+          methodLabel={t("current-wallet")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {props.creditcard ? (
+        <PaymentMethodButton
+          imageURL={`/visa-master.png`}
+          methodCode="creditcard"
+          methodLabel={t("credit-card")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {props.mada ? (
+        <PaymentMethodButton
+          imageURL={`/mada.png`}
+          methodCode="mada"
+          methodLabel={t("mada")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {props.stcpay ? (
+        <PaymentMethodButton
+          methodCode="stcpay"
+          methodLabel={"STC Pay"}
+          chip={t("soon")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {props.paypal ? (
+        <PaymentMethodButton
+          methodCode="paypal"
+          methodLabel={t("paypal")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+      {isSafari && applepay && (
+        <PaymentMethodButton
+          methodCode="applepay"
+          methodLabel={t("applepay")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      )}
+      {props.googlepay ? (
+        <PaymentMethodButton
+          methodCode="googlepay"
+          chip={t("soon")}
+          methodLabel={t("googlepay")}
+          handlePaymentMethod={props.handlePaymentMethod}
+        />
+      ) : null}
+    </>
+  );
+};
+
+const PaymentMethodButton = (props) => {
+  return (
+    <Button
+      disabled={props?.chip ? true : false}
+      fullWidth
+      variant="contained"
+      color="secondary"
+      style={{
+        backgroundColor: "white",
+        opacity: props.chip ? 0.7 : 1,
+        padding: 20,
+        width: "90%",
+        margin: 10,
+        borderRadius: "var(--borderR)"
+      }}
+      onClick={(e) => props.handlePaymentMethod(e, props.methodCode)}
+    >
+      {props.imageURL ? (
+        <div
+          style={{
+            // backgroundColor: "red",
+            width: "50%",
+            textAlign: "right",
+            paddingRight: 20
+          }}
+        >
+          <img
+            src={props.imageURL}
+            // src={`https://qawaim-images.s3-ap-southeast-1.amazonaws.com/payments/visa.png`}
+            // alt=""
+            // srcset=""
+            // height={"100%"}
+            // width={"30%"}
+            style={{
+              // height: "100%",
+              // aspectRatio: "6/4",
+              maxWidth: 70,
+              maxHeight: 70,
+              height: "auto"
+            }}
+          />
+        </div>
+      ) : null}
+      <div
+        style={{
+          // backgroundColor: "blue",
+          width: "50%",
+          textAlign: props.imageURL ? "left" : "center"
+        }}
+      >
+        {props.methodLabel}
+        {props.chip ? (
+          <Chip
+            size="small"
+            color="primary"
+            label={props.chip}
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+        ) : null}
+      </div>
+    </Button>
+  );
+};
+
+export default PaymentMethod;

package/src/blocks/Payment/SelectPayment.js

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  HawaTextField,
+  ActionButton,
+  GoogleButton,
+  TwitterButton,
+  GithubButton,
+  VisaMasterButton,
+  MadaButton,
+  STCPayButton,
+  PayPalButton,
+  GooglePayButton,
+  ApplePayButton,
+  WalletButton
+} from "../../ui";
+import { Box } from "../../layout";
+import PropTypes from "prop-types";
+
+export const SelectPayment = (props) => {
+  return (
+    <Box themeType={props.theme} maxWidth={400} noColor noMargin noPadding>
+      <Box themeType={props.theme} noMargin>
+        <div>Choose Payment</div>
+        {props.viaWallet && (
+          <WalletButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.walletLabel}
+            handleClick={props.handleWallet}
+          />
+        )}
+        {props.viaCreditCard && (
+          <VisaMasterButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.visaMasterLabel}
+            handleClick={props.handleCreditCard}
+          />
+        )}
+        {props.viaMada && (
+          <MadaButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.madaLabel}
+            handleClick={props.handleMada}
+          />
+        )}
+
+        {props.viaSTCPay && (
+          <STCPayButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.stcPayLabel}
+            handleClick={props.handleSTCPay}
+          />
+        )}
+        {props.viaPayPal && (
+          <PayPalButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.paypalLabel}
+            handleClick={props.handlePayPal}
+          />
+        )}
+        {props.viaGooglePay && (
+          <GooglePayButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.googlePayLabel}
+            handleClick={props.handleGooglePay}
+          />
+        )}
+
+        {props.viaApplePay && (
+          <ApplePayButton
+            themeType={props.theme}
+            outlined
+            buttonText={props.applePayLabel}
+            handleClick={props.handleApplePay}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+HawaTextField.propTypes = {
+  theme: PropTypes.oneOf(["secondary", "primary"]),
+  viaApplePay: PropTypes.bool,
+  viaGooglePay: PropTypes.bool,
+  viaSTCPay: PropTypes.bool,
+  viaCreditCard: PropTypes.bool,
+  viaPayPal: PropTypes.bool,
+  handleApplePay: PropTypes.func
+};

package/src/blocks/Payment/index.js

@@ -0,0 +1,16 @@
+// "use strict";
+
+// var _GooglePay = require("./Gateway/GooglePay");
+// var _Payfort = require("./Gateway/Payfort");
+// var _Paypal = require("./Gateway/Paypal");
+// var _Wallet = require("./Gateway/Wallet");
+// var _PaymentMethod = require("./PaymentMethod");
+
+// exports.GooglePay = _GooglePay.default;
+// exports.Payfort = _Payfort.default;
+// exports.Paypal = _Paypal.default;
+// exports.Wallet = _Wallet.default;
+// exports.PaymentMethod = _PaymentMethod.default;
+
+export * from "./SelectPayment";
+export * from "./CreditCardForm";

package/src/index.js

@@ -1 +1,4 @@
-export * from "./components/Hawa";
+export * from "./blocks/Account";
+export * from "./blocks/AuthForms";
+export * from "./blocks/Payment";
+//export * from "./components/Hawa";

package/src/layout/Box.js

@@ -0,0 +1,39 @@
+import React, { useContext } from "react";
+import { ThemeProvider } from "../themes/HawaProvider";
+
+export const Box = (props) => {
+  const theme = useContext(ThemeProvider);
+  let boxStyle = {};
+
+  console.log(Object.keys(theme.actionButton));
+  let currentTheme = Object.keys(theme.actionButton).find(
+    (themeName) => themeName.toLowerCase() === props.themeType?.toLowerCase()
+  );
+  if (currentTheme) {
+    boxStyle = {
+      display: "flex",
+      flexDirection: "column",
+      ...theme.layout[currentTheme],
+      backgroundColor: props.noColor
+        ? "none"
+        : theme.layout[currentTheme].backgroundColor,
+      padding: props.noPadding ? 0 : theme.layout[currentTheme].padding,
+      margin: props.noMargin ? 0 : theme.layout[currentTheme].margin,
+      maxWidth: props.maxWidth
+    };
+  } else {
+    boxStyle = {
+      display: "flex",
+      flexDirection: "column",
+      color: "white",
+      marginTop: props.last ? 10 * 2 : 0,
+      backgroundColor: props.noColor ? "none" : "lightGrey",
+      padding: props.noPadding ? 0 : 10,
+      margin: props.noMargin ? 0 : 10,
+      maxWidth: props.maxWidth,
+      borderRadius: 0
+    };
+  }
+
+  return <div style={boxStyle}>{props.children}</div>;
+};

package/src/layout/index.js

@@ -0,0 +1 @@
+export * from "./Box";

package/src/stories/ActionButton.stories.js

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { defaultTheme, HawaProvider } from "../themes/HawaProvider";
+import { ActionButton } from "../ui";
+
+const Template = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <ActionButton themeType={args.theme} text={args.buttonLabel} />
+    </HawaProvider>
+  );
+};
+//types:
+//error (red)
+//warning (red)
+//notice (blue)
+
+export default {
+  title: "UI/ActionButton",
+  component: ActionButton,
+  argTypes: {
+    theme: {
+      description: "overwritten description",
+      table: {
+        type: {
+          summary: "something short"
+        },
+        defaultValue: { summary: "Hello" }
+      },
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  }
+};
+
+Template.args = {
+  showText: true,
+  buttonLabel: "test",
+  theme: "primary"
+};
+export const Primary = Template.bind({});
+Primary.args = {
+  showText: true,
+  buttonLabel: "test",
+  theme: "primary"
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  showText: true,
+  buttonLabel: "test",
+  theme: "secondary"
+};

package/src/stories/AdaptiveButton.stories.js

@@ -1,80 +1,80 @@
-import React from "react";
-import AdaptiveButton from "../components/Hawa/AdaptiveButton/AdaptiveButton";
-import CastIcon from "@material-ui/icons/Cast";
-import { HawaProvider } from "../components/Hawa/HawaProvider";
-
-const Template = (args) => {
-  const theme = {
-    borderRadius: 10,
-    primaryColor: "#004fff",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <AdaptiveButton {...args} />
-    </HawaProvider>
-  );
-};
-export default {
-  title: "Components/AdaptiveButton",
-  component: AdaptiveButton,
-  argsTypes: {
-    buttonLabel: { control: "text" },
-    borderRadius: { control: "number" },
-    buttonColor: { control: "color" },
-    padding: { control: "number" },
-    hintTitle: { control: "text" },
-    hintContent: { control: "text" }
-  },
-  args: {
-    // type: "text",
-    // buttonLabel: "Test"
-    // borderRadius: 15,
-    hintTitle: "test",
-    hintContent: "more test",
-    buttonColor: "#f9f9f9"
-  }
-};
-
-export const Light = Template.bind({});
-Light.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  icon: <CastIcon />,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
-  // placeholder: "Example ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-
-export const Dark = Template.bind({});
-Dark.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#878787",
-  textColor: "#ffffff",
-  icon: <CastIcon />
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-export const Danger = Template.bind({});
-Danger.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#c0c0c0",
-  danger: true,
-  icon: <CastIcon />
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
+import React from "react";
+import CastIcon from "@mui/icons-material/Cast";
+import { HawaProvider } from "../themes/HawaProvider";
+import { AdaptiveButton } from "../ui";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 10,
+    primaryColor: "#004fff",
+    secondaryColor: "red",
+    // margins: "10px",
+    paddings: 10
+  };
+  return (
+    <HawaProvider theme={theme}>
+      <AdaptiveButton {...args} />
+    </HawaProvider>
+  );
+};
+export default {
+  title: "UI/AdaptiveButton",
+  component: AdaptiveButton,
+  argsTypes: {
+    buttonLabel: { control: "text" },
+    borderRadius: { control: "number" },
+    buttonColor: { control: "color" },
+    padding: { control: "number" },
+    hintTitle: { control: "text" },
+    hintContent: { control: "text" }
+  },
+  args: {
+    // type: "text",
+    // buttonLabel: "Test"
+    // borderRadius: 15,
+    hintTitle: "test",
+    hintContent: "more test",
+    buttonColor: "#f9f9f9"
+  }
+};
+
+export const Light = Template.bind({});
+Light.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  icon: <CastIcon />,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+  // placeholder: "Example ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  buttonColor: "#878787",
+  textColor: "#ffffff",
+  icon: <CastIcon />
+  // placeholder: "Exemple ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  buttonColor: "#c0c0c0",
+  danger: true,
+  icon: <CastIcon />
+  // placeholder: "Exemple ...",
+  // defaultValue: "This is default value",
+  // inputLabel: "Text Field",
+  // padding: 10
+};

package/src/stories/Alert.stories.js

@@ -1,48 +1,41 @@
-import React from "react";
-
-import { HawaProvider } from "../components/Hawa/HawaProvider";
-import { StyledAlert } from "../components/Hawa/StyledAlert/StyledAlert";
-
-const Template = (args) => {
-  const theme = {
-    borderRadius: 10,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paperColors: "#c6c6c6",
-    paddings: 10,
-    margins: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <StyledAlert text="teshht" />
-    </HawaProvider>
-  );
-};
-//types:
-//error (red)
-//warning (red)
-//notice (blue)
-
-export default {
-  title: "Components/Alert",
-  component: StyledAlert
-};
-
-export const Light = Template.bind({});
-Light.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
-};
-
-export const Dark = Template.bind({});
-Dark.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#878787",
-  textColor: "#ffffff"
-};
+import React from "react";
+
+import { HawaProvider } from "../themes/HawaProvider";
+import { StyledAlert } from "../ui";
+
+const Template = (args) => {
+  const theme = {
+    borderRadius: 10,
+    primaryColor: "green",
+    secondaryColor: "red",
+    // margins: "10px",
+    paperColors: "#c6c6c6",
+    paddings: 10,
+    margins: 10
+  };
+  return (
+    <HawaProvider theme={theme}>
+      <StyledAlert text="This is a warning" type="warning" />
+      <StyledAlert text="This is a regular notification" type="notification" />
+      <StyledAlert text="This is a danger alert" type="danger" />
+    </HawaProvider>
+  );
+};
+//types:
+//error (red)
+//warning (red)
+//notice (blue)
+
+export default {
+  title: "UI/Alert",
+  component: StyledAlert
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  showText: true,
+  buttonLabel: "test",
+  borderRadius: 5,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};