Draft of foocart

draft.ts

// Usage

const cart = new Cart({
  priceTemplate: '{price} UAH',
  completeOrder(order) {
    return Promise.resolve({ success: true });
  },
  fetchTranslation(translation) {
    return Promise.resolve({});
  },
  onChange(output: ICartOutput) {
    render(cart, output, element);
  }
});

// Types

type OrderItemIDType = string | number;

enum SectionType {
  BUTTON = 'button',
  CART = 'cart',
  ORDER = 'order',
  COMPLETE = 'complete'
};

interface IOrder {
  items: Array<IOrderItem>,
  name: string,
  surname: string,
  email: string,
  telephone: string
};

interface IOrderItem {
  id: string,
  name: string,
  url: string,
  price: number
};

interface ICartProps {
  priceTemplate: string,
  completeOrder(order: IOrder): Promise<ICompleteResult>,,
  fetchTranslation(translation: string): Promise<ITranslation>,
  onChange(output: ICartOutput): void
};

interface ITranslation {};

interface ICartOutput {
  items: Array<ICartItem>,
  completeResult: ICompleteResult,
  section: SectionType
};

interface ICompleteResult {
  success: boolean,
  completed: boolean,
  pending: boolean,
  errors: object
};

// Class

class Cart {
  items: Array<IOrderItem> = [];
  completeResult: ICompleteResult = null;
  section: SectionType = SectionType.BUTTON;

  constructor(props: ICartProps) {
    this.props = props;
    // load translation
    // call change
  }
  
  render(): void {
    this.props.onChange({
      
    });
  }
  
  addItem(item: IOrderItem): Promise<IOrderItem> {
    // add item
    // call change
  }
  
  removeItem(id: OrderItemIDType): Promise<boolean> {
    // remove item
    // call change
  }
  
  removeAllItems(): Promise<boolean> {
    // remove all items
    // call change
  }
  
  getItems(): Primise<Array<IOrderItem>> {
    // return all items
  }
}

// Functions

function render(cart, output, element) {
  function handleAddItemClick(id: IOrderItemIDType) {}
  function handleRemoveItemClick(id: IOrderItemIDType) {}
  function handleCartButtonClick() {}
  function handleMakeOrderClick() {}
  function handleSubmitOrderClick() {}
  function handleCloseClick() {}
}

function fetchTranslation(translationId: string) {
  return import(`./translations/${translationId}.json`);
}

function embed(translation: string, props: ICartProps, element: HTMLElement) {
  fetchTranslation(translationId).then(translation => {
    const cart = new Cart({
      priceTemplate: '${price}',
      completeOrder(order) {
        return Promise.resolve({ success: true });
      },
      onChange(output: ICartOutput) {
        render(cart, output, translation as ITranslation, element);
      },
      ...props
    });
  });
}