@licklist/design 0.44.551-dev.8 → 0.45.0-dev.0

package/src/modals/confirmation/ConfirmModal.tsx

@@ -1,143 +0,0 @@
-import React, { ReactNode, useRef, useState } from "react";
-import { Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import ModalHeader from "react-bootstrap/ModalHeader";
-import ModalTitle from "react-bootstrap/ModalTitle";
-import ModalBody from "react-bootstrap/ModalBody";
-import ModalFooter from "react-bootstrap/ModalFooter";
-import Modal from "react-bootstrap/Modal";
-import Icon from "../../static/Icon";
-
-export type ConfirmAction = () => void;
-export const ConfirmModalType = {
-  remove: "remove",
-  default: "default",
-} as const;
-
-export type ConfirmModalTypes =
-  typeof ConfirmModalType[keyof typeof ConfirmModalType];
-
-export interface ConfirmModalProps {
-  type?: ConfirmModalTypes;
-  children?: (confirm: (action: ConfirmAction) => void) => ReactNode;
-  title?: string;
-  content?: string | ReactNode;
-  onClose?: () => void;
-  hideButtons?: boolean;
-}
-
-export const CONFIRM_MODAL_ACTION_DECLINE = "confirm-modal-decline";
-export const CONFIRM_MODAL_ACTION_CONFIRM = "confirm-modal-confirm";
-export const CONFIRM_MODAL_ACTIONS: readonly string[] = [
-  CONFIRM_MODAL_ACTION_DECLINE,
-  CONFIRM_MODAL_ACTION_CONFIRM,
-];
-
-export function ConfirmModal({
-  type = "default",
-  children,
-  onClose,
-  title,
-  content,
-  hideButtons = false,
-}: ConfirmModalProps) {
-  const { t } = useTranslation("Design");
-
-  const actionRef = useRef<ConfirmAction>();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  const childrenHandler = (action: ConfirmAction) => {
-    actionRef.current = action;
-
-    setIsOpen(() => true);
-  };
-
-  const handleConfirmation = (e) => {
-    e.stopPropagation();
-    if (!actionRef.current) return;
-
-    actionRef.current();
-    setIsOpen(() => false);
-  };
-
-  const handleClose = (e) => {
-    e.stopPropagation();
-    setIsOpen(() => false);
-
-    if (!onClose) return;
-    onClose();
-  };
-
-  return (
-    <>
-      {children(childrenHandler)}
-
-      <Modal
-        show={isOpen}
-        onHide={handleClose}
-        animation={false}
-        centered
-        contentClassName="rounded"
-        className="confirm-modal"
-      >
-        <ModalHeader className="align-items-center border-0">
-          <ModalTitle as="h6">
-            {title ?? t("pleaseConfirmThisAction")}
-          </ModalTitle>
-
-          <Button
-            variant="danger"
-            className="btn-sm rounded"
-            onClick={handleClose}
-            data-id={CONFIRM_MODAL_ACTION_DECLINE}
-          >
-            <Icon type="times" height="1rem" />
-          </Button>
-        </ModalHeader>
-        <ModalBody className="confirmation-modal-body">
-          {content ?? t("areUSureYouWantToPerformThisAction")}
-        </ModalBody>
-        {!hideButtons && (
-          <ModalFooter className="border-0">
-            {type === ConfirmModalType.remove ? (
-              <>
-                <Button
-                  variant="outline"
-                  className="cancel-button"
-                  onClick={handleClose}
-                  data-id={CONFIRM_MODAL_ACTION_DECLINE}
-                >
-                  {t("cancel")}
-                </Button>
-                <Button
-                  variant="danger"
-                  onClick={handleConfirmation}
-                  data-id={CONFIRM_MODAL_ACTION_CONFIRM}
-                >
-                  {t("remove")}
-                </Button>
-              </>
-            ) : (
-              <>
-                <Button
-                  variant="danger"
-                  onClick={handleClose}
-                  data-id={CONFIRM_MODAL_ACTION_DECLINE}
-                >
-                  {t("decline")}
-                </Button>
-                <Button
-                  variant="success"
-                  onClick={handleConfirmation}
-                  data-id={CONFIRM_MODAL_ACTION_CONFIRM}
-                >
-                  {t("confirm")}
-                </Button>
-              </>
-            )}
-          </ModalFooter>
-        )}
-      </Modal>
-    </>
-  );
-}

package/src/modals/confirmation/Confirmation.stories.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
-import { ConfirmModal, ConfirmModalProps } from "./ConfirmModal";
-
-export default {
-  title: "Modals/Confirmation",
-  component: ConfirmModal,
-} as Meta;
-
-export const Default: Story<ConfirmModalProps> = (args) => {
-  const onConfirm = () => alert("confirmed");
-  const showButtons = boolean("showButtons", true);
-
-  return (
-    <ConfirmModal {...args} hideButtons={showButtons}>
-      {(confirm) => (
-        <button onClick={() => confirm(onConfirm)}>
-          Open Confirmation Modal
-        </button>
-      )}
-    </ConfirmModal>
-  );
-};
-
-Default.args = {};

package/src/modals/confirmation/index.ts

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

package/src/modals/dialog/Dialog.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import { Modal, Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-
-export interface IDialogProps {
-  isActive: boolean;
-  title?: string;
-  content?: string;
-  onApprove?: () => void | boolean;
-  onDecline?: () => void;
-  customButtons?: React.ReactNode;
-}
-
-export const Dialog = ({
-  isActive,
-  title,
-  content,
-  customButtons,
-  onApprove,
-  onDecline,
-}: IDialogProps) => {
-  const { t } = useTranslation("App");
-
-  const approveHandler = () => {
-    if (onApprove) {
-      onApprove();
-    }
-  };
-  const declineHandler = () => {
-    if (onDecline) {
-      onDecline();
-    }
-  };
-
-  return (
-    <>
-      <Modal
-        show={isActive}
-        onHide={onDecline}
-        animation={false}
-        size="sm"
-        centered
-        className="text-center justify-content-center rounded"
-      >
-        <Modal.Header className="justify-content-center border-0 ">
-          {title && <Modal.Title as="h6">{title}</Modal.Title>}
-        </Modal.Header>
-        {content && (
-          <Modal.Body className="justify-content-center ">{content}</Modal.Body>
-        )}
-        <Modal.Footer className="border-0 justify-content-center">
-          {customButtons || (
-            <>
-              <Button
-                variant="secondary"
-                className="modal-buttons"
-                onClick={declineHandler}
-              >
-                {t("cancel")}
-              </Button>
-              <Button
-                variant="primary"
-                className="modal-buttons"
-                onClick={approveHandler}
-              >
-                {t("Design:confirm")}
-              </Button>
-            </>
-          )}
-        </Modal.Footer>
-      </Modal>
-    </>
-  );
-};

package/src/modals/dialog/DialogContext.tsx

@@ -1,83 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  FC,
-  useState,
-  useCallback,
-} from "react";
-
-interface IDialogContext {
-  isShownDialog: boolean;
-  showDialog: () => void;
-  hideDialog: () => void;
-  onBeforeUnload: (e: Event) => void;
-  onPopState: (e: Event) => void;
-  onApproveDialog: () => void;
-  onDeclineDialog: () => void;
-}
-
-export const DialogContext = createContext<IDialogContext>({
-  isShownDialog: false,
-  showDialog: () => undefined,
-  hideDialog: () => undefined,
-  onBeforeUnload: () => undefined,
-  onPopState: () => undefined,
-  onDeclineDialog: () => undefined,
-  onApproveDialog: () => undefined,
-});
-
-export const DialogContextProvider: FC = ({ children }) => {
-  const [isShownDialog, setShownDialog] = useState(false);
-
-  const showDialog = () => {
-    setShownDialog(true);
-  };
-
-  const hideDialog = () => {
-    setShownDialog(false);
-  };
-
-  const onBeforeUnload = useCallback((e: Event) => {
-    e.preventDefault();
-    e.returnValue = false;
-  }, []);
-
-  const onPopState = useCallback(
-    (e: Event) => {
-      e.preventDefault();
-      if (!isShownDialog) {
-        showDialog();
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isShownDialog]
-  );
-
-  const onApproveDialog = useCallback(() => {
-    window.history.back();
-  }, []);
-
-  const onDeclineDialog = useCallback(() => {
-    window.history.pushState(null, "", window.location.pathname);
-    hideDialog();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <DialogContext.Provider
-      value={{
-        isShownDialog,
-        showDialog,
-        hideDialog,
-        onBeforeUnload,
-        onPopState,
-        onApproveDialog,
-        onDeclineDialog,
-      }}
-    >
-      {children}
-    </DialogContext.Provider>
-  );
-};
-
-export const useDialogContext = () => useContext(DialogContext);

package/src/modals/dialog/index.ts

@@ -1,2 +0,0 @@
-export * from "./Dialog";
-export * from "./DialogContext";

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -1,88 +0,0 @@
-import React, { ReactNode, useState } from "react";
-import Button from "react-bootstrap/Button";
-import { useTranslation } from "react-i18next";
-import ModalHeader from "react-bootstrap/ModalHeader";
-import ModalTitle from "react-bootstrap/ModalTitle";
-import ModalBody from "react-bootstrap/ModalBody";
-import ModalFooter from "react-bootstrap/ModalFooter";
-import Modal from "react-bootstrap/Modal";
-import Icon from "../../static/Icon";
-
-export interface FullscreenModalProps {
-  children?: (confirm: () => void) => ReactNode;
-  title?: string;
-  showHeader?: boolean;
-  showFooter?: boolean;
-  content?: ReactNode;
-  footerContent?: ReactNode;
-  onClose?: () => void;
-}
-
-export const FullscreenModal = ({
-  children,
-  onClose,
-  title,
-  content,
-  showHeader,
-  showFooter,
-  footerContent,
-}: FullscreenModalProps) => {
-  const { t } = useTranslation("Design");
-
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  const childrenHandler = () => {
-    setIsOpen(() => true);
-  };
-
-  const handleClose = (e) => {
-    e?.stopPropagation();
-    setIsOpen(() => false);
-
-    if (!onClose) return;
-    onClose();
-  };
-
-  return (
-    <>
-      {children(childrenHandler)}
-
-      <Modal
-        show={isOpen}
-        onHide={handleClose}
-        animation={false}
-        className="fullscreen-modal"
-        contentClassName="fullscreen-modal-content"
-      >
-        {showHeader && (
-          <ModalHeader className="align-items-center border-0">
-            {title && <ModalTitle as="h6">{title}</ModalTitle>}
-
-            <Button
-              variant="danger"
-              className="btn-sm rounded"
-              onClick={handleClose}
-            >
-              <Icon type="times" height="1rem" />
-            </Button>
-          </ModalHeader>
-        )}
-        <ModalBody className="fullscreen-modal-body">
-          {!showHeader && (
-            <Button
-              onClick={handleClose}
-              variant="link"
-              className="body-close-button"
-            >
-              {t("close")}
-            </Button>
-          )}
-          {content}
-        </ModalBody>
-        {showFooter && (
-          <ModalFooter className="border-0">{footerContent}</ModalFooter>
-        )}
-      </Modal>
-    </>
-  );
-};

package/src/modals/fullscreen/FulscreenModal.stories.tsx

@@ -1,55 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-import { EventVenueMap } from "../../events/event-venue-map";
-import { FullscreenModal, FullscreenModalProps } from "./FullscreenModal";
-
-export default {
-  title: "Modals/Fullscreen",
-  component: FullscreenModal,
-} as Meta;
-
-export const Default: Story<FullscreenModalProps> = (args) => {
-  return (
-    <FullscreenModal {...args}>
-      {(confirm) => <button onClick={confirm}>Open Fullscreen Modal</button>}
-    </FullscreenModal>
-  );
-};
-
-Default.args = {};
-
-export const DefaultWithHeader: Story<FullscreenModalProps> = (args) => {
-  return (
-    <FullscreenModal {...args}>
-      {(confirm) => <button onClick={confirm}>Open Fullscreen Modal</button>}
-    </FullscreenModal>
-  );
-};
-
-DefaultWithHeader.args = {
-  showFooter: true,
-  showHeader: true,
-  footerContent: <>content</>,
-  title: "Header Title",
-  content: <p>Content</p>,
-};
-
-export const DefaultWithBodyContent: Story<FullscreenModalProps> = (args) => {
-  return (
-    <FullscreenModal
-      {...args}
-      content={
-        <>
-          <EventVenueMap
-            url="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
-            name="Underground zone"
-          />
-        </>
-      }
-    >
-      {(confirm) => <button onClick={confirm}>Open Fullscreen Modal</button>}
-    </FullscreenModal>
-  );
-};
-
-DefaultWithBodyContent.args = {};

package/src/modals/fullscreen/index.ts

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

package/src/modals/index.ts

@@ -1,2 +0,0 @@
-export * from "./confirmation";
-export * from "./dialog";

package/src/notification/components/NotificationPlaceholders.stories.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-
-import {
-  NotificationPlaceholders,
-  NotificationPlaceholdersProps,
-} from "./NotificationPlaceholders";
-
-export default {
-  title: "Notification / Notification Placeholders",
-} as Meta;
-
-export const Default: Story<NotificationPlaceholdersProps> = (args) => (
-  <NotificationPlaceholders {...args} />
-);
-
-export const Empty: Story<NotificationPlaceholdersProps> = (args) => (
-  <NotificationPlaceholders {...args} />
-);
-
-Default.args = {
-  placeholders: [
-    { value: "user.first_name", description: "Customers first name" },
-    { value: "user.last_name", description: "Customers last name" },
-    { value: "venue.name", description: "Your venue/business name" },
-    {
-      value: "confirmation.link",
-      description: "Payment link to pay off their balance",
-    },
-  ],
-};

package/src/notification/components/NotificationPlaceholders.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import { Row, Col, Card } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { NotificationPlaceholder } from "@licklist/core/dist/DataMapper/Notification/NotificationPlaceholderDataMapper";
-
-export interface NotificationPlaceholdersProps {
-  placeholders: NotificationPlaceholder[];
-}
-
-export const NotificationPlaceholders = ({
-  placeholders,
-}: NotificationPlaceholdersProps) => {
-  const { t } = useTranslation("Design");
-
-  if (placeholders.length === 0) return null;
-
-  return (
-    <>
-      <Row>
-        <Col xs={12}>
-          <span className="mt-5">{t("Design:placeholdersDesc")}</span>
-        </Col>
-      </Row>
-      <Card className="mb-3 mt-3">
-        <Card.Body>
-          <Row>
-            <Col xs={12}>
-              {placeholders.map((placeholder) => (
-                <div className="placeholder-row mb-3" key={placeholder.value}>
-                  <span className="placeholder-value">{`${placeholder.value} - `}</span>
-                  <span className="placeholder-desc">
-                    {placeholder.description}
-                  </span>
-                </div>
-              ))}
-            </Col>
-          </Row>
-        </Card.Body>
-      </Card>
-    </>
-  );
-};

package/src/notification/email-template/card/EmailTemplateCard.stories.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-
-import { EmailTemplateCard, EmailTemplateCardProps } from "./EmailTemplateCard";
-
-export default {
-  title: "Notification / Email Template Card",
-  component: EmailTemplateCard,
-} as Meta;
-
-export const Default: Story<EmailTemplateCardProps> = (args) => (
-  <EmailTemplateCard {...args} />
-);
-
-Default.args = {
-  href: "#",
-  name: "Default Email Template with very long name",
-  subject: "Confirmation with looong subject text",
-  hasPermission: true,
-  isDefault: true,
-  templateType: "confirmation",
-  isActive: true,
-};

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import { useTranslation } from "react-i18next";
-import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
-import { ConfirmModal, ConfirmModalType } from "../../../modals";
-import { Icon } from "../../../static";
-import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
-
-export interface EmailTemplateCardProps extends HasPermissionProp {
-  name: string;
-  subject: string;
-  href: string;
-  isDefault: boolean;
-  isActive: boolean;
-  onRemove: () => void;
-  type: NotificationType;
-}
-
-export function EmailTemplateCard({
-  name,
-  href,
-  subject,
-  onRemove,
-  isDefault = false,
-  isActive = false,
-  hasPermission = true,
-  type,
-}: EmailTemplateCardProps) {
-  const { t } = useTranslation(["Design"]);
-
-  const texts = useTranslatedParameters({ isDefault, isActive });
-
-  return (
-    <>
-      <div className="snippet-template-card">
-        <div className="snippet-template-card-header">
-          <Link to={href}>{name}</Link>
-          {hasPermission && Boolean(onRemove) && (
-            <ConfirmModal
-              type={ConfirmModalType.remove}
-              content={t("areUSureYouWantToDelete", {
-                name,
-                type: t("emailTemplate").toLowerCase(),
-              })}
-            >
-              {(confirm) => (
-                <button
-                  type="button"
-                  className="snippet-template-card-button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    confirm(onRemove);
-                  }}
-                >
-                  <Icon type="trash-alt" />
-                </button>
-              )}
-            </ConfirmModal>
-          )}
-        </div>
-        <div className={`mt-${isDefault ? "3" : "4"}`}>
-          {!!texts.length && <p className="mb-1">{texts}</p>}
-          <div className="d-flex flex-column">
-            <span className="snippet-template-card-subject">{subject}</span>
-            <p className="mb-0">
-              {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
-            </p>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

package/src/notification/email-template/card/index.tsx

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