126 |
{ReactUtils.sloc("admin.config.remote.share")}
127 |
{
22 | ...component,
23 | initialState: () => {
24 | language: "EN",
25 | deviceId: "",
26 | now: None,
27 | editingDate: false,
28 | },
29 | didMount: self => {
30 | self.send(LoadConfig);
31 | ();
32 | },
33 | reducer: (action, state) =>
34 | switch (action) {
35 | | LoadConfig =>
36 | ReasonReact.SideEffects(
37 | (
38 | self => {
39 | let cfg = Config.App.get();
40 | Js.log(cfg);
41 | self.send(ConfigLoaded(cfg));
42 | }
43 | ),
44 | )
45 | | ShowDateTime => ReasonReact.Update({...state, editingDate: true})
46 | | ConfigLoaded(config) =>
47 | ReasonReact.Update({
48 | ...state,
49 | language: config.language,
50 | deviceId: config.deviceId,
51 | now: config.now,
52 | })
53 | | SaveConfig =>
54 | ReasonReact.SideEffects(
55 | (
56 | _self =>
57 | Config.App.set({
58 | language: state.language,
59 | deviceId: state.deviceId,
60 | now: state.now,
61 | })
62 | ),
63 | )
64 | | LanguageChanged(newVal) =>
65 | ReasonReact.Update({...state, language: newVal})
66 | | NowChanged(newVal) =>
67 | ReasonReact.Update({...state, editingDate: false, now: newVal})
68 | | DeviceIdChanged(newVal) =>
69 | ReasonReact.Update({...state, deviceId: newVal})
70 | },
71 | render: self => {
72 | let handleDateChange = moment =>
73 | self.send(NowChanged(Some(moment |> MomentRe.Moment.valueOf)));
74 |
75 |
{ReactUtils.sloc("admin.config.application.header")}
76 |
140 |
;
146 | },
147 | };
148 |
--------------------------------------------------------------------------------
/src/components/orderTaking/OrderHelper.re:
--------------------------------------------------------------------------------
1 | let saveOrder = (order: Order.orderVm, onFinish: Order.orderVm => unit) : unit => {
2 | Js.Console.log("orderActions:: Persisting order....");
3 | switch (order.id) {
4 | | None =>
5 | OrderStore.add({
6 | discounts: order.discounts,
7 | customerName: order.customerName,
8 | orderItems: order.orderItems,
9 | paid: order.paid,
10 | })
11 | |> Js.Promise.then_(freshOrder => {
12 | onFinish(freshOrder |> Order.vmFromExistingOrder);
13 | Js.Promise.resolve(
14 | Js.Console.log("orderActions:: Added new order."),
15 | );
16 | })
17 | |> ignore;
18 | ();
19 | | Some(_id) =>
20 | [%bs.debugger];
21 | let o: Order.updateOrder = Order.vmToUpdateOrder(order);
22 | OrderStore.update(o)
23 | |> Js.Promise.then_(updatedOrder => {
24 | onFinish(updatedOrder |> Order.vmFromExistingOrder);
25 | Js.Promise.resolve(
26 | Js.Console.log("orderActions:: Updated existing order."),
27 | );
28 | })
29 | |> ignore;
30 | ();
31 | };
32 | };
33 |
34 | let payOrder =
35 | (
36 | cashier: option(Cashier.t),
37 | order: Order.orderVm,
38 | _method: PaymentMethod.t,
39 | _externalId: string,
40 | onFinish: Order.orderVm => unit,
41 | )
42 | : unit => {
43 | let totals =
44 | OrderItemCalculation.getTotals(order.discounts, order.orderItems);
45 | let paidOrder = {
46 | ...order,
47 | paid:
48 | Some({
49 | on: ConfigurableDate.now(),
50 | by:
51 | switch (cashier) {
52 | | None => "n/a"
53 | | Some(c) => c.name
54 | },
55 | subTotal: totals.subTotal,
56 | tax: totals.tax,
57 | discount: totals.discounts,
58 | total: totals.total,
59 | externalId: "",
60 | method: PaymentMethod.default,
61 | }),
62 | };
63 | WebhookEngine.getWebhooks(BeforeOrderPaid, Order)
64 | |> WebhookEngine.fire(paidOrder |> Order.fromVm |> Order.toJs)
65 | |> Js.Promise.then_((responses: list(WebhookEngine.response)) => {
66 | let awaitResponses =
67 | responses
68 | |> List.map((r: WebhookEngine.response) =>
69 | switch (r.webhook.behavior, r.payload) {
70 | | (Webhook.Behavior.AwaitResponse, Some(payload)) =>
71 | Js.log(payload);
72 | [
73 | payload
74 | |> WebhookEngine.unsafeConvert
75 | |> Order.mapOrderFromJs
76 | |> Order.toVm,
77 | ];
78 | | (_, _) => []
79 | }
80 | )
81 | |> List.concat;
82 | (
83 | switch (awaitResponses |> List.length) {
84 | | 0 => paidOrder
85 | | _ => awaitResponses |. List.nth(0)
86 | }
87 | )
88 | |> Js.Promise.resolve;
89 | })
90 | |> Js.Promise.then_((orderFromWebhook: Order.orderVm) =>
91 | saveOrder(
92 | orderFromWebhook,
93 | (vm: Order.orderVm) => {
94 | WebhookEngine.getWebhooks(OrderPaid, Order)
95 | |> WebhookEngine.fire(
96 | orderFromWebhook |> Order.fromVm |> Order.toJs,
97 | )
98 | |> ignore;
99 | onFinish(vm);
100 | },
101 | )
102 | |> Js.Promise.resolve
103 | )
104 | |> ignore;
105 | ();
106 | };
107 |
108 | let returnOrder =
109 | (
110 | cashier: Cashier.t,
111 | order: Order.orderVm,
112 | onFinish: Order.orderVm => unit,
113 | ) =>
114 | saveOrder(
115 | {
116 | ...order,
117 | returned: Some({on: ConfigurableDate.now(), by: cashier.name}),
118 | },
119 | (vm: Order.orderVm) => {
120 | WebhookEngine.getWebhooks(OrderReturned, Order)
121 | |> WebhookEngine.fire(vm |> Order.fromVm |> Order.toJs)
122 | |> ignore;
123 | onFinish(vm);
124 | },
125 | );
126 |
127 | let removeOrder = (order: Order.orderVm, onFinish: Order.orderVm => unit) =>
128 | switch (order.id) {
129 | | None => onFinish(order)
130 | | Some(id) =>
131 | OrderStore.remove(~id)
132 | |> Js.Promise.then_(() => {
133 | onFinish(order);
134 | Js.Promise.resolve(Js.Console.log("Removed order."));
135 | })
136 | |> ignore;
137 | ();
138 | };
139 |
140 | let buildOrderItem = (product: Product.t, id: string) : OrderItem.t => {
141 | id,
142 | quantity: 1,
143 | notes: [],
144 | sku: product.sku,
145 | name: product.name,
146 | suggestedPrice: product.suggestedPrice,
147 | addedOn: ConfigurableDate.now(),
148 | salePrice: product.suggestedPrice,
149 | taxCalculation: product.taxCalculation,
150 | };
151 |
152 | let buildNewOrder = (customerName: string) : Order.orderVm => {
153 | let order: Order.orderVm = {
154 | id: None,
155 | customerName,
156 | orderItems: [],
157 | createdOn: ConfigurableDate.now(),
158 | discounts: [],
159 | paid: None,
160 | returned: None,
161 | lastUpdated: None,
162 | removed: false,
163 | meta: None,
164 | };
165 | /* order |> Order.fromVm |> WebhookEngine.fireForOrder(OrderStarted) |> ignore; */
166 | order;
167 | };
168 |
169 | let getOrderVm = orderId =>
170 | OrderStore.get(orderId)
171 | |> Js.Promise.then_(order => {
172 | let vm = Order.vmFromExistingOrder(order);
173 | Js.Promise.resolve(vm);
174 | });
--------------------------------------------------------------------------------
/src/components/orderTaking/PayScreen.re:
--------------------------------------------------------------------------------
1 | [@bs.val] external alert : string => unit = "";
2 |
3 | open OrderHelper;
4 |
5 | type doing =
6 | | GettingCashier
7 | | ChoosingPaymentMethod
8 | | Paying;
9 |
10 | type state = {
11 | doing,
12 | order: Order.orderVm,
13 | method: option(PaymentMethod.t),
14 | externalId: string,
15 | cashier: option(Cashier.t),
16 | };
17 |
18 | type action =
19 | | LoadOrder(string)
20 | | OrderLoaded(Order.orderVm)
21 | | PayOrder
22 | | SelectPaymentMethod((PaymentMethod.t, string))
23 | | PaymentMethodInvalid
24 | | ExternalIdChanged(string)
25 | | CashierChanged(option(Cashier.t))
26 | | Cancel;
27 |
28 | let component = ReasonReact.reducerComponent("PayScreen");
29 |
30 | let make = (~orderId, ~onPay, ~onCancel, _children) => {
31 | ...component,
32 | didMount: self => {
33 | self.send(LoadOrder(orderId));
34 | ();
35 | },
36 | reducer: (action, state) =>
37 | switch (action) {
38 | | PaymentMethodInvalid =>
39 | ReasonReact.Update({...state, doing: ChoosingPaymentMethod})
40 | | SelectPaymentMethod((method, externalId)) =>
41 | ReasonReact.Update({
42 | ...state,
43 | method: Some(method),
44 | externalId,
45 | doing: GettingCashier,
46 | })
47 |
48 | | ExternalIdChanged(id) => ReasonReact.Update({...state, externalId: id})
49 | | LoadOrder(orderId) =>
50 | ReasonReact.SideEffects(
51 | (
52 | self =>
53 | getOrderVm(orderId)
54 | |> Js.Promise.then_(vm => {
55 | self.send(OrderLoaded(vm));
56 | Js.Promise.resolve(vm);
57 | })
58 | |> ignore
59 | ),
60 | )
61 | | PayOrder =>
62 | ReasonReact.SideEffects(
63 | (
64 | _self =>
65 | switch (state.method) {
66 | | None => ()
67 | | Some(method) =>
68 | payOrder(
69 | state.cashier, state.order, method, state.externalId, paidOrder =>
70 | onPay(state.cashier, paidOrder)
71 | )
72 | }
73 | ),
74 | )
75 | | CashierChanged(cashier) =>
76 | ReasonReact.Update({
77 | ...state,
78 | cashier,
79 | doing: cashier !== None ? Paying : ChoosingPaymentMethod,
80 | })
81 | | OrderLoaded(order) => ReasonReact.Update({...state, order})
82 | | Cancel => ReasonReact.SideEffects((_ => onCancel(state.order)))
83 | },
84 | initialState: () => {
85 | order: buildNewOrder(""),
86 | method: None,
87 | externalId: "",
88 | cashier: None,
89 | doing: ChoosingPaymentMethod,
90 | },
91 | render: self => {
92 | let cashier =
93 |
94 | (ReactUtils.sloc("cashier"))
95 | (ReactUtils.s(": "))
96 | (
97 | ReactUtils.s(
98 | switch (self.state.cashier) {
99 | | None => "n/a"
100 | | Some(cashier) => cashier.name
101 | },
102 | )
103 | )
104 |
;
105 | let paymentMethod =
106 |
107 | (ReactUtils.sloc("paymentMethod"))
108 | (ReactUtils.s(": "))
109 | (
110 | ReactUtils.sloc(
111 | switch (self.state.method) {
112 | | None => "none"
113 | | Some(m) => m.name
114 | },
115 | )
116 | )
117 |
;
118 |
119 |
120 |
121 |
128 |
129 | (ReactUtils.s(self.state.order.customerName))
130 |
131 |
132 |
133 |
137 | (
138 | switch (self.state.doing) {
139 | | ChoosingPaymentMethod =>
140 |
143 | self.send(SelectPaymentMethod((method, externalId)))
144 | )
145 | onInvalid=(_ => self.send(PaymentMethodInvalid))
146 | />
147 | | GettingCashier =>
148 |
149 | paymentMethod
150 |
{
154 | self.send(CashierChanged(None));
155 | alert("Please enter a valid pin.");
156 | }
157 | )
158 | onSuccess=(
159 | cashier => self.send(CashierChanged(Some(cashier)))
160 | )
161 | />
162 |
165 | paymentMethod
166 | cashier
167 |
168 |
174 |
178 |
;
179 | },
180 | };
--------------------------------------------------------------------------------
/src/components/orderTaking/OrderItems.re:
--------------------------------------------------------------------------------
1 | type state = {
2 | orderItems: list(OrderItem.t),
3 | selectedOrderItem: option(OrderItem.t),
4 | notes: list(OrderItemNote.t),
5 | showDialog: bool,
6 | };
7 |
8 | type action =
9 | | RemoveOrderItem(OrderItem.t)
10 | | ChangeQuantity(OrderItem.t, int)
11 | | DisplayNote(string)
12 | | AddNotesToOrderItem
13 | | RemoveNote(OrderItemNote.t)
14 | | ShowDialog(OrderItem.t)
15 | | HideDialog;
16 | let str = ReasonReact.string;
17 | let lastId = ref(0);
18 | let newNote = (value: string) => {
19 | lastId := lastId^ + 1;
20 | {OrderItemNote.id: lastId^ |> string_of_int, value};
21 | };
22 |
23 | let component = ReasonReact.reducerComponent("OrderItems");
24 |
25 | let make =
26 | (
27 | ~orderItems: list(OrderItem.t),
28 | ~discounts: list(Discount.t),
29 | ~onChange=_ => (),
30 | ~deselectDiscount=_d => (),
31 | _children,
32 | ) => {
33 | ...component,
34 | initialState: () => {
35 | orderItems,
36 | showDialog: false,
37 | notes: [],
38 | selectedOrderItem: None,
39 | },
40 | reducer: (action, state) =>
41 | switch (action) {
42 | | RemoveOrderItem(orderItem) =>
43 | ReasonReact.UpdateWithSideEffects(
44 | {
45 | ...state,
46 | orderItems:
47 | orderItems
48 | |> List.filter((i: OrderItem.t) => i.id !== orderItem.id),
49 | },
50 | (self => onChange(self.state.orderItems)),
51 | )
52 | | ChangeQuantity(orderItem, quantity) =>
53 | ReasonReact.UpdateWithSideEffects(
54 | {
55 | ...state,
56 | orderItems:
57 | orderItems
58 | |> List.map((i: OrderItem.t) =>
59 | if (i.id === orderItem.id) {
60 | {...i, quantity};
61 | } else {
62 | i;
63 | }
64 | ),
65 | },
66 | (self => onChange(self.state.orderItems)),
67 | )
68 | | AddNotesToOrderItem =>
69 | ReasonReact.UpdateWithSideEffects(
70 | {
71 | ...state,
72 | showDialog: false,
73 | orderItems:
74 | switch (state.selectedOrderItem) {
75 | | Some(orderItem) =>
76 | orderItems
77 | |> List.map((i: OrderItem.t) =>
78 | if (i.id === orderItem.id) {
79 | OrderItem.assignNotes(i, state.notes);
80 | } else {
81 | i;
82 | }
83 | )
84 | | None => orderItems
85 | },
86 | },
87 | (self => onChange(self.state.orderItems)),
88 | )
89 | | DisplayNote(value) =>
90 | ReasonReact.Update({...state, notes: state.notes @ [newNote(value)]})
91 | | RemoveNote(note) =>
92 | ReasonReact.Update({
93 | ...state,
94 | notes:
95 | state.notes |> List.filter((n: OrderItemNote.t) => n.id !== note.id),
96 | })
97 | | ShowDialog(orderItem) =>
98 | ReasonReact.Update({
99 | ...state,
100 | showDialog: true,
101 | notes: orderItem.notes,
102 | selectedOrderItem: Some(orderItem),
103 | })
104 | | HideDialog => ReasonReact.Update({...state, showDialog: false})
105 | },
106 | render: self => {
107 | let totals = OrderItemCalculation.getTotals(discounts, orderItems);
108 |
109 |
(ReactUtils.sloc("order.orderItems.header"))
110 |
self.send(RemoveNote(note)))
113 | addNote=(value => self.send(DisplayNote(value)))
114 | notes=self.state.notes
115 | label="action.addNotes"
116 | onCancel=(_ => self.send(HideDialog))
117 | onAccept=(_ => self.send(AddNotesToOrderItem))
118 | />
119 |
120 | (
121 | orderItems
122 | |> List.map((i: OrderItem.t) =>
123 |
124 | self.send(RemoveOrderItem(i)))
128 | showDialog=(() => self.send(ShowDialog(i)))
129 | changeQuantity=(
130 | quantity => self.send(ChangeQuantity(i, quantity))
131 | )
132 | />
133 | (
134 | i.notes |> List.length > 0 ?
135 | : ReasonReact.null
136 | )
137 |
138 | )
139 | |> Array.of_list
140 | |> ReasonReact.array
141 | )
142 |
143 |
144 | | (ReactUtils.sloc("order.subTotal")) |
145 |
146 | (ReactUtils.s(totals.subTotal |> Money.toDisplay))
147 | |
148 |
149 | (
150 | if (discounts |> List.length > 0) {
151 |
152 | | (ReactUtils.sloc("order.discounts")) |
153 | (ReactUtils.s(totals.discounts |> Money.toDisplay)) |
154 |
;
155 | } else {
156 | |
;
157 | }
158 | )
159 |
160 | | (ReactUtils.sloc("order.tax")) |
161 | (ReactUtils.s(totals.tax |> Money.toDisplay)) |
162 |
163 |
164 | | (ReactUtils.sloc("order.total")) |
165 | (ReactUtils.s(totals.total |> Money.toDisplay)) |
166 |
167 |
168 |
169 | (
170 | discounts
171 | |> List.map((d: Discount.t) =>
172 |
178 | )
179 | |> Array.of_list
180 | |> ReasonReact.array
181 | )
182 | ;
183 | },
184 | };
--------------------------------------------------------------------------------
/src/components/products/ProductEdit.re:
--------------------------------------------------------------------------------
1 | module ProductFormParams = {
2 | type state = {
3 | name: string,
4 | sku: string,
5 | price: string,
6 | taxCalculationMethod: string,
7 | taxRate: string,
8 | tags: string,
9 | };
10 | type fields = [
11 | | `name
12 | | `sku
13 | | `price
14 | | `taxCalculationMethod
15 | | `taxRate
16 | | `tags
17 | ];
18 | let lens = [
19 | (`name, s => s.name, (s, name) => {...s, name}),
20 | (`sku, s => s.sku, (s, sku) => {...s, sku}),
21 | (`price, s => s.price, (s, price) => {...s, price}),
22 | (
23 | `taxCalculationMethod,
24 | s => s.taxCalculationMethod,
25 | (s, taxCalculationMethod) => {...s, taxCalculationMethod},
26 | ),
27 | (`taxRate, s => s.taxRate, (s, taxRate) => {...s, taxRate}),
28 | (`tags, s => s.tags, (s, tags) => {...s, tags}),
29 | ];
30 | };
31 |
32 | let validationMessage = message =>
33 | switch (message) {
34 | | None => ReasonReact.null
35 | | Some(msg) =>
{ReactUtils.sloc(msg)}
36 | };
37 |
38 | module EditProductForm = ReForm.Create(ProductFormParams);
39 |
40 | let defaultTaxCalculationMethod = "totalFirst";
41 |
42 | let component = ReasonReact.statelessComponent("ProductEdit");
43 |
44 | let make =
45 | (
46 | ~product: option(Product.t)=None,
47 | ~onCancel=() => (),
48 | ~onSubmit,
49 | ~products,
50 | _children,
51 | ) => {
52 | ...component,
53 | render: _self => {
54 | let hasDuplicateSku = sku => {
55 | let duplicates =
56 | products |> List.filter((c: Product.t) => c.sku === sku);
57 | let isDuplicate = duplicates |> List.length > 0;
58 | isDuplicate ? Some("validation.duplicate") : None;
59 | };
60 | let isUnique = (original: option(Product.t), new_) =>
61 | switch (original) {
62 | | None => hasDuplicateSku(new_)
63 | | Some(prod) =>
64 | if (prod.sku === new_) {
65 | None;
66 | } else {
67 | hasDuplicateSku(new_);
68 | }
69 | };
70 | let canAddRate = (taxCalculationMethod, taxRate) =>
71 | if (taxCalculationMethod !== "exempt" && taxRate === "") {
72 | Some("validation.required");
73 | } else {
74 | None;
75 | };
76 |
{
81 | name: "",
82 | sku: "",
83 | price: "",
84 | taxCalculationMethod: defaultTaxCalculationMethod,
85 | taxRate: "",
86 | tags: "",
87 | }
88 | | Some(prod) =>
89 | let [|taxCalculationMethod, taxRate|] =
90 | Js.String.splitAtMost(
91 | "|",
92 | ~limit=2,
93 | prod.taxCalculation |> Tax.Calculation.toDelimitedString,
94 | );
95 | {
96 | name: prod.name,
97 | sku: prod.sku,
98 | price: prod.suggestedPrice |> Money.toDisplay,
99 | taxCalculationMethod,
100 | taxRate,
101 | tags: prod.tags |> Tags.toCSV,
102 | };
103 | }
104 | }
105 | schema=[
106 | (`name, Required),
107 | (`sku, Custom(v => v.sku |> isUnique(product))),
108 | (`price, Required),
109 | (`taxCalculationMethod, Required),
110 | (
111 | `taxRate,
112 | Custom(v => canAddRate(v.taxCalculationMethod, v.taxRate)),
113 | ),
114 | (`tags, Required),
115 | ]>
116 | ...{
117 | ({handleSubmit, handleChange, form, getErrorForField}) => {
118 | let field = (label, value, fieldType: ProductFormParams.fields) =>
119 |
120 |
131 | {validationMessage(getErrorForField(fieldType))}
132 |
;
133 | ;
201 | }
202 | }
203 | ;
204 | },
205 | };
--------------------------------------------------------------------------------
/src/components/shared/ItemManager.re:
--------------------------------------------------------------------------------
1 | module Create = (ItemStore: DbStore.T) => {
2 | type columnRenderer = {
3 | nameKey: string,
4 | render: ItemStore.item => ReasonReact.reactElement,
5 | };
6 |
7 | type intent =
8 | | Viewing
9 | | Creating
10 | | Updating(ItemStore.item)
11 | | Deleting(ItemStore.item);
12 |
13 | type state = {
14 | items: list(ItemStore.item),
15 | intent,
16 | };
17 |
18 | type action =
19 | | UpdateIntent(intent)
20 | | LoadItems
21 | | ItemsLoaded(list(ItemStore.item))
22 | | DeleteItem(ItemStore.item)
23 | | ItemDeleted(ItemStore.item)
24 | | UpdateItem(ItemStore.item)
25 | | ItemUpdated(ItemStore.item)
26 | | CreateItem(ItemStore.newItem)
27 | | ItemCreated(ItemStore.item);
28 |
29 | let component = ReasonReact.reducerComponent("ItemManager");
30 |
31 | let goBack = _ => ReasonReact.Router.push("/admin");
32 |
33 | let make =
34 | (
35 | ~headerKey,
36 | ~name,
37 | ~renderCreate,
38 | ~renderEdit,
39 | ~renderColumns,
40 | _children,
41 | ) => {
42 | ...component,
43 | initialState: () => {items: [], intent: Viewing},
44 | didMount: self => self.send(LoadItems),
45 | reducer: (action, state) =>
46 | switch (action) {
47 | | UpdateIntent(intent) => ReasonReact.Update({...state, intent})
48 | | LoadItems =>
49 | ReasonReact.SideEffects(
50 | (
51 | self =>
52 | Js.Promise.(
53 | ItemStore.getAll()
54 | |> then_(items => resolve(self.send(ItemsLoaded(items))))
55 | |> ignore
56 | )
57 | ),
58 | )
59 | | ItemsLoaded(items) => ReasonReact.Update({...state, items})
60 | | DeleteItem(item) =>
61 | ReasonReact.UpdateWithSideEffects(
62 | {...state, intent: Viewing},
63 | (
64 | self =>
65 | Js.Promise.(
66 | ItemStore.remove(~id=ItemStore.id(item))
67 | |> then_(() => resolve(self.send(ItemDeleted(item))))
68 | |> ignore
69 | )
70 | ),
71 | )
72 | | ItemDeleted(item) =>
73 | ReasonReact.Update({
74 | ...state,
75 | items:
76 | state.items
77 | |> List.filter(i => ItemStore.id(i) !== ItemStore.id(item)),
78 | })
79 | | UpdateItem(item) =>
80 | ReasonReact.UpdateWithSideEffects(
81 | {...state, intent: Viewing},
82 | (
83 | self =>
84 | Js.Promise.(
85 | ItemStore.update(item)
86 | |> then_(item => resolve(self.send(ItemUpdated(item))))
87 | |> catch(err => resolve(Js.log(err)))
88 | |> ignore
89 | )
90 | ),
91 | )
92 | | ItemUpdated(item) =>
93 | ReasonReact.Update({
94 | ...state,
95 | items:
96 | state.items
97 | |> List.map(i =>
98 | ItemStore.id(i) === ItemStore.id(item) ? item : i
99 | ),
100 | })
101 | | CreateItem(item) =>
102 | ReasonReact.UpdateWithSideEffects(
103 | {...state, intent: Viewing},
104 | (
105 | self =>
106 | Js.Promise.(
107 | ItemStore.add(item)
108 | |> then_(item => resolve(self.send(ItemCreated(item))))
109 | |> ignore
110 | )
111 | ),
112 | )
113 | | ItemCreated(item) =>
114 | ReasonReact.Update({...state, items: state.items @ [item]})
115 | },
116 | render: self => {
117 | let lowerCaseName = String.lowercase(name);
118 | let capitalizedName = String.capitalize(lowerCaseName);
119 |
120 |
121 |
122 |
self.send(UpdateIntent(Creating)))>
125 | (ReactUtils.s("Create"))
126 |
127 |
128 | (ReactUtils.s("Atras"))
129 |
130 |
131 |
(ReactUtils.sloc(headerKey))
132 |
133 |
134 |
135 |
136 |
137 | |
138 | (
139 | renderColumns
140 | |> Array.mapi((i, {nameKey}) =>
141 | string_of_int)>
142 | (ReactUtils.sloc(nameKey))
143 | |
144 | )
145 | |> ReasonReact.array
146 | )
147 | |
148 |
149 |
150 |
151 | (
152 | self.state.items
153 | |> List.map(item =>
154 |
155 | |
156 | |
165 | (
166 | renderColumns
167 | |> Array.mapi((i, columnRenderer) =>
168 | string_of_int)>
169 | (columnRenderer.render(item))
170 | |
171 | )
172 | |> ReasonReact.array
173 | )
174 |
175 | |
184 |
185 | )
186 | |> Array.of_list
187 | |> ReasonReact.array
188 | )
189 |
190 |
191 |
192 | (
193 | switch (self.state.intent) {
194 | | Viewing => ReasonReact.null
195 | | Creating =>
196 |
self.send(UpdateIntent(Viewing)))
200 | render=(
201 | () =>
202 | renderCreate(
203 | ~items=self.state.items,
204 | ~onSubmit=item => self.send(CreateItem(item)),
205 | ~onCancel=_ => self.send(UpdateIntent(Viewing)),
206 | )
207 | )
208 | />
209 | | Updating(item) =>
210 | self.send(UpdateIntent(Viewing)))
214 | render=(
215 | () =>
216 | renderEdit(
217 | ~items=self.state.items,
218 | ~item,
219 | ~onSubmit=item => self.send(UpdateItem(item)),
220 | ~onCancel=_ => self.send(UpdateIntent(Viewing)),
221 | )
222 | )
223 | />
224 | | Deleting(item) =>
225 | self.send(DeleteItem(item)))
230 | onCancel=(() => self.send(UpdateIntent(Viewing)))
231 | />
232 | }
233 | )
234 | ;
235 | },
236 | };
237 | };
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | font-size: 15px;
6 | }
7 |
8 | .header {
9 | background-color: #ccc;
10 | min-height: 65px;
11 | margin-bottom: 15px;
12 | padding: 10px;
13 | }
14 |
15 | .header-options {
16 | padding: 15px;
17 | font-size: 30px;
18 | }
19 | .spaceDivider {
20 | width: 15px;
21 | height: auto;
22 | display: inline-block;
23 | }
24 | .quantityDivider {
25 | width: 0px;
26 | height: auto;
27 | display: inline-block;
28 | }
29 | .heightDivider {
30 | height: 15px;
31 | }
32 | .quantitySelectorDiv {
33 | display: inline-block;
34 | }
35 | .quantityInput {
36 | width: 15%;
37 | }
38 | .quantityMinusButton {
39 | position: "top-right";
40 | }
41 | .modal {
42 | position: fixed;
43 | z-index: 1;
44 | left: 0;
45 | top: 0;
46 | width: 100%;
47 | height: 100%;
48 | overflow: auto;
49 | background-color: rgb(0, 0, 0);
50 | background-color: rgba(0, 0, 0, 4);
51 | }
52 | .alert {
53 | position: fixed;
54 | z-index: 1;
55 | width: 20%;
56 | height: 20%;
57 | left: 0;
58 | right: 0;
59 | border: 1px solid #666;
60 | background-color: darkgray;
61 | }
62 | .modal-header {
63 | text-align: center;
64 | font-size: 40px;
65 | }
66 | .modal-footer {
67 | margin-top: 20px;
68 | text-align: center;
69 | }
70 |
71 | .modal-body {
72 | background-color: #fefefe;
73 | margin: 0 auto;
74 | width: 65%;
75 | font-size: 20px;
76 | }
77 |
78 | .modal-content {
79 | background-color: #fefefe;
80 | margin: 15% auto;
81 | padding: 20px;
82 | width: 65%;
83 | font-size: 20px;
84 | position: relative;
85 | animation-name: animatetop;
86 | animation-duration: 0.4s;
87 | }
88 | @keyframes animatetop {
89 | from {
90 | top: -300px;
91 | opacity: 0;
92 | }
93 | to {
94 | top: 0;
95 | opacity: 1;
96 | }
97 | }
98 | .header-menu {
99 | float: right;
100 | /* width: 150px; */
101 | }
102 |
103 | input.big {
104 | font-size: 30px;
105 | }
106 | input.pin {
107 | width: 70px;
108 | }
109 |
110 | input.big-text {
111 | font-size: 30px;
112 | width: 100%;
113 | }
114 |
115 | input.customer-name-input {
116 | font-size: 30px;
117 | width: 300px;
118 | }
119 | .paid-date input {
120 | font-size: 20px;
121 | width: 400px;
122 | }
123 | .paid-date button {
124 | font-size: 20px;
125 | margin-left: 10px;
126 | }
127 |
128 | .open-orders {
129 | margin: 10px;
130 | }
131 |
132 | .open-order-card .time {
133 | font-size: 11px;
134 | color: darkblue;
135 | margin-top: 5px;
136 | }
137 | .open-order-card .customer-name {
138 | color: darkblue;
139 | font-size: 25px;
140 | margin-bottom: 5px;
141 | }
142 |
143 | .sub-label {
144 | font-size: 14px;
145 | color: rgba(0, 0, 0, 0.6);
146 | border-top: 1px solid #36373c;
147 | }
148 |
149 | .pin-entry {
150 | border: 1px solid black;
151 | border-radius: 8px;
152 | margin: 0 10px 0 10px;
153 | display: inline-block;
154 |
155 | text-align: center;
156 | font-size: 18px;
157 | padding: 0 10px 0 10px;
158 | }
159 | .pin-entry input {
160 | font-size: 25px;
161 | }
162 | .search-input {
163 | width: 75%;
164 | font-size: 20px;
165 | box-sizing: border-box;
166 | background-color: white;
167 | height: 55%;
168 | }
169 | .card {
170 | border: 0px;
171 | border-radius: 8px;
172 | padding: 10px;
173 | margin: 10px;
174 | background-color: lightblue;
175 | display: inline-block;
176 |
177 | text-align: center;
178 | cursor: pointer;
179 | font-size: 18px;
180 | }
181 |
182 | .quiet-card {
183 | background-color: #888;
184 | color: #444;
185 | }
186 | .wide-card {
187 | width: 100px;
188 | }
189 | .small-card {
190 | padding: 5px;
191 | margin: 5px;
192 | font-size: 13px;
193 | }
194 | .smallItems-card {
195 | border-radius: 35%;
196 | height: 5;
197 | width: 10;
198 | margin-right: 10%;
199 | justify-content: center;
200 | font-size: 14px;
201 | }
202 | .danger-card {
203 | background-color: darkred;
204 | color: #dddddd;
205 | }
206 | .exit-card {
207 | background-color: white;
208 | }
209 | .order .right-side {
210 | width: 475px;
211 | background-color: #bbbbbb;
212 | float: right;
213 | padding: 10px;
214 | }
215 |
216 | .back-button-card {
217 | background-color: blueviolet;
218 | color: white;
219 | }
220 |
221 | .order-items table {
222 | width: 100%;
223 | border-collapse: collapse;
224 | text-align: left;
225 | }
226 | .order-items table tbody td {
227 | height: 30px;
228 | padding-left: 5px;
229 | padding-right: 5px;
230 | }
231 | .order-items table tbody tr.note-row td ul {
232 | list-style-type: square;
233 | margin: 0;
234 | }
235 | .order-items table tfoot th {
236 | height: 30px;
237 | text-align: right;
238 | padding-right: 10px;
239 | }
240 | .order-items table tfoot td {
241 | width: 75px;
242 | }
243 | .order-items table tfoot tr.divider td {
244 | border-top: 2px solid black;
245 | }
246 | .order-items table tfoot tr.divider th {
247 | border-top: 2px solid black;
248 | }
249 | .order-items td.quantity {
250 | width: 130px;
251 | }
252 |
253 | .product-card {
254 | background-color: goldenrod;
255 | }
256 | .tag-card {
257 | background-color: cornflowerblue;
258 | color: white;
259 | }
260 |
261 | .order-header {
262 | background-color: #ccc;
263 | padding: 15px;
264 | height: 40px;
265 | }
266 | .order-header .customer-name {
267 | font-size: 30px;
268 | width: 350px;
269 | }
270 | .order-actions {
271 | float: right;
272 | }
273 | .order-actions .card {
274 | margin-top: 0px;
275 | margin-bottom: 0px;
276 | }
277 | .productFields {
278 | padding-right: 10px;
279 | }
280 | .exit-modal-button-card {
281 | position: absolute;
282 | top: 0;
283 | right: 0;
284 | }
285 | .save-button-card {
286 | background-color: darkblue;
287 | color: white;
288 |
289 | margin-top: 0px;
290 | margin-bottom: 0px;
291 | }
292 | .pay-button-card {
293 | background-color: green;
294 | color: white;
295 | margin-top: 0px;
296 | margin-bottom: 0px;
297 | }
298 | .remove-button-card {
299 | background-color: darkred;
300 | color: white;
301 |
302 | margin-top: 0px;
303 | margin-bottom: 0px;
304 | }
305 | .cancel-button-card {
306 | background-color: gray;
307 | color: black;
308 |
309 | margin-top: 0px;
310 | margin-bottom: 0px;
311 | }
312 | table.order-list {
313 | width: 100%;
314 | }
315 |
316 | .valid {
317 | color: darkgreen;
318 | }
319 | .invalid {
320 | color: darkred;
321 | }
322 |
323 | table.admin-table {
324 | width: 100%;
325 | border-collapse: collapse;
326 | text-align: left;
327 | }
328 |
329 | table.admin-table thead th {
330 | background-color: #bbbbbb;
331 | padding: 5px 0 5px 0;
332 | }
333 |
334 | .discounts {
335 | clear: left;
336 | margin-left: 5px;
337 | }
338 | .card-discount {
339 | background-color: #ccc;
340 | }
341 |
342 | .no-float {
343 | clear: both;
344 | }
345 |
346 | .bulk-import {
347 | width: 100%;
348 | height: 100px;
349 | }
350 | .invalid {
351 | font-size: 10px;
352 | padding: 3px;
353 | margin: 5px;
354 | background-color: darkred;
355 | color: white;
356 | border-radius: 5px;
357 | }
358 | .expense-management .section {
359 | clear: left;
360 | margin-bottom: 10px;
361 | }
362 | .expense-management .section .title {
363 | font-size: 20px;
364 | }
365 | .expense-description {
366 | width: 100%;
367 | height: 150px;
368 | }
369 | .no-float {
370 | clear: left;
371 | }
372 | .in-line {
373 | display: inline-block;
374 | }
375 | .money {
376 | width: 100px;
377 | font-size: 20px;
378 | }
379 | .percent {
380 | width: 100px;
381 | font-size: 20px;
382 | }
383 | .card-selected {
384 | background-color: orangered;
385 | color: white;
386 | }
387 | .table {
388 | width: 100%;
389 | }
390 |
391 | .loading {
392 | height: 20px;
393 | width: 20px;
394 | float: right;
395 | }
396 |
397 | .more-actions {
398 | margin-top: 30px;
399 | }
400 | .sku-search {
401 | font-size: 30px;
402 | color: white;
403 | border: 0px;
404 | width: 100%;
405 | background-color: #000000;
406 | opacity: 0.1;
407 | text-transform: lowercase;
408 | }
409 | .product-search {
410 | font-size: 30px;
411 | color: white;
412 | border: 0px;
413 | width: 100%;
414 | background-color: #000000;
415 | opacity: 0.1;
416 | text-transform: lowercase;
417 | }
418 | .pay-for-order {
419 | width: 400px;
420 | background-color: #eeeeee;
421 | border: #bbbbbb solid 1px;
422 | padding: 5px;
423 | margin: 20px auto;
424 | }
425 |
426 | .centered {
427 | position: fixed;
428 | top: 50%;
429 | left: 50%;
430 | /* bring your own prefixes */
431 | transform: translate(-50%, -50%);
432 | }
433 |
434 | .h-centered {
435 | margin: 0 auto;
436 | }
437 |
438 | .payment-method-selected {
439 | background-color: darkorange;
440 | }
441 |
--------------------------------------------------------------------------------
/src/components/orderTaking/orderScreen.re:
--------------------------------------------------------------------------------
1 | open Js.Promise;
2 |
3 | open OrderHelper;
4 |
5 | type viewing =
6 | | Tags
7 | | Products(string);
8 |
9 | type modifying =
10 | | Nothing
11 | | CustomerName;
12 |
13 | type state = {
14 | allProducts: list(Product.t),
15 | id: option(string),
16 | customerName: string,
17 | orderItems: list(OrderItem.t),
18 | discounts: list(Discount.t),
19 | createdOn: float,
20 | lastUpdated: option(float),
21 | returned: option(Return.t),
22 | paid: option(Paid.t),
23 | tags: list(string),
24 | viewing,
25 | meta: option(Js.Json.t),
26 | removed: bool,
27 | closedOrder: bool,
28 | modifying,
29 | allDiscounts: list(Discount.t),
30 | sku: string,
31 | showDialog: bool,
32 | skuEnabled: bool,
33 | };
34 |
35 | type action =
36 | | SelectTag(string)
37 | | SelectProduct(Product.t)
38 | | DeselectTag
39 | | LoadOrder(Order.orderVm)
40 | | CloseOrderScreen
41 | | ChangePaidDate(float)
42 | | ChangeCustomerName(string)
43 | | ChangeOrderItems(list(OrderItem.t))
44 | | ProductsLoaded(list(Product.t))
45 | | DiscountsLoaded(list(Discount.t))
46 | | ApplyDiscount(Discount.t)
47 | | RemoveDiscount(Discount.t)
48 | | ShowDialog
49 | | HideDialog
50 | | EnableSku
51 | | DisableSku;
52 |
53 | let dbUrl = "http://localhost:5984/orders";
54 |
55 | let component = ReasonReact.reducerComponent("Order");
56 |
57 | let buildOrder = state : Order.orderVm => {
58 | let order: Order.orderVm = {
59 | id: state.id,
60 | customerName: state.customerName,
61 | orderItems: state.orderItems,
62 | createdOn: state.createdOn,
63 | discounts: state.discounts,
64 | paid: state.paid,
65 | returned: state.returned,
66 | lastUpdated: state.lastUpdated,
67 | removed: state.removed,
68 | meta: state.meta,
69 | };
70 | /* order |> Order.fromVm |> WebhookEngine.fireForOrder(OrderStarted) |> ignore; */
71 | order;
72 | };
73 |
74 | let make = (~goHome, ~goToOrders, _children) => {
75 | ...component,
76 | reducer: (action, state) =>
77 | switch (action) {
78 | | ProductsLoaded(products) =>
79 | let tags = Product.getTags(products);
80 | ReasonReact.Update({...state, tags, allProducts: products});
81 | | DiscountsLoaded(discounts) =>
82 | ReasonReact.Update({...state, allDiscounts: discounts})
83 | | ChangeOrderItems(orderItems) =>
84 | ReasonReact.UpdateWithSideEffects(
85 | {...state, orderItems},
86 | (_ => Js.log(state.orderItems)),
87 | )
88 | | LoadOrder(order) =>
89 | Js.log(order);
90 | ReasonReact.Update({
91 | ...state,
92 | orderItems: order.orderItems,
93 | discounts: order.discounts,
94 | customerName: order.customerName,
95 | paid: order.paid,
96 | returned: order.returned,
97 | id: order.id,
98 | removed: order.removed,
99 | lastUpdated: order.lastUpdated,
100 | createdOn: order.createdOn,
101 | meta: order.meta,
102 | closedOrder:
103 | switch (order.paid) {
104 | | Some(_) => true
105 | | None => false
106 | },
107 | });
108 | | ApplyDiscount(dis) =>
109 | ReasonReact.Update({
110 | ...state,
111 | discounts: List.concat([state.discounts, [dis]]),
112 | allDiscounts:
113 | state.allDiscounts
114 | |> List.filter((d: Discount.t) => d.id !== dis.id),
115 | })
116 | | RemoveDiscount(dis) =>
117 | ReasonReact.Update({
118 | ...state,
119 | discounts:
120 | state.discounts |> List.filter((d: Discount.t) => d.id !== dis.id),
121 | allDiscounts: List.concat([state.allDiscounts, [dis]]),
122 | })
123 | | ChangeCustomerName(name) =>
124 | ReasonReact.Update({...state, customerName: name})
125 | | ChangePaidDate(date) =>
126 | ReasonReact.Update({
127 | ...state,
128 | paid:
129 | switch (state.paid) {
130 | | None => None
131 | | Some(paid) => Some({...paid, on: date})
132 | },
133 | })
134 | | SelectTag(tag) =>
135 | ReasonReact.Update({...state, viewing: Products(tag)})
136 | | DeselectTag => ReasonReact.Update({...state, viewing: Tags})
137 | | CloseOrderScreen =>
138 | ReasonReact.SideEffects(
139 | (
140 | _self => {
141 | let go = state.closedOrder ? goToOrders : goHome;
142 | go();
143 | }
144 | ),
145 | )
146 | | SelectProduct(product) =>
147 | ReasonReact.UpdateWithSideEffects(
148 | {
149 | ...state,
150 | orderItems:
151 | List.concat([
152 | state.orderItems,
153 | [
154 | buildOrderItem(
155 | product,
156 | (Date.now() |> string_of_float)
157 | ++ (state.orderItems |> List.length |> string_of_int),
158 | ),
159 | ],
160 | ]),
161 | },
162 | (self => self.send(HideDialog)),
163 | )
164 | | ShowDialog =>
165 | ReasonReact.UpdateWithSideEffects(
166 | {...state, showDialog: true},
167 | (self => self.send(DisableSku)),
168 | )
169 | | HideDialog =>
170 | ReasonReact.UpdateWithSideEffects(
171 | {...state, showDialog: false},
172 | (self => self.send(EnableSku)),
173 | )
174 | | EnableSku => ReasonReact.Update({...state, skuEnabled: true})
175 | | DisableSku => ReasonReact.Update({...state, skuEnabled: false})
176 | },
177 | initialState: () => {
178 | let queryString = ReasonReact.Router.dangerouslyGetInitialUrl().search;
179 | let customerName =
180 | switch (Util.QueryParam.get("customerName", queryString)) {
181 | | Some(name) => name |> Js.Global.decodeURIComponent
182 | | None => "order.defaultCustomerName" |> Lang.translate
183 | };
184 | {
185 | orderItems: [],
186 | discounts: [],
187 | meta: None,
188 | removed: false,
189 | createdOn: 0.0,
190 | lastUpdated: None,
191 | id: None,
192 | paid: None,
193 | customerName,
194 | returned: None,
195 | closedOrder: false,
196 | allProducts: [],
197 | tags: [],
198 | viewing: Tags,
199 | modifying: Nothing,
200 | allDiscounts: [],
201 | sku: "",
202 | showDialog: false,
203 | skuEnabled: true,
204 | };
205 | },
206 | didMount: self => {
207 | DiscountStore.getAll()
208 | |> then_(discounts => {
209 | self.send(DiscountsLoaded(discounts));
210 | resolve();
211 | })
212 | |> ignore;
213 | ProductStore.getAll()
214 | |> then_(prods => {
215 | self.send(ProductsLoaded(prods));
216 | resolve();
217 | })
218 | |> ignore;
219 | let queryString = ReasonReact.Router.dangerouslyGetInitialUrl().search;
220 | switch (Util.QueryParam.get("orderId", queryString)) {
221 | | None => ()
222 | | Some(orderId) =>
223 | getOrderVm(orderId)
224 | |> Js.Promise.then_(vm => {
225 | self.send(LoadOrder(vm));
226 | Js.Promise.resolve();
227 | })
228 | |> ignore;
229 | ();
230 | };
231 | },
232 | render: self => {
233 | Js.log("orderscreen:: " ++ self.state.customerName);
234 | let deselectTag = _event => self.send(DeselectTag);
235 | let selectTag = tag => self.send(SelectTag(tag));
236 | let selectProduct = product => self.send(SelectProduct(product));
237 | let discountSelected = discount => self.send(ApplyDiscount(discount));
238 | let discountDeselected = discount => self.send(RemoveDiscount(discount));
239 |
240 |
self.send(SelectProduct(p)))
245 | onCancel=(_ => self.send(HideDialog))
246 | />
247 |
248 |
self.send(CloseOrderScreen))
251 | onShowProductModal=(_ => self.send(ShowDialog))
252 | />
253 |
254 | self.send(ChangeCustomerName(newName)))
258 | />
259 |
260 |
262 | (
263 | if (self.state.closedOrder) {
264 |
;
269 | } else {
270 |
271 | self.send(SelectProduct(p)))
275 | />
276 | self.send(ChangeOrderItems(orderItems))
282 | )
283 | />
284 |
;
285 | }
286 | )
287 |
289 | (
290 | if (self.state.closedOrder) {
291 |
self.send(ChangePaidDate(newDate)))
294 | />;
295 | } else {
296 |
297 | (
298 | switch (self.state.viewing) {
299 | | Tags =>
300 |
301 | (
302 | self.state.tags
303 | |> List.map(tag => )
304 | |> Array.of_list
305 | |> ReasonReact.array
306 | )
307 |
308 | | Products(tag) =>
309 |
310 |
316 | (
317 | Product.filterProducts(tag, self.state.allProducts)
318 | |> List.map(product =>
319 |
320 | )
321 | |> Array.of_list
322 | |> ReasonReact.array
323 | )
324 |
325 | }
326 | )
327 |
328 |
332 |
333 |
334 |
349 |
;
354 | },
355 | };
--------------------------------------------------------------------------------