@salla.sa/twilight 2.0.217 → 2.0.218

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight",
-  "version": "2.0.217",
+  "version": "2.0.218",
   "description": "Salla Theme Toolkit, Webcomponents, Events, Requests, Utils",
   "main": "dist/cjs/main.js",
   "module": "dist/esm/main.js",

package/types/api/cart.d.ts

@@ -1,4 +1,5 @@
 import {Nullable, TwilightResponse} from "../common";
+import {ProductPayload} from "./product";
 
 export interface itemOffer {
     discount: number,
@@ -80,12 +81,9 @@ export interface CartStatusResponse extends TwilightResponse {
     }
 }
 
-export interface AddItemPayload {
-    id: number;
-    quantity: 1 | number;
-    options: Nullable<{ [key: number]: [value: number | string | Array<{ [key: number]: [value: number] }>] }>;
-    notes: Nullable<string>;
-    file: Nullable<BinaryType | string>;
+export interface AddItemPayload extends ProductPayload {
+    notes?: Nullable<string>;
+    file?: Nullable<BinaryType | string>;
 }
 
 export default interface CartApi {

package/types/api/comment.d.ts

@@ -0,0 +1,12 @@
+import {TwilightResponse} from "../common";
+
+export interface SendCommentResponse extends TwilightResponse {
+    data: {
+        case: 'success' | 'error',
+        message: string,
+    }
+}
+
+export default interface CommentApi {
+    send: (data: { id: number, comment: string, type: 'product' | 'page' }) => Promise<SendCommentResponse>;
+}

package/types/api/currency.d.ts

@@ -0,0 +1,17 @@
+import {Currency, TwilightResponse} from "../common";
+
+export interface ChangeCurrencyResponse extends TwilightResponse {
+    data: {
+        code: 'SAR' | string,
+        symbol: string,
+    }
+}
+
+export interface ListCurrenciesResponse extends TwilightResponse {
+    data: Array<Currency>
+}
+
+export default interface CurrencyApi {
+    change: (currency_code: 'SAR' | 'USD' | string) => Promise<ChangeCurrencyResponse>;
+    list: () => Promise<ListCurrenciesResponse>;
+}

package/types/api/document.d.ts

@@ -0,0 +1,3 @@
+
+export default interface DocumentApi {
+}

package/types/api/feedback.d.ts

@@ -0,0 +1,56 @@
+import {Nullable, Product, Rating, TwilightResponse} from "../common";
+
+export interface SuccessFeedbackResponse extends TwilightResponse {
+    data: {
+        case: "success";
+        message: string;
+    }
+}
+
+export interface OrderDetailsResponse extends TwilightResponse {
+    data: {
+        id: number;
+        store: Nullable<{ feedback: FeedbackContent }>;
+        shipping: Nullable<{
+            feedback: FeedbackContent;
+            company: {
+                id: number;
+                name: string;
+                logo: Nullable<string>;
+            }
+        }>;
+        products: Array<{ feedback: FeedbackContent; product: Product; }>;
+        testimonials_enabled: boolean;
+        shipping_enabled: boolean;
+        products_enabled: boolean;
+        thanks_message: string;
+    }
+}
+
+export interface FeedbackContent {
+    content: string,
+    rating: Rating;
+    status?: 'approved' | 'pending';
+}
+
+export interface FeedbackStorePayload {
+    comment: string;
+    order_id: number;
+    rating: Rating;
+}
+
+export interface FeedbackProductsPayload {
+    products: Array<{ product_id: number; comment: string; rating: Rating; }>
+    order_id: number;
+}
+
+export interface FeedbackShippingPayload extends FeedbackStorePayload {
+    shipping_company_id: number;
+}
+
+export default interface FeedbackApi {
+    order: (order_id: number) => Promise<OrderDetailsResponse>;
+    store: (data: FeedbackStorePayload) => Promise<SuccessFeedbackResponse>;
+    products: (data: FeedbackProductsPayload) => Promise<SuccessFeedbackResponse>;
+    shipping: (data: FeedbackShippingPayload) => Promise<SuccessFeedbackResponse>;
+}

package/types/api/gift.js

@@ -0,0 +1,70 @@
+import baseApi from './baseApi'
+
+class GiftApi extends baseApi {
+    constructor(parent) {
+        super(parent);
+        this.namespace = 'gift';
+        this.endpoints = {
+            buy     : '{id}/buy-as-gift',
+        };
+        this.webEndpoints = ['buy'];
+
+        /**
+         * @see Object.prototype.canEventFireHook
+         */
+        this.hooksSelectores = {
+            buy   : 'gift::buy',
+        };
+
+        this.after_init();
+    }
+
+    /**
+     * Add item to cart
+     * 💡 If Quantity not passed will use 'quickAdd' ednpoint.
+     *
+     * @param {int|{element: Element, data: {}}|FormData|Object} prod_id
+     */
+    buy(prodId) {
+        let data = this.getGiftRequestData(prodId);
+
+        if (!data.id) {
+            salla.gift.event.buyingFailed('There is no "id"!');
+            return false;
+        }
+
+        return this.request(['buy', data.id], data.formData)
+            .then(function (response) {
+                salla.gift.event.buyingSucceeded(response, data.id);
+                return response;
+            })
+            .catch(function (error) {
+                salla.gift.event.buyingFailed(error, data.id);
+                throw error;
+            });
+    }
+
+
+    /**
+     * Extract ProductId & formData from Passed Object
+     * @param {int|Object|{element: Element, data: {}}} prodId
+     * @return {{formData: *, id: *}}
+     */
+     getGiftRequestData(prodId) {
+      /**
+       * if prodId is Object, get data from it;
+       * @see Object.prototype.getElementSallaData
+       */
+      let formData = prodId.data || (typeof prodId == 'object' ? prodId : undefined);
+
+      //try to get prodId from formData if it's existed
+      prodId = formData ? this.getPossibleValue(formData, ['prod_id', 'item_id', 'id']) : prodId;
+      formData = typeof formData == 'object' ? formData : undefined;
+      return {
+          id      : prodId,
+          formData: formData,
+      };
+  }
+}
+
+export default GiftApi;

package/types/api/loyalty.js

@@ -0,0 +1,50 @@
+import baseApi from './baseApi'
+
+class LoyalityApi extends baseApi {
+    constructor(parent) {
+        super(parent);
+        this.namespace = 'loyalty';
+        this.endpoints = {
+          exchange     : 'cart/prize/exchange_loyalty_point',
+        };
+        this.webEndpoints = ['exchange'];
+
+        /**
+         * @see Object.prototype.canEventFireHook
+         */
+        // prefix will be added dynamically, for example 'data-'
+        this.hooksSelectores = {
+          exchange   : 'loyalty::exchange',
+        };
+
+        this.after_init();
+    }
+
+    /**
+     * Add item to cart
+     * 💡 If Quantity not passed will use 'quickAdd' ednpoint.
+     *
+     * @param {int|{element: Element, data: {}}|FormData|Object} prod_id
+     */
+     exchange(id) {
+        let data = id.data||{id : id};
+
+        if (!data.id) {
+            salla.loyalty.event.exchangeFailed('There is no "id"!');
+            return false;
+        }
+        data.loyalty_prize_id = data.id;
+        return this.request('exchange', data)
+            .then(function (response) {
+                salla.loyalty.event.exchangeSucceeded(response, data.id);
+                return response;
+            })
+            .catch(function (error) {
+                salla.loyalty.event.exchangeFailed(error, data.id);
+                throw error;
+            });
+    }
+    
+}
+
+export default LoyalityApi;

package/types/api/offer.d.ts

@@ -0,0 +1,43 @@
+import {Category, Product, TwilightResponse} from "../common";
+
+type offerType = 'buy_x_get_y' | 'percentage' | 'fixed_amount';
+type paymentMethod = {
+    id: number;
+    slug: 'bank';
+    name: 'BankTransfer';
+};
+
+export interface Offer {
+    id: number;
+    name: string;
+    message: string;
+    expiry_date: string | '2022-02-22 00:00:00';
+    formatted_date: string;
+    offer_type: offerType;
+    applied_to: 'order' | 'category' | 'product' | 'paymentMethod';
+    buy: {
+        type: 'product' | 'category';
+        quantity: number;
+        products?: Product[];
+        categories?: Category[];
+        min_amount?: number; //when offer_type != 'buy_x_get_y'
+        min_items?: number; //when offer_type != 'buy_x_get_y'
+        payment_methods: paymentMethod[];
+    },
+    get: {
+        products?: Product[];
+        categories?: Category[];
+        type: 'product' | 'category';
+        discount_type: 'free-product' | 'percentage';
+        quantity?: number;//when discount_type == 'percentage'
+        discount_amount?: number; //when offer_type != 'buy_x_get_y' or get.discount_type !='free-product'
+    }
+}
+
+export interface OfferDetailsResponse extends TwilightResponse {
+    data: Offer[] | [];
+}
+
+export default interface OfferApi {
+    details: (product_id: number) => Promise<OfferDetailsResponse>;
+}

package/types/api/order.js

@@ -0,0 +1,94 @@
+import baseApi from './baseApi'
+
+class OrderApi extends baseApi {
+    constructor(parent) {
+        super(parent);
+        this.namespace = 'order';
+        this.endpoints = {
+            cancel : 'orders/cancel/{id}',
+            reOrder: 'reorder/{id}',
+            send   : 'orders/send/{id}'
+        };
+        this.endpointsMethods = {
+            reOrder: 'get',
+        };
+
+        /**
+         * @see Object.prototype.canEventFireHook
+         */
+        this.hooksSelectores = {
+            cancel : 'order::cancel',
+            reOrder: 'order::re.order',
+            show   : 'order::show',
+            send   : 'order::send',
+        };
+
+        this.after_init();
+    }
+
+    /**
+     * @param orderId
+     * @param url
+     */
+    show(orderId, url = null) {
+        //important for mobile apps
+        salla.event.dispatch('mobile::order.placed', {order_id: orderId || salla.config.get('page.id')});
+        location.href = url || location.href.replace('thankyou', 'order');
+    }
+
+    /**
+     * @param {int} orderId
+     * @return {Promise}
+     */
+    cancel(orderId) {
+        orderId = orderId || salla.config.get('page.id');
+        return this.request(['cancel', orderId], {params: {has_apple_pay: !!window.ApplePaySession}})
+            .then(function (response) {
+                salla.event.order.canceled(response, orderId);
+                return response;
+            })
+            .catch(function (error) {
+                salla.event.order.notCanceled(error, orderId);
+                throw error;
+            });
+    }
+
+    /**
+     * @param {int} orderId
+     * @return {Promise}
+     */
+    reOrder(orderId) {
+        orderId = orderId || salla.config.get('page.id');
+        return this.request(['reOrder', orderId])
+            .then(function (response) {
+                salla.storage.set('cart', {id: response.data.cart_id, user_id: salla.config.get('user.id')});
+                salla.event.order.reOrdered(response, orderId);
+                window.location.href = response.data.url;
+                return response;
+            })
+            .catch(function (error) {
+                salla.event.order.reOrderFailed(error, orderId);
+                throw error;
+            });
+    }
+
+    send(data) {
+        let order_id = this.getPossibleValue(data, ['id']) || salla.config.get('page.id');
+        if (!order_id || isNaN(order_id)) {
+            let message = 'There is no id!';
+            salla.order.event.notSent(message);
+            return this.errorPromise(message);
+        }
+        return this.request(['send', order_id], data)
+            .then(res => {
+                salla.event.order.sent(res, order_id);
+                return res;
+            }).catch(error => {
+                salla.event.order.notSent(error, order_id);
+                throw error;
+            })
+    }
+
+}
+
+export default OrderApi;

package/types/api/product.d.ts

@@ -0,0 +1,29 @@
+import {Nullable, TwilightResponse} from "../common";
+
+type ProductOption = { [key: number]: [value: number | string | number[]] };
+
+export interface ProductPayload {
+    id: number;
+    quantity: 1 | number;
+    options?: Nullable<ProductOption>;
+}
+
+export interface AvailabilityPayload {
+    id: number;
+    //💡 Following properties required for guests
+    email?: string;//required when request without mobile
+    country_code?: string | 'SA';//required when request without email
+    mobile?: string | '555555555';//required when request without email
+}
+
+export interface GetPriceResponse extends TwilightResponse {
+    data: {
+        price: number;
+        regular_price: number; // you can check if regular_price > price means there is a special price for this product.
+    }
+}
+
+export default interface ProductApi {
+    getPrice: (data: /*product_id*/number | ProductPayload) => Promise<GetPriceResponse>;
+    availabilitySubscribe: (product_id: number | AvailabilityPayload) => Promise<TwilightResponse>;
+}

package/types/api/scope.js

@@ -0,0 +1,54 @@
+import baseApi from './baseApi';
+
+class ScopeApi extends baseApi {
+    constructor(parent) {
+        super(parent);
+        this.namespace = 'scope';
+        this.endpoints = {
+            getAll             : '/scopes',
+            submit             : '/scope',
+        };
+
+        this.webEndpoints = ['getAll','submit'];
+
+        this.endpointsMethods = {
+            getAll    : 'get',
+        };
+
+        this.after_init();
+    }
+
+    /**
+     * Getting All Shipment Scopes Data
+     *
+     * @return {Promise}
+     */
+    getAll() {
+        return this.request('getAll', {'from' : 'header'})
+            .then(function (response) {
+                console.log(response);
+                return response;
+            })
+            .catch(function (error) {
+                throw error;
+            });
+    }
+
+    /**
+     * Submit Chosen scope
+     *
+     * @return {Promise}
+     */
+    submit(param) {
+        return this.request('submit', param)
+            .then(function (response) {
+                console.log(response);
+                return response;
+            })
+            .catch(function (error) {
+                throw error;
+            });
+    }
+}
+
+export default ScopeApi;

package/types/api/search.d.ts

@@ -0,0 +1,22 @@
+import {Nullable, Product, TwilightResponse} from "../common";
+
+type SortOption = {
+    id: "ourSuggest" | "bestSell" | "topRated" | "priceFromTopToLow" | "priceFromLowToTop";
+    name: string
+};
+
+export interface SearchResponse extends TwilightResponse {
+    data: Product[];
+    cursor: {
+        current: number;
+        previous: Nullable<string>;
+        next: Nullable<string>;
+        count: number;
+    };
+    features?: { sorting?: true };
+    sort_options: SortOption[];
+}
+
+export default interface SearchApi {
+    search: (query: string) => Promise<SearchResponse>;
+}

package/types/api/twilight.js

@@ -0,0 +1,39 @@
+import baseApi from './baseApi'
+import SallaInit from '../lib/salla-init'
+
+/**
+ * This class is different than other classes in api,
+ * the purpose of this class is to be able calling in method in it be firing an event from backend ex: twilight::init
+ */
+class TwilightApi extends baseApi {
+    constructor(parent) {
+        super(parent);
+        this.namespace = 'twilight';
+
+        this.hooksSelectores = {
+            init: 'twilight::init',
+            api : 'twilight::api', //will be fired almost in every request to backend via ajax
+        };
+        this.after_init();
+    }
+
+    /**
+     * @param {TwilightConfig} config
+     */
+    init(config) {
+
+        let events = config?.events;
+        if (!this.initiated) {
+            delete config.events;
+            new SallaInit(config);
+        }
+        events && salla.event.dispatchEvents(events);
+    }
+
+    api(payload) {
+        let events = payload?.events;
+        events && salla.event.dispatchEvents(events);
+    }
+}
+
+export default TwilightApi;

package/types/api/wishlist.d.ts

@@ -0,0 +1,7 @@
+import {TwilightResponse} from "../common";
+
+export default interface WishlistApi {
+    add: (product_id: number) => Promise<TwilightResponse>;
+    remove: (product_id: number) => Promise<TwilightResponse>;
+    toggle: (product_id: number) => Promise<TwilightResponse>;
+}

package/types/common.d.ts

@@ -1,3 +1,10 @@
+type Nullable<T> = T | undefined | null | '';
+type ProductType = 'product' | 'service' | 'group_products' | 'codes' | 'digital' | 'food' | 'donating';
+type Rating = 1 | 2 | 3 | 4 | 5;
+type RequestError = Error & { response: any }
+type RequestErrorEvent = (callback: (error: RequestError | string) => void) => void;
+type RequestErrorEventWithData<data> = (callback: (error: RequestError | string, data) => void) => void;
+
 export interface Price {
     amount: string;
     currency: string;
@@ -12,14 +19,43 @@ export interface TwilightResponse {
     error: Nullable<{
         message: Nullable<string | 'alert.invalid_fields'>,
         code: Nullable<any>
-        case: Nullable<string|'resend_counter'|'invalid_code'>
-        events:Nullable<string>
+        case: Nullable<string | 'resend_counter' | 'invalid_code'>
+        events: Nullable<string>
         fields: Nullable<{
             [key: string]: Array<string>
         }>
     }>
 }
 
-type Nullable<T> = T | undefined | null;
+export interface Currency {
+    name: string;
+    code: string | 'SAR';
+    symbol: string;
+}
+
+export interface Product {
+    id: number;
+    name: string;
+    type: ProductType;
+    promotion: {
+        title: Nullable<string>;
+        sub_title: Nullable<string>;
+    };
+    price: Price;
+    sale_price: Nullable<Price>;
+    regular_price: Price;
+    has_special_price: boolean;
+    status: 'sale' | 'out';
+    is_available: boolean;
+    sku: Nullable<string>;
+    currency: string | 'SAR';
+    url: string;
+    thumbnail: string;
+    calories: Nullable<number>;
+}
 
-type RequestError = Error & { response: any }
+export interface Category {
+    id: number;
+    name: string;
+    url: string;
+}

package/types/event/comment.d.ts

@@ -0,0 +1,7 @@
+import {RequestError} from "../common";
+import {SendCommentResponse} from "../api/comment";
+
+export default interface CommentEvent {
+    onAdded: (callback: (response: SendCommentResponse) => void) => void;
+    onAdditionFailed: (callback: (error: RequestError) => void) => void;
+}

package/types/event/currency.d.ts

@@ -0,0 +1,9 @@
+import {ChangeCurrencyResponse, ListCurrenciesResponse} from "../api/currency";
+import {RequestErrorEvent} from "../common";
+
+export default interface CurrencyEvent {
+    changed: (callback: (response: ChangeCurrencyResponse, currency: 'SAR' | string) => void) => void;
+    fetched: (callback: (response: ListCurrenciesResponse, currency: 'SAR' | string) => void) => void,
+    failed: RequestErrorEvent,
+    failedToFetch: RequestErrorEvent,
+}

package/types/event/document.d.ts

@@ -0,0 +1,21 @@
+import {Nullable, RequestError} from "../common";
+
+export interface requestPayload {
+    namespace: string | 'cart',
+    action: string | 'latest',
+    hook: string | 'latest',
+    url: string | 'cart/latest',
+    payload: {} | { params: {} },
+    method: 'get' | 'post' | 'put' | 'delete',
+    headers: Nullable<{}>,
+}
+
+export default interface DocumentEvent {
+    onClick: (selector: string | ((event) => void), callback?: (event) => void) => void;
+    onChange: (selector: string | ((event) => void), callback?: (event) => void) => void;
+    onSubmit: (selector: string | ((event) => void), callback?: (event) => void) => void;
+    onKeyup: (selector: string | ((event) => void), callback?: (event) => void) => void;
+    onLeaving: (event: BeforeUnloadEvent) => boolean; //return false to show alert 'Changes you made may not be saved.'
+    onRequest: (payload: requestPayload) => void; //💡handy when there is need to prevent request by throwing an error `throw 'stop the request';`.
+    onRequestFailed: (payload: requestPayload, error?: RequestError) => void;
+}

package/types/event/feedback.d.ts

@@ -0,0 +1,18 @@
+import {
+    SuccessFeedbackResponse,
+    OrderDetailsResponse,
+    FeedbackStorePayload,
+    FeedbackProductsPayload, FeedbackShippingPayload
+} from "../api/feedback";
+import {RequestErrorEventWithData} from "../common";
+
+export default interface FeedbackEvent {
+    onOrderFetched: (callback: (response: OrderDetailsResponse, order_id: number) => void) => void;
+    onOrderNotFetched: RequestErrorEventWithData</*order_id*/number>;
+    onStoreRated: (callback: (response: SuccessFeedbackResponse, data: FeedbackStorePayload) => void) => void;
+    onStoreFailed: RequestErrorEventWithData</*data*/FeedbackStorePayload>;
+    onProductRated: (callback: (response: SuccessFeedbackResponse, data: FeedbackProductsPayload) => void) => void;
+    onProductFailed: RequestErrorEventWithData</*data*/FeedbackProductsPayload>;
+    onShippingRated: (callback: (response: SuccessFeedbackResponse, data: FeedbackShippingPayload) => void) => void;
+    onShippingFailed: RequestErrorEventWithData</*data*/FeedbackShippingPayload>;
+}