@omniumretail/shared-resources 0.0.1

package/src/components/Form/FormSelectField/index.tsx

@@ -0,0 +1,16 @@
+import { Form, FormItemProps, Select } from 'antd';
+import { LabeledValue, SelectProps } from 'antd/lib/select';
+
+interface FormSelectFieldProps extends Omit<FormItemProps, "name"> {
+    name: string;
+    options: LabeledValue[];
+    selectProps?: SelectProps<LabeledValue>
+}
+
+export const FormSelectField = ({ options, selectProps, ...itemProps }: FormSelectFieldProps) => {
+    return (
+        <Form.Item { ...itemProps }>
+            <Select { ...selectProps } options={ options } />
+        </Form.Item>
+    )
+};

package/src/components/Form/index.ts

@@ -0,0 +1,2 @@
+export * from './FormInputField';
+export * from './FormSelectField';

package/src/components/Header/index.tsx

@@ -0,0 +1,20 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { icons,  } from '../../constants/Icons';
+import sitooIcon from '../../assets/sitoo.svg';
+import styles from './styles.module.scss';
+
+export interface HeaderProps {
+    onOpenMenu: () => void;
+}
+
+export const Header = ({ onOpenMenu }: HeaderProps) => (
+    <div className={ styles.header }>
+        <FontAwesomeIcon icon={ icons.faBars } onClick={ onOpenMenu } />
+
+        <div className={ styles.logoContainer }>
+            <img src={ sitooIcon } />
+        </div>
+
+        <FontAwesomeIcon icon={ icons.faUserTie } />
+    </div>
+);

package/src/components/Header/styles.module.scss

@@ -0,0 +1,16 @@
+
+.header {
+    height: 88px;
+    display: flex;
+    align-items: flex-end;
+    padding: 13px 20px;
+    border-bottom: 2px solid #E5E5E5;
+    box-sizing: border-box;
+}
+
+.logoContainer {
+    display: flex;
+    flex-grow: 1;
+    align-items: flex-end;
+    justify-content: center;
+}

package/src/components/Link/index.tsx

@@ -0,0 +1,21 @@
+import { Button as AntButton, ButtonProps } from 'antd';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+export interface CustomLinkProps extends ButtonProps {
+    iconAlignRight?: boolean;
+    linkSecondary?: boolean;
+}
+
+export const Link = (props: CustomLinkProps) => {
+    const { iconAlignRight, linkSecondary } = props;
+
+    const linkClasses = classNames({ 
+        [styles.iconAlignRight]: iconAlignRight,
+        [styles.linkSecondary]: linkSecondary,
+    }, [styles.link])
+
+    return (
+        <AntButton { ...props } className={ linkClasses } type={'link'} />
+    );
+};

package/src/components/Link/styles.module.scss

@@ -0,0 +1,24 @@
+.link {
+    display: inline-flex;
+    text-decoration: none;
+    height: auto;
+
+    color: var(--color-black);
+    font-size: var(--font-size-body-3);
+    line-height: 100%;
+    font-weight: 300;
+    font-style: var(--font-style-italic);
+}
+
+.linkSecondary {
+    color: var(--color-orange);
+    font-style: var(--font-style-normal);
+} 
+
+.iconAlignRight {
+    span:nth-child(2) {
+        margin-inline-end: 8px;
+        margin-inline-start: 0;
+        order: -1;
+    }
+}

package/src/components/Navigation/index.tsx

@@ -0,0 +1,30 @@
+import styles from './styles.module.scss';
+import { Link } from '../Link/index';
+import { ArrowLeftOutlined, HomeOutlined, LogoutOutlined } from '@ant-design/icons';
+
+export interface NavigationProps {
+    backLink?: boolean;
+    title: string;
+    homeLink?: boolean;
+    loginLink?: boolean;
+    onClickFunction?: () => void;
+}
+
+export const Navigation = (props: NavigationProps) => {
+    const { backLink, title, homeLink, onClickFunction, loginLink } = props;
+    
+    return (
+        <div className={styles.navigation}>
+            <div className={styles.columnLeft}>
+            { backLink && <Link href="#" icon={<ArrowLeftOutlined />} linkSecondary> Voltar </Link> }
+            </div>
+            <div className={styles.columnCenter}>
+                <h1 className={styles.title}>{title}</h1>
+            </div>
+            <div className={styles.columnRight}>
+                {homeLink && <Link href="" icon={<HomeOutlined />} linkSecondary iconAlignRight> Home </Link>}
+                {loginLink && <Link href="#" onClick={onClickFunction} icon={<LogoutOutlined />} linkSecondary iconAlignRight> Log Out</Link>}
+            </div>
+        </div>
+    )
+};

package/src/components/Navigation/styles.module.scss

@@ -0,0 +1,34 @@
+.navigation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    height: 75px;
+    gap: 0 24px;
+    position: relative;
+
+    @media(max-width: 767px) {
+        padding-top: 32px;
+    }
+
+    @media(min-width: 767px) {
+        padding: 0 40px;
+    }
+
+    .title {
+        font-size: var(--font-size-body-4);
+        font-weight: var(--font-weight-semibold);
+        text-transform: uppercase;
+    }
+
+    .columnCenter {
+        @media(max-width: 767px) {
+            position: absolute;
+            top: 12px;
+            margin: 0 auto;
+            left: 0;
+            right: 0;
+            text-align: center;
+        }
+    }
+}

package/src/components/Page/index.tsx

@@ -0,0 +1,35 @@
+
+import { Spin } from 'antd';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+
+interface PageContentProps extends PageBaseProps {
+    isLoading?: boolean;
+}
+
+interface PageBaseProps {
+    children?: React.ReactNode | React.ReactNode[];
+}
+
+export const Page = ({ children }: PageBaseProps) => {
+    return (
+        <div className={ styles.pageContainer }>
+            { children }
+        </div>
+    )
+};
+
+const PageHeader = ({ children  }: PageBaseProps) => (
+    <div className={ styles.header }>
+        { children }
+    </div>
+);
+
+const PageContent = ({ children, isLoading }: PageContentProps) => (
+    <div className={ classNames(styles.pageContent, { [styles.pageContentLoading]: isLoading }) }>
+        { isLoading ? <Spin /> : children }
+    </div>
+);
+
+Page.Header = PageHeader;
+Page.Content = PageContent;

package/src/components/Page/styles.module.scss

@@ -0,0 +1,26 @@
+$padding: 8.5px 20px;
+
+.header {
+    background: var(--white-color);
+    height: 37px;
+    border-bottom: 2px solid var(--disabled-input);
+    color: var(--app-footer-bg-color);
+    display: flex;
+    gap: 21px;
+    align-items: center;
+}
+
+.pageContent, .header {
+    padding: $padding;
+}
+
+.pageContainer {
+    height: 100%;
+}
+
+.pageContentLoading {
+    min-height: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/src/components/SharedContextProvider/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from '../../constants';
+import { StoreProvider } from '../../contexts/useStore';
+
+export interface SharedContextProviderProps {
+    providers?: React.JSXElementConstructor<unknown>[];
+    children?: React.ReactElement | React.ReactElement[];
+    disableInitialStoreRequest?: boolean;
+}
+
+const DefaultProviders = [
+    StoreProvider,
+    [QueryClientProvider, { client: queryClient }],
+] as React.JSXElementConstructor<unknown>[];
+
+const ContextProvider = ({ providers, children }) => providers.reduceRight(
+    (children, parent) => React.cloneElement(parent, { children: children }),
+    children
+);
+
+export const SharedContextProvider = ({ children, disableInitialStoreRequest }: SharedContextProviderProps) => {
+    return (
+        <QueryClientProvider client={ queryClient }>
+            <StoreProvider disableInitialStoreRequest={disableInitialStoreRequest}>
+                { children }
+            </StoreProvider>
+        </QueryClientProvider>
+    );
+};

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './SharedContextProvider';
+export * from './Header';
+export * from './Footer';
+export * from './Page';
+export * from './Button';
+export * from './BottomDrawer';
+export * from './Form';
+export * from './Link';
+export * from './Navigation';

package/src/constants/Icons.ts

@@ -0,0 +1,19 @@
+
+import {
+    faBars, faUserTie, faPlus, faXmark, faUser, faUserPlus,
+    faCartShopping, faChevronDown, faFilter, faSearch, faQrcode,
+} from '@fortawesome/free-solid-svg-icons'
+
+export const icons = {
+    faBars,
+    faUser,
+    faUserTie,
+    faPlus,
+    faUserPlus,
+    faXmark,
+    faCartShopping,
+    faChevronDown,
+    faFilter,
+    faSearch,
+    faQrcode,
+};

package/src/constants/QueryClient.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient();

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './QueryClient'
+export * from './Icons';

package/src/contexts/useStore.tsx

@@ -0,0 +1,20 @@
+
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useStoreQuery } from '../hooks/useStoreQuery';
+import { Store } from '../interfaces/Store';
+
+const StoreContext = React.createContext<Store | null>(null);
+
+const StoreProvider = ({ children, disableInitialStoreRequest }: { disableInitialStoreRequest?: boolean, children: React.ReactElement | React.ReactElement[] }) => {
+    const [params] = useSearchParams();
+    const { data: store } = useStoreQuery({ id: params.get('storeId') as string, enabled: !disableInitialStoreRequest });
+
+    return <StoreContext.Provider value={ store }> { children } </StoreContext.Provider>;
+};
+
+const useStoreContext = (): Store => {
+    return React.useContext(StoreContext) as Store;
+};
+
+export { StoreProvider, useStoreContext };

package/src/global.scss

@@ -0,0 +1,124 @@
+:root {
+    /* TODO: Update this code */
+    --primary-color: red;
+    --white-color: white;
+    --grad-bg-button-color: #DADADA;
+    --button-border-color: #707070;
+    --button-color: #37383A;
+    --customer-icon-color: #63B299;
+    --default-background-image-color: #D9D9D9;
+    --field-border-color: #D5D8D7;
+    --page-bg-color: #F9F9F9;
+    --page-border-color: #CECECE;
+    --page-footer-bg-color: #DEDEDE;
+    --app-footer-bg-color: #2C2D2E;
+    --app-footer-color: #F5F6F7;
+    --app-header-bg-1-color: #F7F7F7;
+    --app-header-bg-2-color: #E3E3E3;
+    --app-header-bg-3-color: #797979;
+    --app-header-bt-border-color: #090909;
+    --page-header-bg-color: #282c34;
+    --success-color: #64B298;
+    --error-color: #E05151;
+    --disabled-input: #E8E8E8;
+    --job-title-bg: #A83D3D;
+    --job-date-info-bg: #E0F0EA;
+    --job-date-edit-bg: #F0F0F0;
+    --header-border-color: #C7CAC9;
+    --grey: #E6E6E6;
+    --active-button-color: #35779D;
+    --sf-pro: normal normal bold 12px/14px SF Pro Text;
+    --delete-bg: #E15151;
+
+    /* New Code */
+    /*** Colors ***/
+    // Primary Colors
+    --color-black: #2c2d2e;
+    --color-black-rgb: 44, 45, 46;
+    --color-white: #FFFFFF;
+    --color-white-rgb: 255, 255, 255;
+
+    --color-orange: #FF674C;
+    --color-orange-rgb: 255, 103, 76;
+    
+    --color-blue: #09168B;
+    --color-blue-rgb: 9, 22, 139;
+
+    --color-grey-light: #D9D9D9;
+    --color-grey-light-rgb: 217, 217, 217;
+    --color-grey: #C7CAC9;
+    --color-grey-rgb: 199, 202, 201;
+    --color-grey-dark: #797979;
+    --color-grey-dark-rgb: 121, 121, 121;
+
+    // Helper Colors
+    --color-warning-400: #E36262;
+    --color-warning-500: #E05151;
+
+    --color-confirmation-400: #73b9a2;
+    --color-confirmation-600: #64B298;
+
+    /*** Font Styles ***/
+    // Font Family
+    --font-family-primary: SF Pro;
+
+    // Font Weight
+    --font-weight-light: 300;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    // Font Styles
+    --font-style-normal: normal;
+    --font-style-italic: italic;
+
+    // Font Sizes
+    --font-size-body-1: 10px;
+    --font-size-body-2: 12px;
+    --font-size-body-3: 14px;
+    --font-size-body-4: 16px;
+    --font-size-body-5: 18px;
+    --font-size-body-6: 20px;
+    
+    --font-size-h1: 46px;
+    --font-size-h2: 40px;
+    --font-size-h3: 36px;
+    --font-size-h4: 30px;
+    --font-size-h5: 24px;
+
+    --font-size-body-base: var(--font-size-body-4);
+    --font-size-label: var(--font-size-body-3);
+
+    /*** CTAs ***/
+    // Button Default
+    --button-default-background: var(--color-orange);
+    --button-default-text-color: var(--color-white);
+    --button-default-background-hover-color: rgba(var(--color-orange-rgb), .9);
+    --button-default-text-hover-color: var(--color-white);
+    --button-default-background-focus-color: var(--color-grey-dark);
+    --button-default-text-focus-color: rgba(var(--color-white-rgb), .8);
+
+    // Button Style 1
+    --button-style-1-background: var(--color-black);
+    --button-style-1-text-color: var(--color-white);
+    --button-style-1-background-hover-color: rgba(var(--color-black-rgb), .9);
+    --button-style-1-text-hover-color: var(--color-white);
+    --button-style-1-background-focus-color: var(--color-grey-dark);
+    --button-style-1-text-focus-color: rgba(var(--color-white-rgb), .8);
+
+    // Button Disabled 
+    --button-disabled-background-color: var(--color-grey-dark);
+    --button-disabled-default-text-color: var(--color-white);
+
+    // Link
+    --link-color: var(--color-orange);
+    --link-hover-color: var(--color-black);
+    --link-focus-color: rgba(var(--color-orange), .9);
+    --link-disabled-color: rgba(var(--color-grey), .2);
+
+    // Transition Speed
+    --transition-slow: .2s;
+    --transition: .6s;
+    --transition-fast: 1s;
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useApplicationDataQuery.hook';
+export * from './useStoreQuery';

package/src/hooks/useApplicationDataQuery.hook.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { ApplicationsByCategory, ResponseList } from "../interfaces";
+import { getAuth0 } from "../services/ApiService";
+
+export function useApplicationDataQueryHook() {
+    return useQuery(
+        ['APPLICATIONS_QUERY'],
+            () => getAuth0<ResponseList<"Categories", ApplicationsByCategory>>('/Applications/groupByCategory')
+    );
+}

package/src/hooks/useStoreQuery.ts

@@ -0,0 +1,13 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { Store } from "../interfaces/Store";
+import { get } from "../services";
+
+interface StoreQueryProps extends UseQueryOptions<Store> {
+    id: string;
+}
+
+const FixedStore = "C62A59C7-DE0C-4EF7-9A5F-1929A4F93F46";
+
+export const useStoreQuery = ({ id, ...options }: StoreQueryProps) => {
+    return useQuery(['STORE_QUERY', id], () => get(`/Stores/${id || FixedStore}`), options);
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+
+// Hacky way because of the hooks and the npm link
+export { Form } from 'antd';
+export * from './interfaces';
+export * from './services';
+export * from './components';
+export * from './constants';
+export * from './hooks';
+import './global.scss';

package/src/interfaces/ApplicationsByCategory.ts

@@ -0,0 +1,19 @@
+
+export interface ApplicationsByCategory {
+    Id: string;
+    Name: string;
+    Applications: ApplicationAttribute[];
+}
+
+export interface ApplicationAttribute {
+    Id: string;
+    Key: string;
+    Name: string;
+    Description: string;
+    URL: string;
+    ImageURL: string;
+    Status: string;
+    CreateDate: number;
+    UpdateDate: number;
+}
+

package/src/interfaces/Configuration.ts

@@ -0,0 +1,7 @@
+
+export interface Configuration {
+    ApiHost: string;
+    ApiPath: string;
+    token?: string;
+    tokenAuth0?: string;
+}

package/src/interfaces/Customer.ts

@@ -0,0 +1,23 @@
+
+export interface Customer {
+    Name: string;
+    CustomerId: string;
+    MemberNumber: string;
+    Email: string;
+    FirstName: string;
+    LastName: string;
+    Gender: string;
+    Birthday: string;
+    Jobtitle: string;
+    Address: CustomerAddress;
+    DoNotPhone: boolean;
+    DoNotEmail: boolean;
+    Mobilephone: string;
+}
+
+export interface CustomerAddress {
+    Address: string;
+    Zip: string;
+    City: string;
+    Country: string;
+}

package/src/interfaces/Product.ts

@@ -0,0 +1,36 @@
+
+export interface Product {
+    Id: string;
+    Reference: string;
+    CompanyId: string;
+    Name: string;
+    PriceSRP: number;
+    PriceCost: number;
+    VATId: string;
+    HierarchyId: string;
+    SupplierId: string;
+    IsStockCountEnabled: boolean;
+    MinOnlineStockQuantity: number;
+    IsNewArrival: boolean;
+    IsVerified: boolean;
+    Status: string;
+    Type: number;
+    Attributes: ProductAttribute[];
+    Items: ProductItem[];
+    CreateDate: number;
+    UpdateDate: number;
+    Recommendations: string[];
+    SimilarProducts: string[];
+    Images: string[];
+}
+
+export interface ProductItem {
+    SKU: string;
+    Barcodes: string[];
+    Attributes: ProductAttribute[];
+}
+
+export interface ProductAttribute {
+    Name: string;
+    Value: string;
+}

package/src/interfaces/ResponseList.ts

@@ -0,0 +1,6 @@
+
+export type ResponseList<K extends string, T> = {
+    [key in K]: T[];
+} & {
+    Count: number;
+};

package/src/interfaces/Store.ts

@@ -0,0 +1,8 @@
+
+export interface Store {
+    Id: string;
+    Name: string;
+    Address: string;
+    City: string;
+    ZipCode: string;
+}

package/src/interfaces/index.ts

@@ -0,0 +1,6 @@
+export * from './ResponseList';
+export * from './Configuration';
+export * from './Store';
+export * from './Product';
+export * from './Customer';
+export * from './ApplicationsByCategory';