@salla.sa/twilight 2.0.217 → 2.0.219

package/types/event/twilight.d.ts

@@ -0,0 +1,5 @@
+import {TwilightConfig} from "../tiwlight-config";
+
+export default interface TwilightEvent {
+    initiated: (callback: (config: TwilightConfig) => void) => void;
+}

package/types/event/wishlist.d.ts

@@ -0,0 +1,8 @@
+import {RequestErrorEventWithData, TwilightResponse} from "../common";
+
+export default interface WishlistEvent {
+    onAdded: (callback: (response: TwilightResponse, product_id: number) => void) => void;
+    onRemoved: (callback: (response: TwilightResponse, product_id: number) => void) => void;
+    onAdditionFailed: RequestErrorEventWithData</*product_id*/number>;
+    onRemovingFailed: RequestErrorEventWithData</*product_id*/number>;
+}

package/types/helpers/app-helpers.d.ts

@@ -0,0 +1,31 @@
+import {Nullable} from "../common";
+
+type ElementOrSelector = string | HTMLElement;
+type EventTypes = 'click' | 'keyup' | 'input' | 'change' | string;
+export default interface AppHelpers {
+    toggleClassIf: (selector: string, classes1: string | Array<string>, classes2: string | Array<string>, callback: (element: HTMLElement) => boolean) => AppHelpers;
+    toggleElementClassIf: (element: HTMLElement, classes1: string | Array<string>, classes2: string | Array<string>, callback: (element: HTMLElement) => boolean) => AppHelpers;
+
+    isValidEmail: (email: string) => boolean;
+
+    element: (selector: ElementOrSelector) => Nullable<HTMLElement>;
+    watchElement: (name: string, selector: ElementOrSelector) => AppHelpers;
+    watchElements: (elements: { [key: string]: [value: ElementOrSelector] }) => AppHelpers;
+    hideElement: (element: ElementOrSelector) => AppHelpers;
+    showElement: (element: ElementOrSelector) => AppHelpers;
+    //💡 you can pass one or multi classes: this.removeClass(element, 'class_1', 'class_2', ...)
+    removeClass: (element: ElementOrSelector, ...className: string[]) => AppHelpers;
+    addClass: (element: ElementOrSelector, ...className: string[]) => AppHelpers;
+    //💡instead of: `document.querySelectorAll('.test').forEach(element=>{...})`
+    // you can use: `this.all('.test', element=>{...})`
+    all: (element: ElementOrSelector, callback: (element: HTMLElement) => void) => AppHelpers;
+
+    //💡instead of: `document.querySelectorAll('.test').forEach(el => el.addEventListener('keyup', callback));`
+    // you can use: `this.on('.test', 'keyup', callback)`
+    // or can use: `this.onKeyUp('.test', callback)`
+    on: (eventType: EventTypes, element: ElementOrSelector, callback: EventListener, options?: AddEventListenerOptions) => AppHelpers;
+    onClick: (element: ElementOrSelector, callback: EventListener) => AppHelpers;
+    onKeyUp: (element: ElementOrSelector, callback: EventListener) => AppHelpers;
+    onEnter: (element: ElementOrSelector, callback: EventListener) => AppHelpers;
+    debounce: (callback: () => unknown) => (...data: Nullable<any>) => Promise<unknown>
+}

package/types/helpers/salla-helpers.d.ts

@@ -1,21 +1,29 @@
 import {Price} from "../common";
 
-export interface SallaHelpers {
+export type UrlHelper = (path: string) => string; //add any path to current url, ex: `salla.url('cart?anything=data')` output => `https://store_domain.com/cart?anything=data`
+export default interface SallaHelpers {
     //Numbers helpers
     digitsOnly: (num: string | number) => number,
     inputDigitsOnly: (input: string | HTMLInputElement) => number,
-    number: () => number,
+    number: (num: number) => number | string,
     money: (num: number | Price) => string,
 
     //Nested objects helpers
-    setNested: () => number,
-    getNested: () => number,
-    inputData: () => number,
+    setNested: (object: Object, key: `${string}.${string}`, value: any) => Object,
+    getNested: (object: Object, key: `${string}.${string}`, default_?: any) => any,
+    /**
+     * @example
+     * 1- initial data:         `let data={items:{total:100,...}};`
+     * 2- input:                `<input name="items[total]" value="new-value">`
+     * 3- getData as Object:    `salla.helpers.inputData('items[total]', 'new-value', data)`
+     * 4- output:               `{name: items: value:{total:[100, 'new-value'],...}}`
+     */
+    inputData: (inputName: `${string}[${null | string | number}]`, inputValue: any, data?: Object) => { name: string, value: string | number | Object | string[] | number[] },
 
     //Url helpers
-    url: () => string,
-    addParamToUrl: () => string,
+    url: UrlHelper,
+    addParamToUrl: (key: string, value: string | number) => string, //`salla.helpers.addParamToUrl('lang','ar')` => `https://store_domain.com/cart?lang=ar`
 
-    //other
-    debounce: () => number,
+    //for advance usage:
+    debounce: (callback: Function, delay: number) => (...[]) => Promise<unknown>,
 }

package/types/index.d.ts

@@ -1,99 +1,40 @@
-import CartApi from "./api/cart";
-import {SallaConfig} from "./lib/salla-config";
-import {Axios} from "axios";
-import {Price} from "./common";
-import {SallaHelpers} from "./helpers/salla-helpers";
-import CartEvent from "./event/cart";
-import CouponEvent from "./event/coupon";
-import CouponApi from "./api/coupon";
-import AuthApi from "./api/auth";
-import AuthEvent from "./event/auth";
-import OrderApi from "./api/order";
-import OrderEvent from "./event/order";
-import ProfileApi from "./api/profile";
-import ProfileEvent from "./event/profile";
+import SallaApi, {ApiActionName} from './api';
+import SallaEvent from './event';
+import SallaActions from "./actions";
 
-export * from "./all";
+import SallaConfig from "./lib/salla-config";
+import {Price} from "./common";
+import SallaHelpers, {UrlHelper} from "./helpers/salla-helpers";
+import AppHelpers from "./helpers/app-helpers";
+import SallaNotify, {Logger} from "./lib/salla-notify";
+import SallaStorage from "./lib/salla-storage";
+import SallaLang from "./lib/salla-lang";
+import SallaCookie from "./lib/salla-cookie";
+import SallaForm from "./lib/salla-form";
 
-export default interface Salla {
-    notify: string;
-    api: Axios | {
-        cart: CartApi,
-        auth: AuthApi;
-        gift: any;
-        order: OrderApi;
-        offer: any;
-        search: any;
-        coupon: CouponApi;
-        comment: any;
-        loyalty: any;
-        product: any;
-        profile: ProfileApi;
-        currency: any;
-        document: any;
-        feedback: any;
-        twilight: any;
-        wishlist: any;
-        getHeaders: () => {
-            "Accept": string | 'application/json, text/plain, */*',
-            "X-Requested-With": 'XMLHttpRequest',
-            "S-SOURCE": 'twilight',
-            "Store-Identifier"?: number,
-            "currency"?: string | 'SAR',
-            "accept-language"?: string | 'ar',
-            "Authorization"?: string
-        }
-    };
-    event: {
-        auth: AuthEvent,
-        cart: CartEvent,
-        gift: any;
-        order: OrderEvent;
-        offer: any;
-        search: any;
-        coupon: CouponEvent;
-        comment: any;
-        loyalty: any;
-        product: any;
-        profile: ProfileEvent;
-        currency: any;
-        document: any;
-        feedback: any;
-        twilight: any;
-        wishlist: any;
+export default interface Salla extends SallaActions {
+    api: SallaApi;
+    event: SallaEvent;
 
-    };
-    infiniteScroll: any;
-    helpers: SallaHelpers;
     config: SallaConfig;
-    storage: any;
-    form: any;
+    storage: SallaStorage;
+    cookie: SallaCookie;
+    lang: SallaLang;
 
-    //Aliases
-    cart: CartApi & { api: CartApi, event: CartEvent };
-    auth: AuthApi & { api: AuthApi, event: AuthEvent };
-    gift: { api: any, event: any };
-    order: OrderApi & { api: OrderApi, event: OrderEvent };
-    offer: { api: any, event: any };
-    search: { api: any, event: any };
-    coupon: CouponApi & { api: CouponApi, event: CouponEvent };
-    comment: { api: any, event: any };
-    loyalty: { api: any, event: any };
-    product: { api: any, event: any };
-    profile: ProfileApi & { api: ProfileApi, event: ProfileEvent };
-    currency: { api: any, event: any };
-    document: { api: any, event: any };
-    feedback: { api: any, event: any };
-    twilight: { api: any, event: any };
-    wishlist: { api: any, event: any };
+    notify: SallaNotify;
+    log: Logger;
+    success: (message: string, data?: any) => void;
+    error: (message: string, data?: any) => void;
 
-    log: (message: string | any) => void;
-    success: (message: string) => void;
-    error: (message: string) => void;
-    lang: any;
-    onReady: any; //don't relay on it because Salla may not existed yet
-    AppHelpers: any;
+    helpers: SallaHelpers;
+    AppHelpers: AppHelpers;
+    form: SallaForm;
     money: (money: number | Price) => string;
+    url: UrlHelper;
+
+    onReady: (callback: (event: Event) => unknown) => void; //don't relay on it because Salla may not existed yet
+    init: (config: SallaConfig) => void; // an alias for `salla.twilight.init(config)`
+    call: (action: ApiActionName | string) => any;
 }
 
 declare global {

package/types/lib/salla-config.ts

@@ -1,12 +1,50 @@
-import {TwilightConfig} from "../tiwlight-config";
-import {Price} from "../common";
+import {Language, TwilightConfig} from "../tiwlight-config";
+import {Currency, Nullable, Price} from "../common";
 
-export interface SallaConfig {
+export type ConfigKey =
+    '_token'
+    | 'maintenance'
+    | 'debug'
+    | 'events'
+    | 'store.url'
+    | 'store.id'
+    | 'store.logo'
+    | 'store.name'
+    | 'store.api'
+    | 'user.type'
+    | 'user.email'
+    | 'user.mobile'
+    | 'user.language_code'
+    | 'user.currency_code'
+    | 'user.country_code'
+    | 'theme.name'
+    | 'theme.mode'
+    | 'theme.translations_hash'
+    | 'theme.color'
+    | 'theme.color.primary'
+    | 'theme.color.text'
+    | 'theme.color.is_dark'
+    | 'theme.color.reverse_primary'
+    | 'theme.color.reverse_text'
+    | 'languages.ar'
+    | 'languages.en'
+    | '`languages.${string}`'
+    | 'currencies.SAR'
+    | 'currencies.USD'
+    | '`currencies.${string}`'
+    | 'page.title'
+    | 'page.slug'
+    | 'page.id';
+export default interface SallaConfig {
     merge: (config: TwilightConfig) => SallaConfig;
-    set: (key: string, value: string) => SallaConfig;
-    get: (key: string, default_?: any) => any;
+    set: (key: ConfigKey | string, value: string) => SallaConfig;
+    get: (key: ConfigKey | string, default_?: any) => any;
     isRTL: () => boolean;
     money: (money: number | Price) => string;
     isUser: () => boolean;
     isGuest: () => boolean;
+    languageCode: () => string | 'ar';
+    currency: (code: Nullable<string | 'SAR'>) => Currency;
+    currencies: () => Promise<{ SAR: Currency, [code: string]: Currency }>;
+    languages: () => Promise<{ ar: Language, [code: string]: Language }>;
 }

package/types/lib/salla-cookie.d.ts

@@ -0,0 +1,5 @@
+export default interface SallaCookie {
+    get: (key: string) => string;
+    set: (key: string, value: string | number | Array<string | number> | '', days?: number) => SallaCookie;
+    remove: (key: string) => SallaCookie;
+}

package/types/lib/salla-form.d.ts

@@ -0,0 +1,3 @@
+export default interface SallaForm {
+    submit: () => Promise<any>;
+}

package/types/lib/salla-lang.d.ts

@@ -0,0 +1,14 @@
+import Lang from 'lang.js'
+
+type Replacements = { [key: string]: string }
+
+/**
+ * @Example
+ * salla.lang.get('pages.cart.free_shipping_alert',{amount:salla.money(100)})
+ */
+export default interface SallaLang extends Lang {
+    translationsLoaded: boolean;
+    onLoaded: (callback: Function) => void;
+    get: (key: string, replacements?: Replacements, locale?: string | 'ar') => string;
+    set: (key: string, message: string) => SallaLang;
+}

package/types/lib/salla-notify.d.ts

@@ -0,0 +1,14 @@
+export type NotifyType = 'error' | 'success' | 'info' | string;
+export type Notifier = (message: string, type: NotifyType, data?: object | any) => void | unknown;
+export type Logger = (...data: string[]) => void | unknown;
+export default interface SallaNotify {
+    fire: (message: string, type: NotifyType, data?: object | any) => Notifier; //default is just `alert(message)
+    setNotifier: (callback: Notifier) => void;// handy to override notifier used by salla.notify.fire(salla.success, salla.error, salla.info)
+    log: Logger; //default is just `console.log(...data)`
+    setLogger: (callback: Logger) => void;// handy to override logger used by salla.log()
+    error: (message: string, data?: object | any) => Notifier; //an alias for fire(message, salla.notify.types.error, data)
+    success: (message: string, data?: object | any) => Notifier; //an alias for fire(message, salla.notify.types.success, data)
+    info: (message: string, data?: object | any) => Notifier; //an alias for fire(message, salla.notify.types.info, data)
+    sallaInitiated;
+    types: { error: 'error', success: 'success', info: 'info' }; //handy to be overridden, to be passed via salla.error, salla.info, salla.success second argument when calling salla.notify.fire(message, /*{type}*/, data)
+}

package/types/lib/salla-storage.d.ts

@@ -0,0 +1,13 @@
+import localStore from 'store';
+
+/**
+ * 💡 Notice that you can use dotted key for setting or getting values, ex:
+ *  - salla.storage.set('cart.id',1)
+ *  - `salla.storage.get('cart.id')` or `salla.storage.get('cart')?.id`
+ */
+export default interface SallaStorage {
+    store: localStore;
+    set: (key: string, value: any) => any;
+    get: (key: string, defaultValue?: any) => any | undefined;
+    remove: (key: string) => void;
+}

package/types/tiwlight-config.d.ts

@@ -1,25 +1,4 @@
-export interface Store {
-    id: number;
-    logo: string;
-    name: string;
-    url: string;
-    api: string;
-}
-
-export interface User {
-    type: string;
-    email?: any;
-    mobile?: any;
-    language: string;
-    currency: string;
-    country_code: string;
-}
-
-export interface Theme {
-    name: string;
-    mode: string;
-    translations_hash: string;
-}
+import {Currency} from "./common";
 
 export interface Language {
     name: string;
@@ -29,41 +8,62 @@ export interface Language {
     country_code: string;
 }
 
-export interface Languages {
-    ar: Language;
-
-    [key: string]: Language;
-}
-
-export interface Currency {
-    code: string;
-    name: string;
-    symbol: string;
-    amount: number;
-    country_code: string;
-}
-
-export interface Currencies {
-    SAR: Currency;
-
-    [key: string]: Currency;
-}
-
-export interface Page {
-    title: string;
-    slug: string;
-    id?: number;
-}
+type Installment = 'tabby_installment' | 'tamara_installment' | 'spotii_pay';
+type PaymentName = Installment | 'mada' | 'credit_card' | 'paypal' | 'bank' | 'stc_pay' | 'apple_pay' | 'knet';
 
 export interface TwilightConfig {
-    _token: string;
-    store: Store;
-    maintenance: boolean;
-    debug: boolean;
-    user: User;
-    theme: Theme;
-    languages: Languages;
-    currencies: Currencies;
-    page: Page;
-    events: { [event_name: string]: any };
+    _token?: string;
+    maintenance?: boolean;
+    debug?: boolean;
+    events?: { [event_name: string]: any };
+    store: {
+        url: string;
+        id?: number;
+        logo?: string;
+        name?: string;
+        api?: string;
+        settings?: {
+            auth: {
+                email_allowed: boolean;
+                mobile_allowed: boolean;
+                is_email_required: boolean;
+            };
+            arabic_numbers_enabled: boolean;
+            payments: PaymentName[];
+            installments: Installment[];
+        };
+    };
+    user?: {
+        type?: 'user' | 'guest';
+        email?: any;
+        mobile?: any;
+        language_code?: string;
+        currency_code?: string;
+        country_code?: string;
+    };
+    theme?: {
+        name?: string;
+        mode?: string;
+        translations_hash?: string;
+        color?: {
+            primary: string | '#5cd5c4';
+            text: string | '#ffffff';
+            is_dark: boolean;
+            reverse_primary: string | '#5cd5c4';
+            reverse_text: string | '#005544';
+        }
+    };
+    languages?: {
+        ar?: Language;
+        [key: string]: Language;
+    };
+    currencies?: {
+        SAR?: Currency;
+        [key: string]: Currency;
+    };
+    page?: {
+        title?: string;
+        slug?: string;
+        id?: number;//available in product.single, customer.orders.single, cart, thank-you, page-single
+    };
 }

package/types/all.d.ts

@@ -1,5 +0,0 @@
-export * from './api/cart/cart-details-response';
-export * from './api/cart';
-export * from './api/coupon';
-export * from './api/cart/cart-status-response';
-export * from './api/order/re-order-response';